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

Client-side Hierarchy Loading


 CustomerIDContact NameCompany 
 Page 1 of 31, items 1 to 3 of 91.
ALFKIMaria AndersAlfreds Futterkiste
 
 OrderIDDate Ordered EmployeeID
12
 Page 1 of 2, items 1 to 3 of 6.
106438/25/1997 12:00:00 AM6
 
Unit PriceQuantity Discount
18.00210.25
45.60150.25
12.0020.25
1069210/3/1997 12:00:00 AM4
 
Unit PriceQuantity Discount
43.90200
1070210/13/1997 12:00:00 AM4
 
Unit PriceQuantity Discount
18.00150
ANATRAna TrujilloAna Trujillo Emparedados y helados
 
 OrderIDDate Ordered EmployeeID
106258/8/1997 12:00:00 AM3
 
Unit PriceQuantity Discount
34.00100
14.0050
23.2530
1075911/28/1997 12:00:00 AM3
 
Unit PriceQuantity Discount
32.00100
109263/4/1998 12:00:00 AM4
 
Unit PriceQuantity Discount
34.80100
9.2070
ANTONAntonio MorenoAntonio Moreno Taquería
 
 OrderIDDate Ordered EmployeeID
123
 Page 1 of 3, items 1 to 3 of 7.
1036511/27/1996 12:00:00 AM3
 
Unit PriceQuantity Discount
No child records to display.
105074/15/1997 12:00:00 AM7
 
Unit PriceQuantity Discount
46.00150.15
12.75150.15
105355/13/1997 12:00:00 AM4
 
Unit PriceQuantity Discount
55.00150.1
18.40100.1
19.5050.1
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