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 / Self-referencing Hierarchy

Employee IDLast NameFirst NameTitleReports To
 2FullerAndrewVice President, Sales 
Employee IDLast NameFirst NameTitleReports To
 1DavolioNancySales Representative2
 3LeverlingJanetSales Representative2
 4PeacockMargaretSales Representative2
 5BuchananStevenSales Manager2
Employee IDLast NameFirst NameTitleReports To
 6SuyamaMichaelSales Representative5
 7KingRobertSales Representative5
 9DodsworthAnneSales Representative5
 8CallahanLauraInside Sales Coordinator2

  • This example shows the self-referencing hierarchy model of Telerik RadGrid. It allows you to build multiple levels of hierarchy from a single table in the data source by specifying relations inside the same table.  You do not need to create separate tables for each child level - one table is sufficient to define the hierarchy schema.  All visual settings will be applied to the nested tables as well.
    Below are steps needed to implement the self-referencing feature of the grid:
    • add the fields from the grid source which define the parent/child relations (EmployeeID and ReportsTo in this case) to the DataKeyNames array of the MasterTableView
    • configure these fields through the SelfHierarchySettings property of the MasterTableView. The ParentKeyName subproperty has to point to the parent item id, while KeyName references the id value for the current table level. 
    • define the root level filter for the grid hierarchy depending on your source table conventions (in this demo the root items have a parent ID with null value). This can be done through the FilterExpression property of the MasterTableView instance:

      RadGrid1.MasterTableView.FilterExpression = "ReportsTo IS NULL"
    • you can also set the MaximumDepth sub-property of SelfHierarchySettings (not used in this example) to limit the depth of the nested tables. The default value for MaximumDepth is 10. This property can be set only once when the grid is initialized and can not be modified

    In addition, you can hide the header item for the tables in the hierarchy wiring the ItemCreated event of the grid if it is not needed.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="vb" AutoEventWireup="false" Inherits="Telerik.GridExamplesVBNET.Hierarchy.SelfReferencing.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>
        <style type="text/css">
            .RadGrid td
            {
                padding: 0;
            }
        </style>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
        <telerik:Header runat="server" ID="Header1" NavigationLanguage="VB" ShowSkinChooser="true">
        </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" runat="server" DataSourceID="SqlDataSource1" OnColumnCreated="RadGrid1_ColumnCreated"
            OnItemCreated="RadGrid1_ItemCreated" OnItemDataBound="RadGrid1_ItemDataBound">
            <MasterTableView HierarchyDefaultExpanded="true" HierarchyLoadMode="Client" AllowSorting="true"
                DataKeyNames="EmployeeID, ReportsTo" Width="100%">
                <SelfHierarchySettings ParentKeyName="ReportsTo" KeyName="EmployeeID" />
            </MasterTableView>
            <ClientSettings AllowExpandCollapse="true" />
        </telerik:RadGrid>
        <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT EmployeeID, LastName, FirstName, Title, ReportsTo FROM Employees"
            runat="server"></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