Self-Referencing Hierarchy

2 posts, 0 answers
  1. Justin Hunter
    Justin Hunter avatar
    9 posts
    Member since:
    Jul 2010

    Posted 02 Sep 2010 Link to this post

    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
  2. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 07 Sep 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top