telerik


←Back to Library

disclaimer & policies

Finally I’ve kicked back and started blogging on telerik, after quite a few years of daily usage of telerik controls including that for asp-net Ajax including an highly sophisticated and fairly complex asp.net 4 web-forms application, needing performance enhancements. I’ve added many other functionalities to our site are now being used all over our organization and has set standards, like one to detect changes on a web form containing telerik rad controls / as.net server controls / HTML controls … prompting users when trying to navigate the page away w/o saving etc. Few others for asp.net GridView also, but

telerik perf : before getting rid of it (min screen width : 800px approx)

Generally, comparing telerik controls with the standard ASP controls is a bit like comparing apples to pears – both are types of fruit, but quite different from one another, they offer different things. All I want to clarify is, do not reinvent the wheel and above all, the performance of an application depends on the developer and the logic of the application, not always on the exact controls used


… in many scenarios we need to do a li’le more. Telerik does come with some baggage, and that will only get worse if you have to load a bunch of additional tools. I have found that the Rad Controls can do just about many things. I do not neglect a group of developers complaining about telerik controls and trying to avoid its use due to performance hit , may be they’re right but I’d first make sure that I’ve tweaked the controls ( RadGrid etc. ) for best performance, which mostly remain unnoticed.


performance & size wise : asp.net default controls are indeed better than telerik, jQuery UI is better than asp.net default controls, html controls are better than jQuery UI, no code on your page is fastest !


“mostly an elegant solution do exist we just have to find and figure it out, if you think you can not change the design, try to think again !” In many cases the number of requests made during page load is leads toward bottle-neck. In such situations script manager and/or style manager can be used to combine all such requests as one. I personally think that page load event should not include heavy database processing, but sometimes this is required too, in such cases we may also do Ajax requests instead blocking database calls. As now .NET 4.5 supports asynchronous processing I’d try to explore my options with that too.
Myth(s) :

  1. Optimization needs lots of coding – false. I’ll prove it wrong all along this post !
  2. I should not use telerik, it slows my site down – use it wisely everything comes with cost.
  3. If I turn off my ViewState, my RadGrid brakes – false for read-only RadGrid
  4. I am telerik’s evangelist / sales person.

fact(s) :

  1. put CSS at the top, and js at the bottom of the page.
  2. make CSS and JS external
  3. avoid Page LifeCycle
  4. load on demand
  5. *there are no silver bullets ! Every option has pros and cons, test everything !
  6. I’d try my very best to not waste your time

General :

  1. http://www.telerik.com/aspnet-ajax/tech-sheets/top-performance
  2. Optimization Tips:The Rad Managers for ASP.NET AJAX
  3. Optimization Tips: Testing Page Performance
  4. Optimization Tips: Using RadAjaxManagerProxy Controls
  5. Optimization Tips: Using HTTP Compression
  6. Using Custom Skins
  7. Not in intranet ? use CDN support / fallback mechanism
  8. Performance problems can be caused by large updating areas with lots of HTML (especially tables), JavaScript files, JavaScript components and CSS. More info: Optimizing client-side performance
  9. Targeting modern browser ? (Opera, FireFox, Chrome and IE9+) explore : light rendering

https://i0.wp.com/blogs.telerik.com/images/default-source/marinbratanov/radwindow-3dbox-lightweight-vs-classic-rendering.png

 

Real time validation :

Instead using asp.net server side validator controls, try to use real time validation using RadInput or using JavaScript ! Here is the telerik demo that illustrates how. Or if you want to do it JavaScript way, just keep replacing anything non numeric with empty string, regEx is your friend ! For instance, a simple numeric textbox can be got to working w/o telerik as shown below :

this would prevent your page from having unnecessary overhead if you’re looking to implement something relatively quite simple. Of course this can also be further optimized by using pure JavaScript if your page is not using jQuery already.

jsbin live demo : jsbin.com/ayUhokIl/1

https://gist.github.com/ablaze8/fcf972bbbe1a500c03e715688c1b5ebd

Web.Config ( 1st myth )

light mode rendering :

https://gist.github.com/ablaze8/854b9189d0f02618e9fd1042df991f81

Rad Grid

Optimizing RadGrid for ASP.NET — Good Starting Point !

Do :

  1. View State management
  2. optimize column editors
  3. optimize embedded controls
  4. optimize hierarchy / groups
  5. optimize data operations
  6. optimize grid operations
  7. ajaxify
  8. conditional rendering
  9. use PageStatePersister (asp.net 2.0)

( 1A ) if possible, don’t load data in view state ( telerik docs )

