Atanas Korchev's blog

ASP.NET Ajax Controls and jQuery

Atanas Korchev — Thu, 06 Nov 2008 09:33:29 GMT

As you probably know by know the Q3 2008 release is out. In this release we included the jQuery JavaScript library in our scripts. For now only RadTreeView and RadScheduler benefit from it but we plan deeper jQuery integration in the future. In this blog post I will show you how to use the built-in jQuery file in your projects.

Including jQuery

If you have RadScheduler or RadTreeView in your page jQuery is already included so you can skip to the next paragraph. If not - read ahead.

Add a ScriptReference pointing to Core.js as we use a slightly customized version of jQuery which depends on Core.js.

Update!!! We have not modified the implementation of jQuery in any way. We have just appended a few more lines of JavaScript at the end of the file in order to avoid the aforementioned version conflict and to include a few useful jQuery plugins.
```
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
```

Add a ScriptReference pointing to jQuery.js

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

Here is how your RadScriptManager should look like in the end:

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" >
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
    </Scripts>
</telerik:RadScriptManager>

Using jQuery

After including the jQuery file you can start using it. There is a trick though - the jQuery object is available as $telerik.$ instead of the default $ or jQuery aliases. This is so to avoid compatibility issues with applications which already use (other versions of) jQuery. For more info you can check the documentation of the noConflict method. Fortunately there is an easy workaround to enable back the $ alias:

<script type="text/javascript">
window.$ = $telerik.$;
</script>

or even better use a self-calling anonymous function to avoid creating a global variable (window.$):

<script type="text/javascript">
(function($) {
    $(document).ready(function() {
            alert("Hooray! The document is ready!");
        }
    );
})($telerik.$);
</script>

I much prefer the second option which in fact we use internally to avoid typing $telerik.$ every time.

Demo

Here is a modified version of the RadComboBox and jQuery integration demo which now uses the built-in jQuery library:

<telerik:RadScriptManager runat="server" ID="RadScriptManager1">
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
    </Scripts>
</telerik:RadScriptManager>

<telerik:RadComboBox runat="server" ID="RadComboBox1" Width="300px" Skin="Telerik">
    <Items>
        <telerik:RadComboBoxItem Text="ASP.NET AJAX UI Controls" />
        <telerik:RadComboBoxItem Text="WinForms UI Controls" />
        <telerik:RadComboBoxItem Text="WPF UI Controls" />
        <telerik:RadComboBoxItem Text="Silverlight UI Controls" />
        <telerik:RadComboBoxItem Text="Telerik Reporting" />
        <telerik:RadComboBoxItem Text="Telerik OpenAccess ORM" />
        <telerik:RadComboBoxItem Text="Telerik Sitefinity CMS" />
    </Items>
</telerik:RadComboBox>

<script type="text/javascript">
    (function($) {
        $(document).ready(function() {
            $('.rcbItem')
            .mouseover(function() {
                $(this).stop().animate({ paddingLeft: "30px" }, { duration: 300 });
            })
            .mouseout(function() {
                $(this).stop().animate({ paddingLeft: "4px" }, { duration: 300 });
            });
        });
    })($telerik.$);
</script>

[Download]

I hope this helps.

ASP.NET Ajax Controls in ASP.NET MVC

Atanas Korchev — Thu, 06 Nov 2008 03:29:07 GMT

The Q3 2008 release is now out and I am glad to inform you that RadScriptManager provides support for ASP.NET MVC view and master pages. What this means is that RadControls for ASP.NET Ajax can be used in ASP.NET MVC. We have tested with the ASP.NET MVC Beta 1 release.

Using RadControls for ASP.NET Ajax in ASP.NET MVC View Pages

1. Add an instance of RadScriptManager to your view page (or master page). Make sure the required HTTP handlers are properly registered (can be done from the smart tag in design time).

2. Add a control to your view page or master page. The following controls require further configuration in order to properly work in ASP.NET MVC:

RadEditor

The dialog HTTP handler's extension should be changed to "axd":
Before:

<add path="Telerik.Web.UI.DialogHandler.aspx" ... />

After:

<add path="Telerik.Web.UI.DialogHandler.axd" ... />

The DialogHandler property of RadEditor should be set to
"~/ Telerik.Web.UI.DialogHandler.axd":

<telerik:RadEditor runat="server" ID="RadEditor1" DialogHandlerUrl="~/Telerik.Web.UI.DialogHandler.axd" />

RadEditor should be placed inside a form tag.

RadUpload

The progress manager HTTP handler's extension should be changed to "axd":
Before:

<add path="Telerik.RadUploadProgressHandler.ashx" ... />

After:

<add path="Telerik.RadUploadProgressHandler.axd" ... />

Set the AjaxUrl property of RadProgressManager to "~/Telerik.RadUploadProgressHandler.axd":

<telerik:RadProgressManager runat="server" ID="RadProgressManager1" AjaxUrl="~/Telerik.RadUploadProgressHandler.axd"/>

RadUpload should be placed inside a form tag

RadSpell
- The dialog HTTP handler's extension should be changed to "axd":
  Before:
```
<add path="Telerik.Web.UI.DialogHandler.aspx" ... />
```
  After:
```
<add path="Telerik.Web.UI.DialogHandler.axd" ... /> 
```
- The HandlerUrl property of RadEditor should be set to "~/ Telerik.Web.UI.DialogHandler.axd":

Samples

Using navigation controls and linking to actions

This approach is useful when you need a navigation control (RadTreeView, RadTabStrip, RadPanelBar, RadMenu, RadToolBar) to link to actions.

<% RadTreeView1.DataBind() %> 
 
<telerik:RadTreeView runat="server" ID="RadTreeView1"> 
    <Nodes> 
        <telerik:RadTreeNode NavigateUrl='<%# Url.Action("Index")%>' Text="Index" /> 
        <telerik:RadTreeNode NavigateUrl='<%# Url.Action("Home")%>' Text="Home" /> 
    </Nodes> 
</telerik:RadTreeView>

DataBinding RadGrid

<% 
    RadGrid1.DataSource = ViewData["MyBusinessObjectCollection"]; 
    RadGrid1.DataBind(); 
%> 

<telerik:RadGrid runat="server" ID="RadGrid1" />

For a more advanced example check this blog post. You can also go and check the live demo.

Uploading Files with RadUpload

View:

<% using (Html.BeginForm("Upload", "Home")){%> 
 
<telerik:RadUpload runat="server" ID="RadUpload1" ></telerik:RadUpload> 
<telerik:RadProgressManager runat="server" ID="RadProgressManager1" AjaxUrl="~/Telerik.RadUploadProgressHandler.axd"/> 
<telerik:RadProgressArea runat="server" ID="RadProgressArea1"/> 
 
<input type="submit" value="Upload" /> 
 
<%} %>

Controller:

public ActionResult Upload() 
{ 
    if (Request.Files.Count > 0) 
    { 
        Request.Files[0].SaveAs("path_to_file"); 
    } 
    return View("Index"); 
}

Known Limitations

RadAjaxManager, RadAjaxPanel, postbacks and ViewState are not supported

By default ASP.NET view pages don't have server form tag (<form runat="server">) which is required for ViewState and postbacks support. Partial rendering is also not supported by ASP.NET MVC and as a result RadAjaxManager and RadAjax panel are not working.

RadScheduler does not support ASP.NET MVC at the time being.

RadScheduler relies on postbacks (or ajax requests) in order to insert, update, delete appointments. Support for ASP.NET MVC will be implemented in the upcoming Q1 2009 release.

RadGrid's built-in insert, update, delete, sort, group are not supported

All those features rely on postbacks by default and as such are not supported in ASP.NET MVC. This blog post describes how to work around this problem.

Skin and base CSS files should be registered by hand when using the PartialView method

Alternatively you can use RadStyleSheetManager in the user control used in PartialView.

Updates via the built-in ASP.NET Ajax support are not supported

The HTML of the controls is successfully updated however JavaScript is not executed by the built-in ASP.NET MVC Ajax implementation. We would provide a workaround in the future.

Only the ASP.NET rendering engine is supported

This stems from the fact that RadControls for ASP.NET Ajax depend on the ASP.NET Page and control lifecycle.

Future

A full-blown ASP.NET MVC application built on top of RadControls for ASP.NET Ajax and Telerik OpenAccess is already in the works. I will blog when it is ready.

RadMenu for ASP.NET Ajax - Working with disabled JavaScript

Atanas Korchev — Thu, 02 Oct 2008 10:27:48 GMT

As you may know accessibility standards require a web page to work when JavaScript is disabled. In this blog post I will show you how to make RadMenu work even without JavaScript. I will also show how to make JAWS reader "see" all items rendered by RadMenu (even the hidden ones).

Disabling JavaScript

First we need to find a way to disable JavaScript in our browser of choice. For FireFox you need to install the web developer toolbar plugin. Then you can easily use the "Disable JavaScript" option:

