This is a migrated thread and some comments may be shown as answers.

RadSplitter with RadGrid

5 Answers 232 Views

Splitter

This is a migrated thread and some comments may be shown as answers.

Torsten asked on 14 Mar 2011, 09:36 AM

We are facing a performance problem, when using RadGrid in RadSpliiter.

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

answered on 16 Mar 2011, 01:28 PM

RadSplitterWithRadGrid.zip

Hi Torsten,

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

Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!

answered on 23 Mar 2011, 09:04 AM

I have now disabled all resizing on page to see, if this is the problem. It wasn't.

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.

answered on 25 Mar 2011, 10:18 AM

Hello Torsten,

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

Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!

answered on 06 Sep 2018, 12:11 PM

1.png

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>