Managing view state: If you can avoid it, never ever load data in view state. If you bind data using declarative DataSource / setting DataSource and then using databind() after or during page load, all of data is persisted in viewstate. Myth, if I turn off my ViewState my grid would break, the functionality would go out of the window. Truth is, there is also something called Control-Sate (.NET 2.0) and we can never turn off, so this myth is quite far away from the fact, you’d still have lots of functionality. If you can not get the view state smaller, try using custom PageSatePersister. Also telerik you can compress the ViewState (* but might not be the best option).

Before we talk further, let’s have a look at this ViewState demo.

Screen Shot 1 of 3 Screen Shot 2 of 3 Screen Shot 3 of 3
… What happened ? What caused the view state to reduce drastically ? If you haven’t noticed in demo, Short Answer : Bind Data in OnPreInit().
Long Answer : (reason) it occurs before ViewState is tracked & restored. Must be fired on every page postback. In other words, you can rebind the data here and once its available, anything has been changed like selected row index, paging etc. can be reapplied to data through ViewState properties after the data has been loaded and before it has been saved and tracked. So, if you load data here, it is not saved in view state & not to mention you can also use caching here so you do not need to fetch data from database on every PostBack !

( 1B ) Let’s now say that you do not have the option to do so, or you do not want to do so. Next option is, to disable ViewState(s). So for the 2nd screen shot above, my ViewState is 5544 bytes for 13 records, now let’s say that I just want to show the data the grid is read only and if you’re not doing any editing, by setting EnableViewState=”false” and by doing only that for the 2nd image above my view state reduces from 5544 bytes to 304 bytes !

What would you give up by disabling view state ? Let’s consider following scenario :

now for the structure above, even if the RadGrid has disabled ViewState, you still can do filtering, paging, sorting and editing… persistently. Don’t take it my word for it. Now if we reconsider the same page seen earlier ( with added paging, filtering and sorting & editing ) for some good 91 records.

Okay so I loaded the RarGrid and 1st of 10 pages ( as now I have paging as one of the enabled features ) and the ViewSate sizes are : 8184, 8140, 8196, 8200, 8200, 8100, 8204, 8124, 8176 & 6068 bytes respectively … so pretty much similar for each page except Page 10, which had one record.
Now, I changed the PageSize from 10 to 20 records and I have now 5 pages instead 10, viewstates : 10512, 10584, 10572, 10516, 8420 (11 records on last page).

I turned off the view state for rad grid and I still can perform all those operations. Page Size 10 records, and guess what, ViewSates are reduced to : 600, 632, 632, 632, 632, 632, 632, 632, 632, &, 632 bytes. For Page Size 20, ViewState size counts changes to : 660 & 664 for rest 4 pages.

One little thing : ( 1st myth )

After disabling viewstate : Can I filter data ? Yes. Can I sort my data now ? Oh, Yes. Can I still perform paging ? Why not ? Did filter & sorting persisted when I performed paging on my grid ? Absolutely, yes ! What has gone with ViewState then ? Notice that now if try to edit the record and hit update, with disabled ViewState the value reverts back to original value. In other words, you do not have to worry about disabled viewstate if your grid functions as read-only RadGrid. However you’d certainly require ViewState in RadGrid if your grid needs to perform edit operation.

  • Further more, form in asp.net is “runat=’server'”, so it has the ViewState, and sometimes it is #1 culprit !
  • RadGrid and its table-views DOES manage the state of the following features while ViewState is disabled :
    • settings regarding the hierarchy structure except the expanded state of a row
    • Indexes of selected items & edited items
    • Group by expressions, sort expressions & settings
  • RadGrid DOESN’T manage the sate for : grouping & filtering features while ViewState is disabled.

( 1C ) if you do not want to disable viewstates, at the end of the day last option you’ve left is page state persister, in your browser file. So Now you want to get rid of view state and also want all full functionalists. So with following your ViewState would get compressed and stored somewhere (session). Best of both worlds, but as your view state is not tightly coupled, you might want to make sure caching has no problems with that and other possible consequences.
You can find existing browser definitions at \Microsoft.NET\Framework\\CONFIG\Browsers

( 2 ) Shared Column Editors

e.g. shared Date Picker. Rad InputManger is quite useful. You can put simple asp:TextBoxes and can manage settings from within RadInputManager to turn asp:TextBox into NumericTextBox, RE Validation. Result: less markup, less initialization code & footprint.