In Internet Explorer you should first edit the security settings for the zone in which your test page is. Be careful to select the right zone - if you are testing locally you need to customize the "Local Intranet" zone:
�

Then set the "Active scripting" option to "Disable":

Making RadMenu open when JavaScript is disabled

By default RadMenu items open in response of the JavaScript mouseover event. This means that when JavaScript is disabled items won't open. Fortunately most modern browsers support the ":hover" pseudo CSS class on every HTML element. This allows the menu items to open only by using CSS:

    
            <style�type="text/css"�title="RadMenu-Pure-Css">� �
        
            ����.RadMenu�.rmItem:hover�>�.rmSlide,� �
        
            ����.RadMenu�.rmItem:hover�>�.rmSlide�.rmGroup� �
        
            ����{���� �
        
            ��������display:�block;���� �
        
            ��������overflow:�visible;���� �
        
            ����}���� �
        
            ����.RadMenu�.rmItem:hover�.rmSlide� �
        
            ����{���� �
        
            ��������top:�100%;���� �
        
            ��������left:�0;���� �
        
            ����}���� �
        
            ����.RadMenu�.rmItem�.rmItem:hover�.rmSlide� �
        
            ����{���� �
        
            ��������top:0;���� �
        
            ��������left:�100%;���� �
        
            ����}���� �
        
            ����.RadMenu�.rmVertical�.rmItem� �
        
            ����{���� �
        
            ��������float:none;� �
        
            ����}��� �
        
            </style>�
        
            �
        
            �

Have in mind that animations will not work (remember that JavaScript is disabled). This CSS will affect the normal RadMenu behavior if JavaScript is enabled. To remove it we can use a few lines of JavaScript:

    
            <body>� �
        
            ����<script�type="text/javascript">� �
        
            ��������//<!--� �
        
            ��������var�styles�=�document.getElementsByTagName("style");� �
        
            ��������for�(var�i�=�0;�i�<�styles.length;�i++)� �
        
            ��������{� �
        
            ������������if�(styles[i].title�==�"RadMenu-Pure-Css")� �
        
            ������������{� �
        
            ����������������styles[i].parentNode.removeChild(styles[i]);� �
        
            ����������������break;� �
        
            ������������}� �
        
            ��������}� �
        
            ��������//-->� �
        
            ����</script>�
        
            �
        
            �

That code will run only if JavaScript is enabled and remove the workaround stylesheet (based on its title).

What about older browsers which are still widely used?

Internet Explorer 6 supports the ":hover" pseudo CSS class only for "a" elements. This means that the aforementioned workaround will not work at all. What can we do about this? We can simply show all items to the user in case JavaScript is disabled. Here is the CSS:

    
            <style�type="text/css"�title="RadMenu-Pure-Css">� �
        
            ����div.RadMenu�div.rmSlide,� �
        
            ����div.RadMenu�ul.rmGroup,� �
        
            ����div.RadMenu�ul.rmRootGroup� �
        
            ����{���� �
        
            ��������display:�block;���� �
        
            ��������overflow:�visible;� �
        
            ��������position:static;� �
        
            ��������float:none;� �
        
            ����}� �
        
            ����div.RadMenu�li.rmItem� �
        
            ����{� �
        
            ��������float:none;� �
        
            ����}� �
        
            </style>�

Here is how the final result looks like:

Again you can hide it from browsers which have enabled JavaScript by using the code from the previous paragraph.

What about postbacks?

RadMenu is using JavaScript in order to postback when the user subscribes to the ItemClick event. When JavaScript is disabled the ItemClick event simply won't fire. Fortunately there is a workaround - using the ItemTemplate and controls which postback without JavaScript:

    
            <telerik:RadMenu�runat="server"�ID="RadMenu1"�Skin="Hay">� �
        
            ����<ItemTemplate>� �
        
            ��������<asp:Button�runat="server"�ID="Button1"� �
        
            ������������CommandArgument="<%#�Container.UniqueID%>"� �
        
            ������������Text="<%#Container.Text�%>"�OnCommand="Button1_Command"�/>� �
        
            ����</ItemTemplate>� �
        
            �</telerik:RadMenu>�

The <asp:Button /> control does not require JavaScript in order to postback as it renders as <input type="submit" />. By assigning CommandArgument we can later determine which RadMenuItem initiated the postback:

    
            protected�void�Button1_Command(object�sender,�CommandEventArgs�e)� �
        
            {� �
        
            ����RadMenuItem�menuItem�=�(RadMenuItem)�Page.FindControl((string)e.CommandArgument);� �
        
            ����Label1.Text�=�menuItem.Text;� �
        
            }�

We shall also need some CSS to make the buttons look more than regular menu items:

    
            <style�type="text/css">� �
        
            div.RadMenu�li.rmItem�input� �
        
            {� �
        
            ����padding:0;� �
        
            ����margin:0;� �
        
            ����border:0�none;� �
        
            ����background:�transparent;� �
        
            ����font:�normal�11px/17px�arial,sans-serif;� �
        
            ����height:�17px;� �
        
            }� �
        
            </style>�

And that's all! Clicking the button (which looks like a menu item) will trigger its Command event.

JAWS reader compatibility

By default JAWS reader will not read all menu items rendered by RadMenu. This is so because invisible items are inside an element whose display CSS attribute is set to none (for performance and cross browser reasons). However with some CSS (do you recognize the pattern :) ) you can make the items hidden by setting the left CSS attribute:

    
            <style�type="text/css"> �
        
            ��������div.RadMenu�.rmSlide,� �
        
            ��������div.RadMenu�.rmSlide�.rmGroup� �
        
            ��������{���� �
        
            ������������display:�block�!important;� �
        
            ������������left:�-999px;� �
        
            ��������} �
        
            </style>�

In Interent Explorer JAWS will also tell us that there are some frames. These are the IFRAMEs generated by RadMenu required to properly overlay windowed HTML elements (such as dropdownlists). If you don't have any dropdownlists which RadMenu should overlay you can use the following CSS to hide those IFRAMEs from JAWS:

    
            div.RadMenu�.rmSlide�iframe� �
        
            {� �
        
            ����display:none;��� �
        
            }�

I hope this helps. And don't forget to enable JavaScript back after finished testing :)

[Download]

RadTreeView for ASP.NET Ajax - Binding to LinqDataSource

Atanas Korchev — Wed, 01 Oct 2008 04:26:01 GMT

Since the Q2 2008 SP1 release RadTreeView, RadMenu, RadPanelBar and RadTabStrip support hierarchical databinding to the LinqDataSource control. In this blog post I will demonstrate how to do this with RadTreeView (the steps are identical for the aforementioned controls).

Create a new Web Site in Visual Studio 2008 and copy the Nortwind database in your App_Data folder
Add a new "Linq to SQL classes" item named "Northwind.dbml"
Open "Northwind.dbml" in design mode and drag the Employees table from Server Explorer. The Employees table is self referencing and suites perfectly for this example
Open Default.aspx in design mode and drag a new RadTreeView instance.
Open the smart tag and select "New data source":
Choose "LinqDataSource" from the "Data Source Configuration Wizard":
Configure the newly created datasource to use the NorhtwindDataContext object:
Select the "EmployeeID", "LastName" and "ReportsTo" columns from the "Configure Data Source" dialog:
Click "Finish" and open the RadTreeView smart tag to complete the configuration
Select "EmployeeID" for the DataFieldID property, "ReportsTo" for the DataFieldParentID property and "LastName" for the DataTextField property:
Save your page and run the web site. You should see the following page:

[Download]

RadTreeView for ASP.NET Ajax - Optimizing Load On Demand performance

Atanas Korchev — Wed, 24 Sep 2008 09:54:08 GMT

In a previous blog post I mentioned that you should use WebService load on demand in order to squeeze the most performance from RadTreeView. In this post I will show a few other tricks which can be used to improve the loading time even further. All techniques are optional and can be used independently.

We start with a simple page containing only a single RadTreeView control with one root node. The testing environment is:

Visual Studio 2008 SP1
Intel Core 2 Duo E6550 @ 2.33GHz.
IIS7 web site
Internet Explorer 7
Latest internal build of Telerik.Web.UI.dll (which will go live with the Q3 2008 release)

Here is the test page:

    
            <telerik:RadScriptManager runat="server" ID="RadScriptManager1" /> 
        
            <script type="text/javascript"> 
        
            var start; 
        
            function nodePopulating() 
        
            { 
        
                start = new Date(); 
        
            } 
        
            function nodePopulated() 
        
            { 
        
                var end = new Date(); 
        
                document.title = end - start; 
        
            } 
        
            </script> 
        
            <telerik:RadTreeView runat="server" ID="RadTreeView1" 
        
                OnClientNodePopulating="nodePopulating" 
        
                OnClientNodePopulated="nodePopulated" 
        
                Height="300px" 
        
                Width="300px"> 
        
                <WebServiceSettings Method="GetNodes" Path="WebService.asmx"  /> 
        
                <Nodes> 
        
                    <telerik:RadTreeNode Text="Expand" ExpandMode="WebService"> 
        
                    </telerik:RadTreeNode> 
        
                </Nodes> 
        
            </telerik:RadTreeView>

