New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Client-side Hierarchy Loading


 CustomerIDContact NameCompany 
 Page 13 of 31, items 37 to 39 of 91.
HUNGCYoshi LatimerHungry Coyote Import Store
 
 OrderIDDate Ordered EmployeeID
12
 Page 1 of 2, items 1 to 3 of 5.
1037512/6/1996 12:00:00 AM3
 
Unit PriceQuantity Discount
18.60150
5.90100
1039412/25/1996 12:00:00 AM1
 
Unit PriceQuantity Discount
4.80100
39.40100
104151/15/1997 12:00:00 AM3
 
Unit PriceQuantity Discount
2.00200
31.2020
HUNGOPatricia McKennaHungry Owl All-Night Grocers
 
 OrderIDDate Ordered EmployeeID
 Page 1 of 7, items 1 to 3 of 19.
102989/5/1996 12:00:00 AM6
 
Unit PriceQuantity Discount
12
 Page 1 of 2, items 1 to 3 of 4.
15.20400
15.20400.25
44.00300.25
103099/19/1996 12:00:00 AM3
 
Unit PriceQuantity Discount
12
 Page 1 of 2, items 1 to 3 of 5.
20.00300
17.60200
36.80200
1033510/22/1996 12:00:00 AM7
 
Unit PriceQuantity Discount
12
 Page 1 of 2, items 1 to 3 of 4.
42.40480.2
10.00250.2
15.2070.2
ISLATHelen BennettIsland Trading
 
 OrderIDDate Ordered EmployeeID
 Page 1 of 4, items 1 to 3 of 10.
103159/26/1996 12:00:00 AM4
 
Unit PriceQuantity Discount
12.00300
11.20140
1031810/1/1996 12:00:00 AM8
 
Unit PriceQuantity Discount
7.70200
14.4060
1032110/3/1996 12:00:00 AM3
 
Unit PriceQuantity Discount
14.40100
If you work in hierarchy mode, you can define when the data binding for GridTableView will occur. In order to do this, you need to set the following property:

GridTableView.HierarchyLoadMode

The possible values are:
  • HierarchyLoadMode.ServerBind - all child GridTableViews will be bound immediately when DataBind occurs for a parent GridTableView or RadGrid.
  • HierarchyLoadMode.ServerOnDemand - data binding of a child GridTableView will only take place when an item is expanded. This is the default value.
  • HierarchyLoadMode.Client is similar to HierarchyLoadMode.ServerBind but the items are expanded client-side, using JavaScript manipulations instead of postback to the server.
  • HierarchyLoadMode.Conditional is mix of HierarchyLoadMode.ServerOnDemand and HierarchyLoadMode.ClientBind, with the difference that when an item is expanded once and postback fires for the initial expand, next time the same item will be expanded on the client . This behavior is also persisted across postback to the server-so if you have previously expanded an item from then on it will only be expanded / collapsed on the client regardless of how many postbacks you perform. The behavior is the same if you have previously loaded hierarchy with expanded items (e.g. setting Expanded to true in the PreRender event)-these expanded items will also be collapsed / expanded on the client.
Changing the GridTableView.HierarchyLoadMode property value impacts the performance in the following way:

In HierarchyLoadMode.ServerBind mode:
  • The roundtrip to the database happens only once - when the grid is bound.
  • The ViewState holds all data for the detail tables.
  • Only detail table-views for the expanded items are rendered.
  • You need to postback to the server to in order to expand an item.
In HierarchyLoadMode.ServerOnDemand mode:
  • The roundtrip to the database happens when the grid is bound and when an item is expanded.
  • The ViewState holds data only for the visible Items (the smallest possible ViewState).
  • Only detail table-views of the expanded items are rendered.
  • You need to postback to the server in order to expand an item.
In HierarchyLoadMode.Conditional mode:
  • The roundtrip to the database happens when the grid is bound and when an item is expanded first time.
  • The ViewState holds data only for the visible Items.
  • Only detail table-views of the expanded items are rendered.
  • You need to postback to the server in order to expand an item first time and after that for expanding already expanded item no postback to the server is needed - expand/collapse of hierarchy items is managed client-side.
In HierarchyLoadMode.Client mode:
  • The roundtrip to the database happens only when grid is bound.
  • The ViewState holds all detail tables data.
  • All items are rendered - even if not visible (not expanded).
  • No postback to the server is needed to expand an item - expand/collapse of hierarchy items is managed client-side.
Note: When setting HierarchyLoadMode = Client you should also set ClientSettings -> AllowExpandCollapse = true for your grid instance.

