Telerik RadAjaxManager loads controls slow the first time

[Nicholas]

So I have a RadPanelBar, and within that a RadTreeView. On a node click event I want so update some control.. for now I am just trying to update a textbox. It works fine except that the first time I click on a child node it takes a very long time to update the control.. Just a simple text change. I set a break point in my function and I noticed that it is taking long to fire the OnNodeClick event.. If I click a parent node in the tree view it loads fine on the first click. Also, after the first time I've clicked it.. it loads quickly.. If I refresh the page, it is slow on the first click again.. Is there something I am missing.. Is the structure of my HTML inappropriate for these AJAX calls? I feel like this is a really simple example that should work..

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 
<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server"> 
    <AjaxSettings> 
        <telerik:AjaxSetting AjaxControlID="IncidentReportPanel"> 
            <UpdatedControls> 
                <telerik:AjaxUpdatedControl ControlID="IRViewPanel" LoadingPanelID="LoadingPanel1" /> 
            </UpdatedControls> 
        </telerik:AjaxSetting> 
    </AjaxSettings> 
</telerik:RadAjaxManagerProxy> 
<telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Style="width: 320px; 
    padding-top: 125px;" Skin="Vista"> 
</telerik:RadAjaxLoadingPanel> 
<table width="100%"> 
    <tr style="height: 25px"> 
        <td> 
        </td> 
        <td> 
        </td> 
    </tr> 
    <tr style="height: 100%"> 
        <td style="width: 250px"> 
            <telerik:RadPanelBar ID="IncidentReportPanel" runat="server" Height="450px" CssClass="IRPanel"> 
                <Items> 
                    <telerik:RadPanelItem runat="server" Text="Incident Reports" ImageUrl="./Images/folder.gif" 
                        Value="IncidentReports"> 
                        <Items> 
                            <telerik:RadPanelItem> 
                                <ItemTemplate> 
                                    <telerik:RadTreeView ID="IncidentReportsTreeView" runat="server" OnNodeExpand="LoadTreeNodes" 
                                        OnNodeClick="PopulateIRData"> 
                                        <Nodes> 
                                            <telerik:RadTreeNode Text="Pending" ExpandMode="ServerSideCallBack" ImageUrl="./Images/completed.gif"> 
                                            </telerik:RadTreeNode> 
                                            <telerik:RadTreeNode Text="Completed" ExpandMode="ServerSideCallBack" ImageUrl="./Images/completed.gif"> 
                                            </telerik:RadTreeNode> 
                                        </Nodes> 
                                    </telerik:RadTreeView> 
                                </ItemTemplate> 
                            </telerik:RadPanelItem> 
                        </Items> 
                    </telerik:RadPanelItem> 
                    <telerik:RadPanelItem runat="server" Text="Calendar" ImageUrl="./Images/calendar.gif" 
                        Value="Calendar"> 
                        <Items> 
                            <telerik:RadPanelItem> 
                                <ItemTemplate> 
                                    <telerik:RadCalendar runat="server" ID="IRCalendar" Width="100%" /> 
                                </ItemTemplate> 
                            </telerik:RadPanelItem> 
                        </Items> 
                    </telerik:RadPanelItem> 
                </Items> 
            </telerik:RadPanelBar> 
        </td> 
        <td> 
            <asp:Panel ID="IRViewPanel" runat="server"> 
                <telerik:RadTextBox ID="RadText" runat="server"> 
                </telerik:RadTextBox> 
            </asp:Panel> 
        </td> 
    </tr> 
</table> 

 

        protected void PopulateIRData(object sender, RadTreeNodeEventArgs e) 
    { 
        RadText.Text = "Hello, World!"; 
    } 

[Nicholas]

Does any one have any inclinations as to what I am doing wrong? I would really appreciate any feedback. Thanks!

[Cori]

Hello Nicholas,

This documentation link should be of use:

http://www.telerik.com/help/aspnet-ajax/ajax-client-side-performance.html

SInce your performing ajax requests to content contained inside of a table.

I hope that helps.

[Nicholas]

Hi Cori,
Thank you for your response. I followed the article's advice, and I changed all my widths to be fixed pixels instead of percentages.. I set the table-layout attribute to fixed for all my tables and I already had the EnablePageHeadUpdate attribute of my RadAjaxManager to false.
Since I am only updating one control.. I assume that there should only be one DOM update triggered right? Unfortunately, I still have the same response time on the first OnNodeClick event. Everytime I refresh the page, the first click seems to hang.. (and by hang I mean time taken until my breakpoint is hit in my event handler). All successive OnNodeClick events get handled immediately..
Does my table structure explain this behavior of only the first click being slow?
Any other help that you can provide for me would be greatly appreciated.

[Nicholas]

Is this issue somehow related to the fact that I am using a RadTreeView in a RadPanel? Are there special considerations I should take when using the AJAX manager from nested controls like this? Because it takes long to hit my event handler... and then shortly after that it updates.. I am assuming the DOM update is triggered after the event handler is fired.. (Please correct me if I am wrong).. So it seems to be a delay with calling controls, no?

[Nicholas]

I even removed all the tables from my website.. and all the relative widths... i used css positioning instead for my entire site.. and I still get the same behavior..

[Nicholas]

So I removed the AJAX from my treeview and I have it working with a postback.. my breakpoints still take long to get hit.. so it seems that having the treeview nested in the panel bar is causing a delay in the event getting fired.. can anyone provide some more insight as to what is happening?

[Tsvetina]

Hello Nicholas,

I cannot see in your mark-up an obvious reason for the slowness. Is there any server-side code related to the TreeView loading? Have you tested how the TreeView behaves as a standalone control, outside of any containers?

Regards,
Tsvetina
the Telerik team

[Nicholas]

Hi Tsvetina,
Thank you for your repoonse. I removed the treeview from any container and I get the same delay.
 
I even changed everything to use client side code and webservices and now on the node expand for parent nodes it seems to work ok, but if my webservice returns children nodes with the ExpandMode value set to Webservice.. then when I try to expand those child nodes or even handle a on nodeclickevent, I get the same 30 second delay that I was getting earlier..

This is becoming very frustating.. I look forward to your response. Thanks again.

[Tsvetina]

Hello Nicholas,

I would advise you to submit a support ticket for the TreeView control itself and send there the code you use for declaring and populating the RadTreeView control. This way you will get faster and more specific suggestions for copying with the slow performance.

Regards,
Tsvetina
the Telerik team