The code in nodePopulating and nodePopulated is used to measure the actual time required to load 1000 nodes from web service.

Here is how the web service method looks like:

    
            [WebMethod] 
        
            public IEnumerable<RadTreeNodeData> GetNodes() 
        
            { 
        
                for (int i = 0; i < 1000; i++) 
        
                { 
        
                    RadTreeNodeData data = new RadTreeNodeData(); 
        
                    data.Text = "Node " + i; 
        
                    yield return data; 
        
                } 
        
            }

Running this page will show an alert - "Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property". That's because the JSON output of 1000 RadTreeNodeData objects is too large. As a workaround let's add this in the web.config to increase the maxJsonLength property:

    
            <system.web.extensions> 
        
              <scripting> 
        
                <webServices> 
        
                  <jsonSerialization maxJsonLength="500000"> 
        
                  </jsonSerialization> 
        
                </webServices> 
        
              </scripting> 
        
            </system.web.extensions>

Now the page runs fine. Expanding the node takes about 3500ms

Let's see if we can do anything to improve that time.

Use a custom class instead of RadTreeNodeData

The first thing to try is use a custom class to serialize less output than RadTreeNodeData. Here is what I mean:

    
            [WebMethod] 
        
            public IEnumerable GetNodes() 
        
            { 
        
                for (int i = 0; i < 1000; i++) 
        
                { 
        
                    NodeData data = new NodeData(); 
        
                    data.Text = "Node " + i; 
        
                    yield return data; 
        
                } 
        
            } 
        
            class NodeData 
        
            { 
        
                public string Text { get; set; } 
        
            }

This dramatically decreases total size of JSON which goes back to the client browser. It also improves the time to load 1000 nodes to about 3000ms:

Do not persist nodes loaded on demand

Setting the PersistLoadOnDemandNodes property to false would also improve performance. However the nodes loaded on demand won't be able to fire server-side events (NodeClick, NodeDrop etc). There are workarounds still - using RadAjaxManager to simulate postbacks. Disabling node persistence cuts of the loading time almost in half - to about 1700ms:

Make sure ASP.NET Ajax scripts are not in debug mode

Either set <compilation debug="false"> in your web.config our set the ScriptMode property of the ScriptManager to "Release". This is a general performance tip when working with RadControls for ASP.NET Ajax. Always deploy your web sites with <compilation debug="false">. In this case the load time got to about 1400ms:

Line images affect performance

By using a skin with no line images (e.g. "Vista") or setting the ShowLineImages property to "False" you can improve the loading time even more - now it takes 756ms to load 1000 nodes!

Now let's try in the other browsers.

FireFox 3.0 - 230ms	Google Chrome 0.2.149.30 - 229ms	Opera 9.5 - 238ms

Don't store ASP.NET controls in Session, Application or Cache

Atanas Korchev — Fri, 19 Sep 2008 07:36:23 GMT

In some cases you may end up with the following exception when working with RadControls for ASP.NET Ajax:

"Script controls may not be registered after PreRender."

The explanation of this error is simple - some UI control implementing the IScriptControl interface (e.g. any control from the RadControls for ASP.NET Ajax suite) is stored in the Session, Application or Cache and then is added in some live controls collection. Here is an example:

    
            <%@ Page Language="C#" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <script runat="server"> 
        
                protected void Page_Load(object sender, EventArgs e) 
        
                { 
        
                    Timer timer = (Timer)Session["Timer"]; 
        
                    if (timer == null) 
        
                    { 
        
                        timer = new Timer { ID = "Timer1" }; 
        
                        Session["Timer"] = timer; 
        
                    } 
        
                    PlaceHolder1.Controls.Add(timer); 
        
                    Response.Write(timer.Page == this); 
        
                } 
        
            </script> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
                <title>Caching issues</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                    <asp:ScriptManager runat="server" ID="ScriptManager1" /> 
        
                    <asp:PlaceHolder runat="server" ID="PlaceHolder1" /> 
        
                    <asp:Button Text="Postback" ID="Button1" runat="server" /> 
        
                </form> 
        
            </body> 
        
            </html>

