RadGrid for ASP.NET AJAX
Contents
RadControls for ASP.NET AJAX

You can build multiple levels of a hierarchical grid using a single table in the data source by specifying relations inside the same table. The grid can automatically generate detail table views that copy the properties of the MasterTableView and display data based on the relations you specify.

To build a self-referencing hierarchy,

  1. Add all fields from the data source that define the parent/child relationships to the DataKeyNames array of the MasterTableView.

  2. Set the SelfReferencingSettings property of the MasterTableView to describe the data relationship between the data for parent and child tables (between the fields you added to DataKeyNames):

    • The ParentKeyName sub-property specifies the field in the parent table view.

    • The KeyName sub-property specifies the field in the detail table view that links to the field specified by ParentKeyName.

    • The MaximumDepth sub-property limits the depth of nested detail tables. Note that this specifies the number of detail tables you can nest -- the master table view is not counted in this value.

  3. If you want to display a tree-like structure, Set the FilterExpression property of the MasterTableView to filter out all items except those that belong at the root level of the hierarchy. Note that this must be done on Page_Load, so that the filter does not apply to any detail tables.

Example

The following example shows a grid with a self-referencing hierarchy based on a single data table having root node with null value for parent id in the source.For example:

Self Hierarchy Table
Self Hierarchy Data

In the ASPX file, the grid declaration does not need to include any detail tables. The MasterTableView includes a SelfHierarchySettings section to describe the data relationships and a DataKeyNames property that lists the relevant fields:

CopyASPX
<telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource"
  OnItemCreated="RadGrid1_ItemCreated">
  <MasterTableView AllowSorting="true" DataKeyNames="ID, ParentID" Width="100%">
    <SelfHierarchySettings ParentKeyName="ParentID" KeyName="ID" />
  </MasterTableView>
  <ClientSettings AllowExpandCollapse="true">
  </ClientSettings>
</telerik:RadGrid>

The Page_Load event handler filters out all but the root element in the MasterTableView:

The next step is to bind the RadGrid to data in the NeedDataSource event handler:

In order to hide the expand/collapse images when there are no records in self-referencing hierarchy, see Hiding the expand/collapse images.

Caution

NOTE: The advanced data binding using NeedDataSource is the recommended approach when creating self-hierarchical RadGrid.

Bind a self-referencing RadGrid to a data source control

By design the RadGrid does not support a self-referencing hierarchy bound to a data source control. In order to achieve this you need to write some custom logic. Below is the code of a simple demo implementation.

The first step is to set a RadGrid.DataSourceID to the datasource control:

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

Then apply FilterExpression in the Page_Load event handler.

Next step is to hide the default expand/collapse column and include button control for expand/collapse of nested tables as part of the first column in the grid:

Finally, as a polishing touch, an event handler for the Page.PreRenderComplete event is added to recursively locate and hide any empty detail table views:

For a live example of a self-referencing grid, see Self-referencing heierarchy.

If you want to display the header of the master table, but hide the headers on detail tables, set the grid's ShowHeader property to True and use the ItemCreated event to hide the headers on detail tables:

CopyC#
protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridHeaderItem && e.Item.OwnerTableView != RadGrid1.MasterTableView)
    {
        e.Item.Style["display"] = "none";
    }
}
CopyVB.NET
Protected Sub RadGrid1_ItemCreated(ByVal sender As Object, ByVal e As GridItemEventArgs) Handles RadGrid1.ItemCreated
    If (TypeOf e.Item Is GridHeaderItem AndAlso (Not e.Item.OwnerTableView Is RadGrid1.MasterTableView)) Then
        e.Item.Style("display") = "none"
    End If
End Sub
Caution

Self-referencing RadGrid hierarchy does not support CRUD operations when it is bound with DataSource control. If you need CRUD operations you should use NeedDataSource databinding.