misc :

  1. a rule of thumb : if your grid is readonly you don’t need a viewstate.
  2. if your grid just needs to display data you probaly can switch to asp:Repeater or asp:Grid, like I said, everything comes at the cost.
  3. If your grid or several instances of the control reside in page view(s) of RadMultipage (connected to RadTabStrip), I recommend choosing RenderSelectedPageOnly = true for RadMultipage, set AutoPostBack = true for the tabstrip and ajaxify the tabstrip and the multipage via RadAjaxManager. Thus only the active page view will be loaded at a time and merly the grid object residing in that page view will be bound to data, thus reducing the loading and rendering time of the page.
  4. You could use LinqDataSource for which the Grid control will perform aggregate calculations or executes sorting/filtering/paging operations by means of native LINQ expressions. This technique significantly reduce the time necessary to process these actions “behind the scenes” and allows you to handle millions of records within a few seconds.
  5. Single expand in hierarchical grid
  6. IE Memory leaks etc perf suggestions from telerik documentation
  7. Custom Paging etc.
  8. Virtual Scrolling
  9. Rebind grid on command/postback event with EnableViewState = false (below)
protected void MyButton_Click(object sender, EventArgs e)
{
    //perform some actions here
    RadGrid1.DataSource = null;

    //call the Rebind() method after nullifying the data source
    RadGrid1.Rebind();
}

Rad Combobox

2nd most commonly used control. You can use the same approach of databinding explained above in the screen shots for Rad Grid. Or ViewState. Your pptions does not end here for RadCombobox. If you’re not doing anything fancy with it You can most certainly add

<telerik:RadComboBox ... RenderMode="Lightweight"; ...

and you can also make it look a lot like native control by : RenderMode=”Native”. ComboBox – Render Mode : Documentation

Classic Lightweight Native
Markup Size 1.74 KB 1.62 KB 0.98 KB
CSS Size 17.27 KB 19.5 KB 0 B
Image Sprite Size 8.43 KB 1.9 KB 0 B

Talking in general how do you bind your RadCombobox ? Something like below ?

foreach(var cust in Customers)
{
  RadComboBox1.Items.Add(new RadComboBoxItem(cust.Name, cust.ID);
}

How about this :

RadComboBox1.DataSource = Customers;
RadComboBox1.DataTextField = "Name";
RadComboBox1.DataValueField = "ID";
  1. as iterating to collection is slower, let’s say you replaced foreach loop with for, even-though if no special action is being taken I do not see a point to iterate
  2. performance might degrade with lots of items and lots of combobox instances. This is addressed by using load on demand. The best approach to optimize the performance speed of Telerik RadComboBox when using huge amount of items is using the load-on-demand feature.
  3. The using of EnableItemCaching

Rad Date/Numeric-Input, Rad MaskedTextBox & Rad TextBox

Don’t use any until you really have to ! jQuery UI & Ajax Control Toolkit sample site has quite a nice of alternatives here. or try to use asp.net default controls and skinning them.

Rad TreeView

telerik documentation

Rad Editor

telerik documentation

Bad Scenario(s) :

Having many editors on the page (10, 20 or even 30. More common in MOSS scenarios). RadEditor for ASP.NET AJAX initializes about 3-4 times faster than the Classic version on the client side. Nonetheless, having 30 instances of the editor is bound to cause a delay. However, this delay can be greatly reduced and brought to almost nothing – by setting a ToolProviderID (so that many editors share the same toolbar and no additional markup is sent on client), as well as set the ToolbarMode property – non default toolbars use lazy initialization and are initialized not when the page loads, but when an editor is first used (e.g. the user clicks in the content area).

Loading too much content into the editor (100K and more).This is done very rarely. Problem is inherent. When having to deal with so much content, the browser eats lots of memory to provide for storing the editor states needed by the Undo/Redo, the Undo/Redo itself starts executing slowly due to the huge content. That said – my advise is to follow your instincts.

Rad TabStip

Having lots of page views (inside RadMultiPage) can slow down switching between tabs. Also it generates lots of HTML (because of the controls contained in the pageviews). To tackle this problem we have an online example demonstrating how to load pageviews on demand via AJAX. The multipage also has a property “RenderSelectedPageOnly” which does exactly what it says. In this case switching to a new page view requires postback. RadAjaxManager & RadAjaxPanel

some recipes :
Description Get
RadGrid
Demonstrates how one can customize the rad-grid and can programmatically, add dynamic controls such as link button, show/hide columns headers along with grouping. The dynamically added link-button (Server Control) has added attributes which are accessible in Client Side as well as Server Side event handlers.
zip

One thought on “telerik”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s