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

3 nested RadGrids - performance issue

1 Answer 136 Views

Grid

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

Alexander asked on 17 Mar 2012, 10:40 AM

Hi

I'm trying to implement client side hierarchial RadGrids as described here:
http://blogs.telerik.com/vladimirenchev/posts/08-09-09/how-to-telerik-radgrid-master-detail-client-side-data-binding-using-linq-to-sql-and-webservice.aspx

This works great for 2 levels of hierarchy (RadGrid1 has a NestedView in which RadGrid2 is placed).
But as soon as I try to implement third level of hierarchy and add a RadGrid3 inside of NestedView of RadGrid2 I get dramatically worse performance - about 2 minutes to get page rendered (against 7 seconds for page with 2 levels). Page contains just pure markup, without any data bound.

Please advise, what can be done in order to workaround this performance issue.

These are the test samples I've made:
First one is a quite fast 2 levels case (contains just a label inside of RadGrid2 NestedView), second is a slow one with RadGrid3 instead of label:

Label:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HierarchyTest-Label.aspx.cs" Inherits="HierarchyTest" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<script type="text/javascript" language="javascript">

RadGrid1_Command = function () {

console.log('RadGrid1_Command');

}

RadGrid2_Command = function () {

console.log('RadGrid2_Command');

}

RadGrid3_Command = function () {

console.log('RadGrid3_Command');

}

RadGrid1_HierarchyExpanding = function (sender, args) {

console.log('RadGrid1_HierarchyExpanding');

}

RadGrid2_HierarchyExpanding = function (sender, args) {

console.log('RadGrid2_HierarchyExpanding');

}

</script>

<form id="form1" runat="server">

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" AllowSorting="False"

GridLines="None" PageSize="10" Width="97%" Skin="Windows7">

<ClientSettings AllowColumnHide="True" AllowRowHide="True" AllowColumnsReorder="True"

ReorderColumnsOnClient="True">

<Resizing EnableRealTimeResize="True" ResizeGridOnColumnResize="True" AllowColumnResize="true"

ClipCellContentOnResize="false"></Resizing>

<ClientEvents OnCommand="RadGrid1_Command" OnHierarchyExpanding="RadGrid1_HierarchyExpanding" />

</ClientSettings>

<MasterTableView TableLayout="Fixed" AutoGenerateColumns="false" DataKeyNames="ServerId"

ClientDataKeyNames="ServerId" HierarchyLoadMode="Client">

<Columns>

<telerik:GridBoundColumn DataType="System.String" DataField="Server" HeaderText="Server"

UniqueName="Server" />

<telerik:GridBoundColumn DataType="System.String" DataField="Username" HeaderText="Username"

UniqueName="Username" />

<telerik:GridBoundColumn DataType="System.String" DataField="ServerId" UniqueName="ServerId"

Visible="false" />

</Columns>

<NestedViewTemplate>

<telerik:RadGrid runat="server" ID="RadGrid2" AllowPaging="False" AllowSorting="False"

GridLines="None" Width="97%" Skin="Windows7">

<ClientSettings AllowColumnHide="True" AllowRowHide="True" AllowColumnsReorder="True"

ReorderColumnsOnClient="True">

<Resizing EnableRealTimeResize="True" ResizeGridOnColumnResize="True" AllowColumnResize="true"

ClipCellContentOnResize="false"></Resizing>

<ClientEvents OnCommand="RadGrid2_Command" OnHierarchyExpanding="RadGrid2_HierarchyExpanding" />

</ClientSettings>

<MasterTableView TableLayout="Fixed" AutoGenerateColumns="false" ClientDataKeyNames="Id"

HierarchyLoadMode="Client">

<Columns>

<telerik:GridImageColumn DataType="System.String" HeaderText="St" DataImageUrlFormatString="Images\{0}.gif"

DataImageUrlFields="Active" ImageWidth="16px" ImageHeight="16px" HeaderStyle-Width="26px" />

<telerik:GridBoundColumn DataType="System.String" DataField="JobName" UniqueName="JobName"

HeaderText="Job Name" HeaderStyle-Width="170px" />

<telerik:GridBoundColumn DataType="System.String" DataField="Description" UniqueName="Description"

HeaderText="Description" HeaderStyle-Width="250px" />

<telerik:GridBoundColumn DataType="System.String" DataField="Result" UniqueName="Result"

HeaderText="Result" />

<telerik:GridBoundColumn DataType="System.String" DataField="NextRunStr" UniqueName="NextRunStr"

HeaderText="Next run" HeaderStyle-Width="120px" />

<telerik:GridBoundColumn DataType="System.String" DataField="DateCreatedStr" UniqueName="DateCreatedStr"

HeaderText="Date created" HeaderStyle-Width="120px" />

<telerik:GridBoundColumn DataType="System.String" DataField="Status" UniqueName="Status"

HeaderText="Status" />

<telerik:GridBoundColumn DataType="System.String" DataField="Id" UniqueName="ID"

Visible="false" />

</Columns>

<NestedViewTemplate>

<asp:Label runat="server" Text="Level 3" />

</NestedViewTemplate>

</MasterTableView>

</telerik:RadGrid>

</NestedViewTemplate>

</MasterTableView>

</telerik:RadGrid>

</div>

</form>

</body>

</html>

RadGrid:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HierarchyTest-Label.aspx.cs" Inherits="HierarchyTest" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title></title>

</head>

<body>

<script type="text/javascript" language="javascript">

