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

Client-side Hierarchy Loading


 CustomerIDContact NameCompany 
 Page 17 of 31, items 49 to 51 of 91.
LONEPFran WilsonLonesome Pine Restaurant
 
 OrderIDDate Ordered EmployeeID
123
 Page 1 of 3, items 1 to 3 of 8.
103079/17/1996 12:00:00 AM2
 
Unit PriceQuantity Discount
39.40100
10.0030
103179/30/1996 12:00:00 AM6
 
Unit PriceQuantity Discount
14.40200
105445/21/1997 12:00:00 AM4
 
Unit PriceQuantity Discount
45.6070
14.0070
MAGAAGiovanni RovelliMagazzini Alimentari Riuniti
 
 OrderIDDate Ordered EmployeeID
 Page 1 of 4, items 1 to 3 of 10.
102758/7/1996 12:00:00 AM1
 
Unit PriceQuantity Discount
3.60120.05
44.0060.05
103009/9/1996 12:00:00 AM2
 
Unit PriceQuantity Discount
13.60300
10.00200
104041/3/1997 12:00:00 AM2
 
Unit PriceQuantity Discount
11.20400.05
24.90300.05
16.00300.05
MAISDCatherine DeweyMaison Dewey
 
 OrderIDDate Ordered EmployeeID
123
 Page 1 of 3, items 1 to 3 of 7.
105295/7/1997 12:00:00 AM5
 
Unit PriceQuantity Discount
12.50200
24.00140
36.00100
106498/28/1997 12:00:00 AM5
 
Unit PriceQuantity Discount
45.60200
34.80150
1076012/1/1997 12:00:00 AM4
 
Unit PriceQuantity Discount
43.90400
46.00300.25
14.00120.25
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.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
<%@ Page Language="vb" Inherits="Telerik.GridExamplesVBNET.Hierarchy.HierarchyLoadModeClient.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>

<%@ 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