Here a Timer control is stored in session state thus avoiding its creation on every page load. Sounds quite reasonable, doesn't it? Unfortunately not. If you load this page and then press the "Postback" button you will end up with the yellow screen of death saying that "Script controls may not be registered after PreRender". But why? The answer is simple - caching. The Timer control (as well as most IScriptControls) caches a reference to the current ScriptManager (current means "from the current Page"). Here is how:

    
            internal ScriptManager ScriptManager 
        
            { 
        
                get 
        
                { 
        
                    if (this._scriptManager == null) 
        
                    { 
        
                        Page page = this.Page; 
        
                        this._scriptManager = ScriptManager.GetCurrent(page); 
        
                    } 
        
                    return this._scriptManager; 
        
                } 
        
            }

During the first load of the sample page everything is fine. The ScriptManager property is properly initialized and the page runs happily. After postback the Timer control is pulled out from session state. As caching is implemented the _scriptManager field will not be null and the Timer control will try to register with an old ScriptManager. However the life cycle of the page object, to which that "old" ScriptManager belonged, has been executed during the previous request(including the PreRender event). When the Timer control tries to register with the ScriptManager we end up with the exception that the PreRender method has already been executed - and it really was during the first request to the page.

Although this exception is specific to ASP.NET Ajax enabled controls you should avoid caching *any* ASP.NET controls at all costs. Tess Ferrandez from Microsoft has a series of blog posts telling why storing UI controls is not a good idea:

http://blogs.msdn.com/tess/archive/2008/05/28/asp-net-memory-thou-shalt-not-store-ui-objects-in-cache-or-session-scope.aspx

http://blogs.msdn.com/tess/archive/2006/01/23/net-memory-leak-case-study-the-event-handlers-that-made-the-memory-baloon.aspx

http://blogs.msdn.com/tess/archive/2008/09/12/asp-net-memory-issues-high-memory-usage-with-ajaxpro.aspx

But if this is not a proper way of caching ASP.NET UI controls what is? Cache the data used to populate the control instead. Or use output caching.

I hope this helps,

Atanas

Internet Explorer JavaScript Performance Tip - use the "children" property

Atanas Korchev — Thu, 14 Aug 2008 09:03:37 GMT

Today I was profiling the initialization time of RadTreeView for ASP.NET Ajax and found out that the biggest bottleneck was traversing the DOM tree. The code looks something like this:

    
            //get_childListElement() returns an HTML element 
        
            var childNodes = parent.get_childListElement().childNodes; 
        
            for (var i = 0, length = childNodes.length; i < length; i++) 
        
            { 
        
                 var childNode = childNodes[i]; 
        
                 //Perform additional initialization 
        
            }

I tested with 10000 elements and in IE7 I got about 25000ms whilst in FireFox the total time was around 33ms (Core 2 Duo @ 2.33GHz). Quite a difference if you ask me.

I thought that there may be some IE specific method/property which could perform better and I dug into MSDN. And a few minutes later I found the children property!!! Apparently the children collection contains only HTML elements (whilst childNodes is full of TextNode elements). I changed the code like this:

    
            //get_childListElement() returns an HTML element 
        
            var childNodes = parent.get_childListElement().children; 
        
            for (var i = 0, length = childNodes.length; i < length; i++) 
        
            { 
        
                var childNode = childNodes[i]; 
        
                //Perform additional initialization 
        
            }

Lo and behold the total traverse time went down to around 30ms in IE7 !!! This is what I call a performance boost :)

To make it cross-browser friendly I ended up with this:

    
            var childList = parent.get_childListElement(); 
        
            var childNodes = childList.children || childList.childNodes;

The bottom line is that you can expect some serious performance improvements in treeviews with lots of nodes. For example the initialization time of a fully expanded treeview with 10000 (10x10x10x10) nodes improved by 30% (3152ms vs. 2249ms). However if the total number of nodes per level is greater e.g. 10x1000 the performance boost is even bigger - 5590ms vs. 1851ms which is 66%.

I have attached a sample page with tests using unordered list with 10000 list items.

Source

Yet another update of RadControls for ASP.NET Ajax DynamicData support

Atanas Korchev — Wed, 13 Aug 2008 10:22:10 GMT

ASP.NET Dynamic Data has just gone official with the SP1 release of Visual Studio 2008 and .NET 3.5. We have just released updated version of our Dynamic Data bits which is tested against the official release and has few minor improvements (such as implementation of the DataControl property). Get it from here.