Self-Referencing Hierarchy

[Justin Hunter]

I am unable to get the self-referencing hierarchy to work. The table consists of many columns, but the two keys are svcref_id and svcref_parent_id - if it's a root node, those two would be the same, If it's a child, the svcref_parent_id would point to another svcref_id.

The way I have my grid set up is:

<telerik:RadGrid runat="server" ID="rgdSearch" OnNeedDataSource="rgdSearch_NeedDataSource" Height="180px" Skin="WebBlue" Width="775px" OnItemCommand="rgdSearch_ItemCommand" OnColumnCreated="RadGrid1_ColumnCreated" OnItemCreated="RadGrid1_ItemCreated" OnItemDataBound="RadGrid1_ItemDataBound">
    <MasterTableView HierarchyDefaultExpanded="true" HierarchyLoadMode="Client" AutoGenerateColumns="false" AllowPaging="true" DataKeyNames="svcref_id, svcref_parent_id" PageSize="5" FilterExpression="svcref_parent_id = svcref_id">
        <SelfHierarchySettings ParentKeyName="svcref_parent_id" KeyName="svcref_id" />
        <PagerStyle AlwaysVisible="true" />
        <Columns>
            <telerik:GridBoundColumn DataField="svcref_id" UniqueName="svcref_id" Visible="false" />
            <telerik:GridBoundColumn DataField="svcref_parent_id" UniqueName="svcref_parent_id" Visible="false" />
            <telerik:GridBoundColumn HeaderText="Service" HeaderStyle-Height="20px" DataField="svc_name" UniqueName="svc_name" />
        </Columns>
        <NoRecordsTemplate>
            <asp:Label runat="server" ID="lblNoRecords" Text="There are no records to display." meta:resourckey="lblNoRecords"></asp:Label>
        </NoRecordsTemplate>
    </MasterTableView>
    <ClientSettings EnablePostBackOnRowClick="true" AllowExpandCollapse="true">
        <Selecting AllowRowSelect="true" EnableDragToSelectRows="false" />
        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
    </ClientSettings>
</telerik:RadGrid>

I have followed the example on your website, but this is how my grid looks at run-time (attached picture)

The only thing I changed (that I know of), besides changing RadGrid1 to the name of my grid, from your tutorial/demo is the following lines (my key).

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    CreateExpandCollapseButton(e.Item, "svcref_id");
}

and (also my key),

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    CreateExpandCollapseButton(e.Item, "svcref_id");

Thanks

[Pavlina]

Hi Justin,

Please make sure that you include button control for expand/collapse of nested tables as part of the first column in the grid after hiding the default expand/collapse column:

protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
     {
         if (e.Column is GridExpandColumn)
         {
             e.Column.Visible = false;
         }
         else if (e.Column is GridBoundColumn)
         {
             e.Column.HeaderStyle.Width = Unit.Pixel(100);
         }
     }
     protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
     {
         CreateExpandCollapseButton(e.Item, "EmployeeID");
         if (e.Item is GridHeaderItem && e.Item.OwnerTableView != RadGrid1.MasterTableView)
         {
             e.Item.Style["display"] = "none";
         }
         if (e.Item is GridNestedViewItem)
         {
             e.Item.Cells[0].Visible = false;
         }
     }
     protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
     {
         CreateExpandCollapseButton(e.Item, "EmployeeID");
     }
     public void CreateExpandCollapseButton(GridItem item, string columnUniqueName)
     {
         if (item is GridDataItem)
         {
             if (item.FindControl("MyExpandCollapseButton") == null)
             {
                 Button button = new Button();
                 button.Click += new EventHandler(button_Click);
                 button.CommandName = "ExpandCollapse";
                 button.CssClass = (item.Expanded) ? "rgCollapse" : "rgExpand";
                 button.ID = "MyExpandCollapseButton";
                 if (item.OwnerTableView.HierarchyLoadMode == GridChildLoadMode.Client)
                 {
                     string script = String.Format(@"$find(""{0}"")._toggleExpand($get('{1}'),event); return false;", item.Parent.Parent.ClientID, button.ClientID);
                     button.OnClientClick = script;
                 }
                 int level = item.ItemIndexHierarchical.Split(':').Length;
                 if (level > 1)
                 {
                     button.Style["margin-left"] = level + 10 + "px";
                 }
                 TableCell cell = ((GridDataItem)item)[columnUniqueName];
                 cell.Controls.Add(button);
                 cell.Controls.Add(new LiteralControl(" "));
                 cell.Controls.Add(new LiteralControl(((GridDataItem)item).GetDataKeyValue(columnUniqueName).ToString()));
             }
         }
     }
     void button_Click(object sender, EventArgs e)
     {
         ((Button)sender).CssClass = (((Button)sender).CssClass == "rgExpand") ? "rgCollapse" : "rgExpand";
     }

Review this help article for more information.

All the best,
Pavlina
the Telerik team