Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q1 2012 released 04/11/2012
select

Grid / Client-side Hierarchy Loading

 CustomerIDContact NameCompany 
12345678910...
 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
10.0060
ANATRAna TrujilloAna Trujillo Emparedados y helados
 
 OrderIDDate Ordered EmployeeID
12
 Page 1 of 2, items 1 to 3 of 4.
103089/18/1996 12:00:00 AM7
 
Unit PriceQuantity Discount
12.0050
28.8010
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
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
16.80240
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
12
 Page 1 of 2, items 1 to 3 of 4.
21.00500.1
55.00150.1
18.40100.1
Click PostBack to see the state of the grid is preserved.


Example Configuration

Using set_expanded() method of GridDataItem all GridDataItems will be created on the client!



expandItem() method of GridTableView does not require GridDataItems to be created on the client!



collapseItem() method of GridTableView does not require GridDataItems to be created on the client!





  • 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.
    In order to use client-side hierarchy expand, you will need to set also ClientSettings.AllowExpand.Collapse to true (which is the default value).

    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.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.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="vb" AutoEventWireup="false" Inherits="Telerik.GridExamplesVBNET.Hierarchy.HierarchyLoadModeClient.DefaultVB"
        CodeFile="DefaultVB.aspx.vb" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <telerik:HeadTag runat="server" ID="Headtag2"></telerik:HeadTag>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

            <script type="text/javascript">
            function HierarchyExpanding(sender, args)
            {
                var firstClientDataKeyName = args.get_tableView().get_clientDataKeyNames()[0];
                if(!confirm("Should expand item with " + firstClientDataKeyName + ":'" + args.getDataKeyValue(firstClientDataKeyName) + "'?"))
                {
                    args.set_cancel(true);
                }
            }
            
            function HierarchyExpanded(sender, args)
            {
                var firstClientDataKeyName = args.get_tableView().get_clientDataKeyNames()[0];
                alert("Item with " + firstClientDataKeyName + ":'" + args.getDataKeyValue(firstClientDataKeyName) + "' expanded.");
            }
            
            function HierarchyCollapsing(sender, args)
            {
                var firstClientDataKeyName = args.get_tableView().get_clientDataKeyNames()[0];
                if(!confirm("Should collapse item with " + firstClientDataKeyName + ":'" + args.getDataKeyValue(firstClientDataKeyName) + "'?"))
                {
                    args.set_cancel(true);
                }
            }
            
            function HierarchyCollapsed(sender, args)
            {
                var firstClientDataKeyName = args.get_tableView().get_clientDataKeyNames()[0];
                alert("Item with " + firstClientDataKeyName + ":'" + args.getDataKeyValue(firstClientDataKeyName) + "' collapsed.");
            }
            
            function ExpandCollapseFirstMasterTableViewItem()
            {
                var firstMasterTableViewRow = $find("<%= RadGrid1.MasterTableView.ClientID %>").get_dataItems()[0];
                if(firstMasterTableViewRow.get_expanded())
                {
                    firstMasterTableViewRow.set_expanded(false);
                }
                else
                {
                    firstMasterTableViewRow.set_expanded(true);
                }
            }
            
            function ExpandFirstMasterTableViewItem()
            {
               $find("<%= RadGrid1.MasterTableView.ClientID %>").expandItem(0);
            }
            
            function CollapseFirstMasterTableViewItem()
            {
               $find("<%= RadGrid1.MasterTableView.ClientID %>").collapseItem(0);
            }
            
            function ExpandFirstDetailTableFirstItem()
            {
               $find("<%= RadGrid1.Items(0).ChildItem.NestedTableViews(0).ClientID %>").expandItem(0);
            }
            
            function CollapseFirstDetailTableFirstItem()
            {
               $find("<%= RadGrid1.Items(0).ChildItem.NestedTableViews(0).ClientID %>").collapseItem(0);
            }

            </script>

        </telerik:RadCodeBlock>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
            <telerik:Header runat="server" ID="Header1" NavigationLanguage="VB"></telerik:Header>
          <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
            <!-- content start -->
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server" AutoGenerateColumns="False"
                PageSize="3" AllowSorting="True" AllowMultiRowSelection="False" AllowPaging="True"
                GridLines="None">
                <PagerStyle Mode="NumericPages"></PagerStyle>
                <ClientSettings>
                    <ClientEvents OnHierarchyExpanding="HierarchyExpanding" OnHierarchyExpanded="HierarchyExpanded"
                        OnHierarchyCollapsing="HierarchyCollapsing" OnHierarchyCollapsed="HierarchyCollapsed" />
                </ClientSettings>
                <MasterTableView ClientDataKeyNames="CustomerID" DataSourceID="SqlDataSource1" DataKeyNames="CustomerID"
                    AllowMultiColumnSorting="True" HierarchyLoadMode="Client" Width="100%">
                    <DetailTables>
                        <telerik:GridTableView ClientDataKeyNames="OrderID" DataKeyNames="OrderID" HierarchyLoadMode="Client"
                            DataSourceID="SqlDataSource2" Width="100%" GridLines="Horizontal" CssClass="RadGrid2">
                            <ParentTableRelation>
                                <telerik:GridRelationFields DetailKeyField="CustomerID" MasterKeyField="CustomerID" />
                            </ParentTableRelation>
                            <DetailTables>
                                <telerik:GridTableView ClientDataKeyNames="OrderID" DataKeyNames="OrderID" HierarchyLoadMode="Client"
                                    DataSourceID="SqlDataSource3" Width="100%" GridLines="Horizontal" CssClass="RadGrid3">
                                    <ParentTableRelation>
                                        <telerik:GridRelationFields DetailKeyField="OrderID" MasterKeyField="OrderID" />
                                    </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>
            <asp:Button ID="Button1" CssClass="button" runat="server" Text="PostBack" Style="margin: 10px 22px 10px 0px">
            </asp:Button>
            Click PostBack to see the state of the grid is preserved.
            <br />
            <br />
            <br />
            <telerik:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server" Expanded="true">
    <asp:Button ID="Button2" CssClass="button" Width="300px" Text="Expand/Collapse first MasterTableView item"
    OnClientClick="ExpandCollapseFirstMasterTableViewItem(); return false;" runat="server" />
                <br />
                Using set_expanded() method of GridDataItem all GridDataItems will be created on
                the client!
                <br />
                <br />
                <br />
    <asp:Button ID="Button3" CssClass="button" Width="300px" Text="Expand first MasterTableView item"
    OnClientClick="ExpandFirstMasterTableViewItem(); return false;" runat="server" />
                <br />
                expandItem() method of GridTableView does not require GridDataItems to be created
                on the client!
                <br />
                <br />
                <br />
    <asp:Button ID="Button4" CssClass="button" Width="300px" Text="Collapse first MasterTableView item"
    OnClientClick="CollapseFirstMasterTableViewItem(); return false;" runat="server" />
                <br />
                collapseItem() method of GridTableView does not require GridDataItems to be created
                on the client!
                <br />
                <br />
                <br />
    <asp:Button ID="Button5" CssClass="button" Width="300px" Text="Expand first item on first DetailTable"
    OnClientClick="ExpandFirstDetailTableFirstItem(); return false;" runat="server" />
                <br />
                <br />
    <asp:Button ID="Button6" CssClass="button" Width="300px" Text="Collapse first item on first DetailTable"
    OnClientClick="CollapseFirstDetailTableFirstItem(); return false;" runat="server" />
            </telerik:ConfiguratorPanel>
            <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" />
                </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" />
                </SelectParameters>
            </asp:SqlDataSource>
            <!-- content end -->
            <telerik:Footer runat="server" ID="Footer1"></telerik:Footer>
        </form>
    </body>
    </html>

Get more than expected!

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451