hierarchical gridview expand 3 level

2 posts, 0 answers
  1. Ilaya
    Ilaya avatar
    3 posts
    Member since:
    Mar 2012

    Posted 09 Dec 2019 Link to this post

    Dear All,

    i have created Telerik Hierarchy Rad Gridview.

    >> first level Employee Name

    >> second level Employee Role

    >> third level Employee Designation

    but i am using single table. EmployeeMaster(only one table)

    i want out put:

    Employee Name
                         (expand) Employee role
                                        (expand) Employee Designation


  2. Attila Antal
    Admin
    Attila Antal avatar
    440 posts

    Posted 12 Dec 2019 Link to this post

    Hi Ilaya,

    Here is an example you can try. 

    RadGrid markup:

    <telerik:RadGrid ID="RadGrid1" runat="server" Width="800px"
        OnDetailTableDataBind="RadGrid1_DetailTableDataBind"
        OnNeedDataSource="RadGrid1_NeedDataSource">
        <MasterTableView Name="Name" DataKeyNames="ID" AutoGenerateColumns="false">
            <Columns>
                <telerik:GridBoundColumn DataField="Name" HeaderText="Employee Name"></telerik:GridBoundColumn>
            </Columns>
            <DetailTables>
                <telerik:GridTableView Name="Role" DataKeyNames="ID" AutoGenerateColumns="false">
                    <Columns>
                        <telerik:GridBoundColumn DataField="Role" HeaderText="Employee Role"></telerik:GridBoundColumn>
                    </Columns>
                    <DetailTables>
                        <telerik:GridTableView Name="Designation" DataKeyNames="ID" AutoGenerateColumns="false">
                            <Columns>
                                <telerik:GridBoundColumn DataField="Designation" HeaderText="Employee Designation"></telerik:GridBoundColumn>
                            </Columns>
                        </telerik:GridTableView>
                    </DetailTables>
                </telerik:GridTableView>
            </DetailTables>
        </MasterTableView>
    </telerik:RadGrid>

     

    C# - code behind for binding data to Grid and Detail Tables programmatically

    private DataTable EmployeeMaster()
    {
        DataTable dt = new DataTable();
    
        dt.Columns.Add(new DataColumn("ID", typeof(int)));
        dt.Columns.Add(new DataColumn("Name", typeof(string)));
        dt.Columns.Add(new DataColumn("Role", typeof(string)));
        dt.Columns.Add(new DataColumn("Designation", typeof(string)));
    
        dt.PrimaryKey = new DataColumn[] { dt.Columns["ID"] };
    
        for (int i = 0; i < 3; i++)
        {
            int index = i + 1;
    
            DataRow row = dt.NewRow();
    
            row["ID"] = index;
            row["Name"] = "Name " + index;
            row["Role"] = "Role " + index;
            row["Designation"] = "Designation " + index;
                
            dt.Rows.Add(row);
        }
    
        return dt;
    }
    
    protected void RadGrid1_DetailTableDataBind(object sender, Telerik.Web.UI.GridDetailTableDataBindEventArgs e)
    {
        var nestedViewItem = e.DetailTableView.NamingContainer as GridNestedViewItem;
        var parentRow = nestedViewItem.ParentItem as GridDataItem;
        var employeeID = (int)parentRow.GetDataKeyValue("ID");
            
        e.DetailTableView.DataSource = EmployeeMaster().Select(string.Format("ID={0}", employeeID)).CopyToDataTable();
    }
    
    protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
    {
        if (!e.IsFromDetailTable)
            (sender as RadGrid).DataSource = EmployeeMaster();
    }

     

    Result

     

    See also

     

    Kind regards,
    Attila Antal
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top