Suggestion to improve performance of ajax on older client?

[Mark Blom]

Hi,

I am building an web application that will be used on several types of clients amongst which some pentium 4 2ghz with 256 mb internal memory (win xp pro, IE 6).

One of the web pages uses Telerik's AJAX controls for dis/enabling and populating controls based on selected values of other Telerik comboboxes. These controls are nested in a table with about 15 rows and 4 columns per row. There 14 controls on the page in total (all RadTextBox, RadMaskedTextBox, RadComboBox for ASP.NET Ajax (version 2008.1.619).

This page is extremely slow on the older clients. It sometimes takes more than 30 sec to update the page after a control has been changed by the user. The loadingpanel is shown and shows the spinning but after some seconds the wheel stops turning and nothing seems to happen. Finally, the loadingpanel disappears and the page update is complete.

I have tried two setups:
1. RadAjaxManager with one RadAjaxPanel around the complete table. The RadAjaxManager has one AjaxSetting to have the RadAjaxPanel update itself

    <telerik:RadAjaxManager ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1" runat="server" >
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
       </AjaxSettings>
    </telerik:RadAjaxManager>

2. RadAjaxManager with several individual AjaxSettings to have the controls update certain other controls and no RadAjaxPanel:

 <telerik:RadAjaxManager ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1" runat="server" ClientEvents-OnRequestStart="OnRequestStart" ClientEvents-OnResponseEnd="OnResponseEnd">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="cboType">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="txtPart" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="cboComplete">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="cboResult" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="btnAdd">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="lblPart" />
                    <telerik:AjaxUpdatedControl ControlID="lblPartHidden" />
                    <telerik:AjaxUpdatedControl ControlID="txtPart" />
                    <telerik:AjaxUpdatedControl ControlID="btnDelete" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="cboRepeater">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="cboRepeaterReason" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="cboSparePlaced">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="cboSparePlacedCode" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="cboSparePickedup">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="cboSparePickedupCode" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="btnSave">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="lblOrdernumberError" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

The second approach seems a bit faster than the first but still the page takes a long time to load.

Anyone any suggestions on the best approach in this situation and perhaps some background information why the second setup is a bit faster than the first?

Regards,

Mark

 

[Sebastian]

Hi Mark,

The granularity of the ajax settings gives you faster performance since you refresh a particular set of controls certain action occurs (button click or some control change for example) instead of the entire panel as you did in the first manager configuration. That is why the loading time in the second case is reduces to some extent.

Other useful tips about how to optimize the overall performance of RadControls for ASP.NET AJAX you can find in the following online resources:

http://www.telerik.com/products/aspnet-ajax/top-performance.aspx
http://www.telerik.com/community/forums/thread/b311D-bedaaa.aspx (the post from my colleague Ivo)

I hope that you will find them helpful.

Best regards,
Stephen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Mark Blom]

Hi Stephen,

Thanks for the reply! I will have a look at the suggested reading material.

Regards,

Mark