This example shows the advanced hierarchy model of Telerik RadGrid with client-side expand/collapse. A three level hierarchy is demonstrated with Customer Master Table and two nested Detail Tables - Orders and OrderDetails. All grid levels have set GridTableView.HierarchyLoadMode.Client.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="c#" Inherits="Telerik.GridExamplesCSharp.Hierarchy.HierarchyLoadModeClient.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript" src="scripts.js"></script>
    </telerik:RadCodeBlock>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container">
        <ul class="fb-group">
            <li>
                <telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" Text="Expand\Collapse the first item" OnClientClicked="demo.ExpandCollapseFirstMasterTableViewItem" AutoPostBack="false"></telerik:RadButton>
            </li>
            <li>
                <telerik:RadButton RenderMode="Lightweight" ID="RadButton2" runat="server" Text="Postback to observe the expand\collapse state is persisted"></telerik:RadButton>
            </li>
        </ul>
        <br />
        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server" AutoGenerateColumns="False"
            PageSize="3" AllowSorting="True" AllowPaging="True">
            <PagerStyle Mode="NumericPages"></PagerStyle>
            <ClientSettings>
                <ClientEvents OnGridCreated="demo.GridCreated" OnHierarchyExpanded="demo.HierarchyExpanded" OnHierarchyCollapsed="demo.HierarchyCollapsed"></ClientEvents>
            </ClientSettings>
            <MasterTableView ClientDataKeyNames="CustomerID" DataSourceID="SqlDataSource1" DataKeyNames="CustomerID"
                AllowMultiColumnSorting="True" HierarchyLoadMode="Client">
                <DetailTables>
                    <telerik:GridTableView ClientDataKeyNames="OrderID" DataKeyNames="OrderID" HierarchyLoadMode="Client" DataSourceID="SqlDataSource2">
                        <ParentTableRelation>
                            <telerik:GridRelationFields DetailKeyField="CustomerID" MasterKeyField="CustomerID"></telerik:GridRelationFields>
                        </ParentTableRelation>
                        <DetailTables>
                            <telerik:GridTableView ClientDataKeyNames="OrderID" DataKeyNames="OrderID" HierarchyLoadMode="Client" DataSourceID="SqlDataSource3">
                                <ParentTableRelation>
                                    <telerik:GridRelationFields DetailKeyField="OrderID" MasterKeyField="OrderID"></telerik:GridRelationFields>
                                </ParentTableRelation>
                                <Columns>
                                    <telerik:GridBoundColumn SortExpression="UnitPrice" HeaderText="Unit Price" HeaderButtonType="TextButton"
                                        DataField="UnitPrice">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn SortExpression="Quantity" HeaderText="Quantity" HeaderButtonType="TextButton"
                                        DataField="Quantity">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn SortExpression="Discount" HeaderText="Discount" HeaderButtonType="TextButton"
                                        DataField="Discount">
                                    </telerik:GridBoundColumn>
                                </Columns>
                                <SortExpressions>
                                    <telerik:GridSortExpression FieldName="Quantity" SortOrder="Descending"></telerik:GridSortExpression>
                                </SortExpressions>
                            </telerik:GridTableView>
                        </DetailTables>
                        <Columns>
                            <telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton"
                                DataField="OrderID">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn SortExpression="OrderDate" HeaderText="Date Ordered" HeaderButtonType="TextButton"
                                DataField="OrderDate">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn SortExpression="EmployeeID" HeaderText="EmployeeID" HeaderButtonType="TextButton"
                                DataField="EmployeeID">
                            </telerik:GridBoundColumn>
                        </Columns>
                        <SortExpressions>
                            <telerik:GridSortExpression FieldName="OrderDate"></telerik:GridSortExpression>
                        </SortExpressions>
                    </telerik:GridTableView>
                </DetailTables>
                <Columns>
                    <telerik:GridBoundColumn SortExpression="CustomerID" HeaderText="CustomerID" HeaderButtonType="TextButton"
                        DataField="CustomerID">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="ContactName" HeaderText="Contact Name" HeaderButtonType="TextButton"
                        DataField="ContactName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="CompanyName" HeaderText="Company" HeaderButtonType="TextButton"
                        DataField="CompanyName">
                    </telerik:GridBoundColumn>
                </Columns>
                <SortExpressions>
                    <telerik:GridSortExpression FieldName="CompanyName"></telerik:GridSortExpression>
                </SortExpressions>
            </MasterTableView>
        </telerik:RadGrid>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Customers"
        runat="server"></asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Orders Where CustomerID = @CustomerID"
        runat="server">
        <SelectParameters>
            <asp:SessionParameter Name="CustomerID" SessionField="CustomerID" Type="string"></asp:SessionParameter>
        </SelectParameters>
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource3" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [Order Details] where OrderID = @OrderID"
        runat="server">
        <SelectParameters>
            <asp:SessionParameter Name="OrderID" SessionField="OrderID" Type="Int32"></asp:SessionParameter>
        </SelectParameters>
    </asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance