telerik

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

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

light mode rendering :

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

Rad Grid

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.

( 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 )

( 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

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

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