RadGrid1_Command = function () {

console.log('RadGrid1_Command');

}

RadGrid2_Command = function () {

console.log('RadGrid2_Command');

}

RadGrid3_Command = function () {

console.log('RadGrid3_Command');

}

RadGrid1_HierarchyExpanding = function (sender, args) {

console.log('RadGrid1_HierarchyExpanding');

}

RadGrid2_HierarchyExpanding = function (sender, args) {

console.log('RadGrid2_HierarchyExpanding');

}

</script>

<form id="form1" runat="server">

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" AllowSorting="False"

GridLines="None" PageSize="10" Width="97%" Skin="Windows7">

<ClientSettings AllowColumnHide="True" AllowRowHide="True" AllowColumnsReorder="True"

ReorderColumnsOnClient="True">

<Resizing EnableRealTimeResize="True" ResizeGridOnColumnResize="True" AllowColumnResize="true"

ClipCellContentOnResize="false"></Resizing>

<ClientEvents OnCommand="RadGrid1_Command" OnHierarchyExpanding="RadGrid1_HierarchyExpanding" />

</ClientSettings>

<MasterTableView TableLayout="Fixed" AutoGenerateColumns="false" DataKeyNames="ServerId"

ClientDataKeyNames="ServerId" HierarchyLoadMode="Client">

<Columns>

<telerik:GridBoundColumn DataType="System.String" DataField="Server" HeaderText="Server"

UniqueName="Server" />

<telerik:GridBoundColumn DataType="System.String" DataField="Username" HeaderText="Username"

UniqueName="Username" />

<telerik:GridBoundColumn DataType="System.String" DataField="ServerId" UniqueName="ServerId"

Visible="false" />

</Columns>

<NestedViewTemplate>

<telerik:RadGrid runat="server" ID="RadGrid2" AllowPaging="False" AllowSorting="False"

GridLines="None" Width="97%" Skin="Windows7">

<ClientSettings AllowColumnHide="True" AllowRowHide="True" AllowColumnsReorder="True"

ReorderColumnsOnClient="True">

<Resizing EnableRealTimeResize="True" ResizeGridOnColumnResize="True" AllowColumnResize="true"

ClipCellContentOnResize="false"></Resizing>

<ClientEvents OnCommand="RadGrid2_Command" OnHierarchyExpanding="RadGrid2_HierarchyExpanding" />

</ClientSettings>

<MasterTableView TableLayout="Fixed" AutoGenerateColumns="false" ClientDataKeyNames="Id"

HierarchyLoadMode="Client">

<Columns>

<telerik:GridImageColumn DataType="System.String" HeaderText="St" DataImageUrlFormatString="Images\{0}.gif"

DataImageUrlFields="Active" ImageWidth="16px" ImageHeight="16px" HeaderStyle-Width="26px" />

<telerik:GridBoundColumn DataType="System.String" DataField="JobName" UniqueName="JobName"

HeaderText="Job Name" HeaderStyle-Width="170px" />

<telerik:GridBoundColumn DataType="System.String" DataField="Description" UniqueName="Description"

HeaderText="Description" HeaderStyle-Width="250px" />

<telerik:GridBoundColumn DataType="System.String" DataField="Result" UniqueName="Result"

HeaderText="Result" />

<telerik:GridBoundColumn DataType="System.String" DataField="NextRunStr" UniqueName="NextRunStr"

HeaderText="Next run" HeaderStyle-Width="120px" />

<telerik:GridBoundColumn DataType="System.String" DataField="DateCreatedStr" UniqueName="DateCreatedStr"

HeaderText="Date created" HeaderStyle-Width="120px" />

<telerik:GridBoundColumn DataType="System.String" DataField="Status" UniqueName="Status"

HeaderText="Status" />

<telerik:GridBoundColumn DataType="System.String" DataField="Id" UniqueName="ID"

Visible="false" />

</Columns>

<NestedViewTemplate>

<telerik:RadGrid runat="server" ID="RadGrid3" AllowPaging="False" AllowSorting="False"

GridLines="None">

<ClientSettings AllowColumnHide="False" AllowRowHide="False" AllowColumnsReorder="False"

ReorderColumnsOnClient="False">

<ClientEvents OnCommand="RadGrid3_Command" />

</ClientSettings>

<MasterTableView TableLayout="Fixed" AutoGenerateColumns="false" DataKeyNames="TaskId">

<Columns>

<telerik:GridImageColumn DataType="System.String" HeaderText="St" DataImageUrlFormatString="Images\{0}.gif"

DataImageUrlFields="Active" ImageWidth="16px" ImageHeight="16px" HeaderStyle-Width="26px" />

<telerik:GridBoundColumn DataType="System.String" DataField="TaskName" UniqueName="TaskName"

HeaderText="Task Name" HeaderStyle-Width="170px" />

<telerik:GridBoundColumn DataType="System.String" DataField="TaskId" UniqueName="TaskId"

HeaderStyle-Width="170px" Visible="False" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

</NestedViewTemplate>

</MasterTableView>

</telerik:RadGrid>

</NestedViewTemplate>

</MasterTableView>

</telerik:RadGrid>

</div>

</form>

</body>

</html>

1 Answer, 1 is accepted

answered on 21 Mar 2012, 01:22 PM

Hello Alexander,

The performance when using nested RadGrid controls declared in NestedViewTemplate degrades exponentially. In such scenarios you could use a DetailTables approach will increase performance substantially or follow the described general performance optimization techniques.

All the best,
Antonio Stoilkov
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.