We have a MasterPage with multiple RadSplitter which should resize with window. Here is the code:
<body style="margin: 0px; height: 100%; overflow: hidden;" scroll="no"> <form id="form1" runat="server" style="height: 100%; margin: 0px" method="post"> <telerik:RadScriptManager runat="server" ID="ScriptManager" ScriptMode="Release"> </telerik:RadScriptManager> <telerik:RadStyleSheetManager runat="server" ID="StyleSheetManager"> </telerik:RadStyleSheetManager> <asp:Panel ID="panel1" runat="server" Width="100%" Height="100%" SkinID="Windows7"> <telerik:RadSplitter LiveResize="false" ID="RadSplitter1" runat="server" Height="100%" Width="100%" Orientation="Horizontal" VisibleDuringInit="false"> <telerik:RadPane ID="RadPane3" runat="server" Height="50px" Scrolling="none"> <hd:Header runat="server" ID="header" /> </telerik:RadPane> <telerik:RadPane ID="RadPane4" runat="server"> <telerik:RadSplitter LiveResize="false" ID="ContentSplitter" runat="server"> <telerik:RadPane ID="paneMenu" runat="server" Width="220"> <telerik:RadSplitter LiveResize="false" runat="server" ID="NavigationsSplitter" Orientation="Horizontal"> <telerik:RadPane ID="RadPane1" runat="server" Scrolling="None" Height="26"> <telerik:RadTextBox ID="RadTextBox4" runat="server" Width="50" /> <telerik:RadButton runat="server" ID="btnNeu" Text="Filtern" CausesValidation="false"> <Icon PrimaryIconCssClass="rbSearch" /> </telerik:RadButton> </telerik:RadPane> <telerik:RadPane runat="server" ID="TreeViewPane"> <ob:Objektbaum runat="server" ID="objektbaum" /> </telerik:RadPane> </telerik:RadSplitter> </telerik:RadPane> <telerik:RadSplitBar ID="RadSplitBar1" runat="server" /> <telerik:RadPane ID="paneInhalt" runat="server" Scrolling="None"> <telerik:RadSplitter LiveResize="false" runat="server"> <telerik:RadPane runat="server" Scrolling="None"> <div class="breadcrumb_header"> <asp:ContentPlaceHolder runat="server" ID="cpHeaderControls" /> <bc:Breadcrumb runat="server" ID="breadcrumb" /> </div> <telerik:RadSplitter LiveResize="false" runat="server"> <telerik:RadPane runat="server" Scrolling="None"> <telerik:RadSplitter LiveResize="false" runat="server" ID="srechts" Orientation="Horizontal"> <telerik:RadPane ID="RadPane2" runat="server"> <div id="content" class="div_content"> <asp:ContentPlaceHolder ID="cphHauptInhalt" runat="server"> </asp:ContentPlaceHolder> </div> </telerik:RadPane> <telerik:RadSplitBar runat="server" /> <telerik:RadPane ID="paneErrorManagement" runat="server" Height="60" Scrolling="None"> <cc1:EventViewer ID="EventViewer1" runat="server" EventClassPopupLevel="Error" VisualizeAllEventClassesThreshold="Success"> </cc1:EventViewer> </telerik:RadPane> </telerik:RadSplitter> </telerik:RadPane> </telerik:RadSplitter> </telerik:RadPane> <telerik:RadSplitBar ID="KontextSplitter" runat="server" Width="25" /> <telerik:RadPane runat="server" Width="25" Height="25" PersistScrollPosition="true"> <telerik:RadSlidingZone runat="server" ID="szrechts" Width="0" SlideDirection="Left"> <telerik:RadSlidingPane runat="server" ID="sprechts" Width="200" PersistScrollPosition="true" Height="25" IconUrl="~/images/navigation/ico_kontext.png" Scrolling="None"> <ko:Kontext runat="server" ID="kontext" /> </telerik:RadSlidingPane> </telerik:RadSlidingZone> </telerik:RadPane> </telerik:RadSplitter> </telerik:RadPane> </telerik:RadSplitter> </telerik:RadPane> </telerik:RadSplitter> </asp:Panel> </form> </body>The performance with only static content for this page is excellent.
Now we place a RadGrid in main Content (cphHauptInhalt).
<asp:Content ID="Content2" ContentPlaceHolderID="cphHauptInhalt" runat="server"> <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="rgResult"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="rgResult" LoadingPanelID="RadAjaxLoadingPanel1" /> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> </telerik:RadAjaxManager> <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" /> <telerik:RadGrid ID="rgResult" OnNeedDataSource="getDataSource" runat="server" AllowSorting="True"> <PagerStyle Mode="NumericPages" /> <MasterTableView TableLayout="Fixed" /> </telerik:RadGrid> </asp:Content>The performance is now very very bad!
If the grid has only 100 items, it take about 4s to load, with 300 items it takes about 7s and with 700 items it takes 12s. Most of the time (round about 85%) the client works in javascript functions and the cpu is blocked with 100% load. Also if the mouse moves or the client window is resized.
I think, the performance is down because of the large DOM-Tree.
Is there a trick or anything to stop javascript calculating the whole DOM? Or is there another reason why it is so slow?
5 Answers, 1 is accepted
Please, find attached the sample setup page that I am using to test your case. It is a stripped down version of the code that you provided(the web user controls and the ContentPlaceholder declarations have been removed).
Using this setup I wasn't able to reproduce the difficulties you are reporting. Nevertheless the data source that I am using is pretty simplistic - only integers. Still the row count is 250, which should be enough to be able to reproduce the issue.
Please, run the page on you end and let me know of the outcome.
Best wishes,
Nikodim
the Telerik team
Rank 1
But when I bind my DataSource (664 items) to the grid even this page takes 10s to load. The DataSource contains only strings and integers.
Do you have any idea why?? Is there a method to test, which function takes so much time?
Rank 1
So i installed firebug.
The Summary says:
Function Calls Percent Own Time Time Avg. Min. Max.
_isVisible 42 50.43% 3836.995ms 3837.138ms 91.36ms 0.017ms 771.479ms getCurrentStyle 14 1 33.18% 2524.57ms 2524.57ms 17.905ms 0.042ms 818.692ms repaint 3 13.55% 1031.197ms 1031.207ms 343.736ms 0.033ms 1030.416ms
I think this three functions are the performance killers. Maybe because of this, you could give me a hint, how to solve this problem.
For your scenario I would recommend that you take advantage of the Virtual Scrolling and Paging functionality.
Please note that even if you manage to optimize the loading times to a given extent, this will be a partial solution. The problem is that some users use slower computers and older browsers - they would still need a lot of time to display the page.
Useful resources:
Top Performance
Optimizing output, page load time and the overall performance of RadControls for ASP.NET AJAX
Best regards,
Daniel
the Telerik team
Rank 1
Hi,
I am having problems with the thirds radgrid in my page. Please take a look at the picture. I tried to mimic the rest of the two radgrid structures which are perfect. Please help.
ASPX:
<telerik:RadSplitter ID="Splitter1" runat="server" Orientation="Vertical" Width="100%" >
<telerik:RadPane ID="RadPane1" runat="server">
<telerik:RadDockZone ID="RadDockZone2" runat="server" BorderStyle="None" Skin="Black" >
<telerik:RadDock ID="RadDock2" runat="server" DefaultCommands="ExpandCollapse" DockMode="Docked" EnableDrag="False" EnableRoundedCorners="True" Pinned="True" Resizable="True" Skin="Black" Title="SID DETAIL INFORMATION" Width="100%" BorderColor="Black" style="background-color: #000000">
<ContentTemplate>
<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="" AutoGenerateColumns="false" AllowSorting="TRUE" Skin="Black" ShowFooter="True" Width="100%" Height="100%" OnNeedDataSource="RadGrid1_NeedDataSource">
<MasterTableView DataKeyNames= "SID_SYS_ID, SID_PART, STD_QTY, QTY_EXP, QTY_ALOC, CONTAINER, NISSAN_RAN" CommandItemDisplay="Bottom">
<CommandItemTemplate>
<div style="padding: 5px 5px;">
<asp:LinkButton ID="LinkButton2" runat="server" CommandName="RESET" Visible='<%# Not RadGrid1.MasterTableView.IsItemInserted%>'>
<img style="border:0px;vertical-align:middle;" alt="" src="images/ResetQtyAllocated.png"/> </asp:LinkButton>
</div>
</CommandItemTemplate>
<EditFormSettings>
<EditColumn CancelImageUrl="Cancel.gif" EditImageUrl="Edit.gif" InsertImageUrl="Update.gif" UpdateImageUrl="Update.gif" ButtonType="PushButton" >
</EditColumn>
</EditFormSettings>
<Columns>
<%--<telerik:GridEDITCOMMANDColumn ButtonType="ImageButton" CommandName="EDIT" HeaderText="EDIT" ImageUrl="images/EDIT2.gif" UniqueName="EDIT">
<HeaderStyle ForeColor="WHITE" HorizontalAlign="left" Width="10px" />
<ItemStyle Width="20px" />
</telerik:GridEDITCOMMANDColumn>--%>
<telerik:GridEditCommandColumn FilterControlAltText="Filter EditCommandColumn column" UniqueName="EDIT" ButtonType="ImageButton" HeaderText="EDIT" EditImageUrl="images/EDIT2.gif">
<HeaderStyle ForeColor="WHITE" HorizontalAlign="left" Width="10px" />
<ItemStyle />
</telerik:GridEditCommandColumn>
<%--<telerik:GridTemplateColumn UniqueName="DELETE" HeaderText="DELETE" Visible="TRUE" >
<ItemTemplate>
<asp:imageButton ButtonType="ImageButton" ID="btnDelete" runat="server" CommandName="DELETE" ImageUrl="images/delete2.gif" OnClientClick="return confirm('Are you certain you want to DELETE this PART?');"
Text="Delete" />
</ItemTemplate>
<HeaderStyle ForeColor="WHITE" HorizontalAlign="left" Width="70px" />
<ItemStyle Width="20px" />
</telerik:GridTemplateColumn>--%>
<telerik:GridTemplateColumn UniqueName="SID_PART" DataField="SID_PART" HeaderText="PART NUM" Visible="TRUE" >
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem, "SID_PART")%>
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="txtPartNum" Text='<%# Bind("SID_PART")%>' runat="server" ></asp:Label>
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="STD_QTY" DataField="STD_QTY" HeaderText="STD QTY" Visible="TRUE">
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem, "STD_QTY")%>
</ItemTemplate>
<EditItemTemplate>
<asp:label ID="txtStdQty" Text='<%# Bind("STD_QTY")%>' runat="server" ></asp:label>
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="QTY_EXP" DataField="QTY_EXP" HeaderText="QTY EXP" Visible="TRUE" Aggregate="Sum" >
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem, "QTY_EXP")%>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtQtyExp" Text='<%# Bind("QTY_EXP")%>' BackColor ="White" ForeColor="Black" runat="server"></asp:TextBox>
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="QTY_ALOC" DataField="QTY_ALOC" HeaderText="QTY ALOC" Visible="TRUE">
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem, "QTY_ALOC")%>
</ItemTemplate>
<EditItemTemplate>
<asp:label ID="txtQtyAloc" Text='<%# Bind("QTY_ALOC")%>' runat="server" ></asp:label>
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="NISSAN_RAN" DataField="NISSAN_RAN" HeaderText="NISSAN RAN/LOT" Visible="TRUE">
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem, "NISSAN_RAN")%>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtNissanRan" Text='<%# Bind("NISSAN_RAN")%>' BackColor ="White" ForeColor="Black" runat="server"></asp:TextBox>
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="CONTAINER" DataField="CONTAINER" HeaderText="CONTAINER" Visible="TRUE" >
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem, "CONTAINER")%>
</ItemTemplate>
<HEADERStyle Width="100px"/>
<EditItemTemplate>
<asp:Label ID="txtContainer" Text='<%# Bind("CONTAINER")%>' runat="server" ></asp:Label>
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="SID_SYS_ID" DefaultInsertValue=""
HeaderText="SYS ID" ReadOnly="true" SortExpression="SID_SYS_ID" UniqueName="SID_SYS_ID" Visible="false">
<HeaderStyle Font-Size="8pt" Width="10px" />
<ItemStyle Font-Size="10pt" ForeColor="WHITE" HorizontalAlign="LEFT" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="TOTAL_QTY" DefaultInsertValue=""
HeaderText="TOTAL_QTY" ReadOnly="true" SortExpression="TOTAL_QTY" UniqueName="TOTAL_QTY" Visible="false">
<HeaderStyle Font-Size="8pt" Width="10px" />
<ItemStyle Font-Size="10pt" ForeColor="WHITE" HorizontalAlign="LEFT" />
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</ContentTemplate>
</telerik:RadDock>
</telerik:RadDockZone>
</telerik:RadPane>
<telerik:RadPane ID="RadPane2" runat="server">
<telerik:RadDockZone ID="RadDockZone3" runat="server" BorderStyle="None" Skin="Black" >
<telerik:RadDock ID="RadDock3" runat="server" DefaultCommands="ExpandCollapse" DockMode="Docked" EnableDrag="False" EnableRoundedCorners="True" Pinned="True" Resizable="True" Skin="Black" Title="LOAD DETAIL INFORMATION" Width="100%" BorderColor="Black" style="background-color: #000000">
<ContentTemplate>
<telerik:RadGrid ID="RadGrid2" runat="server" DataSourceID="" AutoGenerateColumns="false" AllowSorting="TRUE" Skin="Black" ShowFooter="True" Height="100%" OnNeedDataSource="RadGrid2_NeedDataSource">
<MasterTableView DataKeyNames= "LOAD_ID, LOAD_PART, TOTAL_QTY, LOAD_SYS_ID, QTY_EXP, SID_SYS_ID" >
<EditFormSettings>
<EditColumn CancelImageUrl="Cancel.gif" EditImageUrl="Edit.gif" InsertImageUrl="Update.gif" UpdateImageUrl="Update.gif" ButtonType="PushButton" >
</EditColumn>
</EditFormSettings>
<Columns>
<telerik:GridEditCommandColumn FilterControlAltText="Filter EditCommandColumn column" UniqueName="EDIT" ButtonType="ImageButton" HeaderText="EDIT" EditImageUrl="images/EDIT2.gif">
<HeaderStyle ForeColor="WHITE" HorizontalAlign="left" Width="10px" />
<ItemStyle />
</telerik:GridEditCommandColumn>
<%--<telerik:GridTemplateColumn UniqueName="DELETE" HeaderText="DELETE" Visible="TRUE" >
<ItemTemplate>
<asp:imageButton ButtonType="ImageButton" ID="btnDelete" runat="server" CommandName="DELETE" ImageUrl="images/delete2.gif" Text="Delete" OnClientClick="return confirm('Are you certain you want to DELETE this PART?');"/>
</ItemTemplate>
<HeaderStyle ForeColor="WHITE" HorizontalAlign="left" Width="70px" />
<ItemStyle Width="20px" />
</telerik:GridTemplateColumn>--%>
<telerik:GridTemplateColumn UniqueName="LOAD_ID" DataField="LOAD_ID" HeaderText="LOAD ID" Visible="TRUE" >
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem, "LOAD_ID")%>
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="txtLoadID" Text='<%# Bind("LOAD_ID")%>' runat="server" MaxLength="10" ></asp:Label>
</EditItemTemplate>
<HeaderStyle Width="20px" />
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="LOAD_PART" DataField="LOAD_PART" HeaderText="PART NUM" Visible="TRUE" >
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem, "LOAD_PART")%>
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="txtPartNum" Text='<%# Bind("LOAD_PART")%>' runat="server" MaxLength="10" ></asp:Label>
</EditItemTemplate>
<HeaderStyle Width="20px" />
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="TOTAL_QTY" DataField="TOTAL_QTY" HeaderText="TOTAL QTY" Visible="TRUE" Aggregate="Sum" >
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem, "TOTAL_QTY")%>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtTotalQty" Text='<%# Bind("TOTAL_QTY")%>' BackColor ="White" ForeColor="Black" runat="server"></asp:TextBox>
</EditItemTemplate>
<HeaderStyle Width="100px" />
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="LOAD_SYS_ID" HeaderText="LOAD_SYS_ID" ReadOnly="true" SortExpression="LOAD_SYS_ID" UniqueName="LOAD_SYS_ID" Visible="false">
<HeaderStyle Font-Size="8pt" Width="10px" />
<ItemStyle Font-Size="10pt" ForeColor="WHITE" HorizontalAlign="LEFT" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="QTY_EXP" DefaultInsertValue=""
HeaderText="QTY_EXP" ReadOnly="true" SortExpression="QTY_EXP" UniqueName="QTY_EXP" Visible="false">
<HeaderStyle Font-Size="8pt" Width="10px" />
<ItemStyle Font-Size="10pt" ForeColor="WHITE" HorizontalAlign="LEFT" />
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</ContentTemplate>
</telerik:RadDock>
</telerik:RadDockZone>
</telerik:RadPane>
<telerik:RadPane ID="RadPane3" runat="server">
<telerik:RadDockZone ID="RadDockZone4" runat="server" BorderStyle="None" Skin="Black" >
<telerik:RadDock ID="RadDock4" runat="server" DefaultCommands="ExpandCollapse" DockMode="Docked" EnableDrag="False" EnableRoundedCorners="True" Pinned="True" Resizable="True" Skin="Black" Title="UNASSOCIATED PARTS INFORMATION" Width="100%" BorderColor="Black" style="background-color: #000000">
<ContentTemplate>
<telerik:RadGrid ID="rgParts" runat="server" DataSourceID="" AutoGenerateColumns="false" AllowSorting="TRUE" Skin="Black" ShowFooter="True" Width="100%" Height="100%" >
<MasterTableView DataKeyNames= "" CommandItemDisplay="Bottom">
<CommandItemTemplate>
<div style="padding: 5px 5px;">
<asp:LinkButton ID="LinkButton2" runat="server" CommandName="RESET" Visible='<%# Not rgParts.MasterTableView.IsItemInserted%>'>
<img style="border:0px;vertical-align:middle;" alt="" src="images/UnassociatedParts.png"/> </asp:LinkButton>
</div>
</CommandItemTemplate>
<EditFormSettings>
<EditColumn CancelImageUrl="Cancel.gif" EditImageUrl="Edit.gif" InsertImageUrl="Update.gif" UpdateImageUrl="Update.gif" ButtonType="PushButton" >
</EditColumn>
</EditFormSettings>
<Columns>
<telerik:GridBoundColumn DataField="LOAD_ID" HeaderText="LOAD_ID" ReadOnly="true" SortExpression="LOAD_ID" UniqueName="LOAD_ID" AllowFiltering="false" >
<HeaderStyle Font-Size="8pt" Width="10px"/>
<ItemStyle Font-Size="10pt" HorizontalAlign="LEFT"/>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="PART_NUM" HeaderText="PART_NUM" ReadOnly="true" SortExpression="PART_NUM"" UniqueName="PART_NUM" AllowFiltering="false" Aggregate="Count" >
<HeaderStyle Font-Size="8pt" width="10px"/>
<ItemStyle Font-Size="10pt" HorizontalAlign="LEFT" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="TOTAL_QTY" HeaderText="TOTAL_QTY" ReadOnly="true" SortExpression="TOTAL_QTY" UniqueName="TOTAL_QTY" AllowFiltering="false" >
<HeaderStyle Font-Size="8pt" Width="10px" />
<ItemStyle Font-Size="10pt" HorizontalAlign="LEFT" />
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</ContentTemplate>
</telerik:RadDock>
</telerik:RadDockZone>
</telerik:RadPane>
</telerik:RadSplitter>