[Solved] Need help in Hierarchy grid

[Prakash]

Hi All,

I need to create a Hierarchy grid to show the Employee Hierarchy with details.

for example: The grid should show the manager details initially and on clicking the manager row, The Team Leaders who are reporting to the manager should be listed and on clicking the team leader row, the grid should show the list of team members reporting to that Team leader and also tell me how to export the entire list to an excel.

Please give me an example for the above situations.

Employee class will look like

pulbic class Employee
{
     public int EmpId {set; get;}
     public string EmpName {set; get;}
     public string Designation {set; get;}
     public string Phone {set; get;}
     public string Address {set; get;}
     public ObservableCollection<Employee> TeamMembers { set; get; }
}

Thanks in advance,
Prakash.

[Vanya Pavlova]

Hello Prakash,

 


Please check the following online demos for further reference "GridView-Exporting",  "Hierarchy",  "Row Details".
If you need any further assistance please let me know!

Best wishes,
Vanya Pavlova
the Telerik team

[Prakash]

Hi Vanya Pavlova,

Thanks for your reply. I tried that example available in Hierarchy link and below is my sample implementation. but I'm able to see only first two levels whereas other levels are not shown.

The following is code:

 

 

public partial class HierarchialGridExample : UserControl

 

{

 

 

public HierarchialGridExample()

 

{

InitializeComponent();

 

 

this.HierarchicalGridView.ItemsSource = EmployeeList();

 

}

 

 

private ObservableCollection<Employee> EmployeeList()

 

{

 

 

ObservableCollection<Employee> ManagerList = new ObservableCollection<Employee>();

 

ManagerList.Add(

 

new Employee() { EmpId = "1", EmpName = "Manager - 1", Phone = "987654321", Designation = "Manager", Address = "3rd Cross st" });

 

ManagerList.Add(

 

new Employee() { EmpId = "2", EmpName = "Manager - 2", Phone = "987654321", Designation = "Manager", Address = "3rd Cross st" });

 

 

 

ObservableCollection<Employee> TeamLeaderList1 = new ObservableCollection<Employee>();

 

TeamLeaderList1.Add(

 

new Employee() { EmpId = "11", EmpName = "Team Leader - 1", Phone = "987654321", Designation = "Team Leader", Address="3rd Cross st" });

 

TeamLeaderList1.Add(

 

new Employee() { EmpId = "12", EmpName = "Team Leader - 2", Phone = "987654321", Designation = "Team Leader", Address = "3rd Cross st" });

 

 

 

 

ObservableCollection<Employee> TeamLeaderList2 = new ObservableCollection<Employee>();

 

TeamLeaderList2.Add(

 

new Employee() { EmpId = "13", EmpName = "Team Leader - 3", Phone = "987654321", Designation = "Team Leader", Address = "3rd Cross st" });

 

TeamLeaderList2.Add(

 

new Employee() { EmpId = "14", EmpName = "Team Leader - 4", Phone = "987654321", Designation = "Team Leader", Address = "3rd Cross st" });

 

 

 

ObservableCollection<Employee> Developer1 = new ObservableCollection<Employee>();

 

Developer1.Add(

 

new Employee() { EmpId = "21", EmpName = "Developer - 1", Phone = "987654321", Designation = "Developer", Address = "3rd Cross st" });

 

Developer1.Add(

 

new Employee() { EmpId = "22", EmpName = "Developer - 2", Phone = "987654321", Designation = "Developer", Address = "3rd Cross st" });

 

 

 

ObservableCollection<Employee> Developer2 = new ObservableCollection<Employee>();

 

Developer2.Add(

 

new Employee() { EmpId = "23", EmpName = "Developer - 3", Phone = "987654321", Designation = "Developer", Address = "3rd Cross st" });

 

Developer2.Add(

 

new Employee() { EmpId = "24", EmpName = "Developer - 4", Phone = "987654321", Designation = "Developer", Address = "3rd Cross st" });

 

 

 

ObservableCollection<Employee> Developer3 = new ObservableCollection<Employee>();

 

Developer3.Add(

 

new Employee() { EmpId = "25", EmpName = "Developer - 5", Phone = "987654321", Designation = "Developer", Address = "3rd Cross st" });

 

Developer3.Add(

 

new Employee() { EmpId = "26", EmpName = "Developer - 6", Phone = "987654321", Designation = "Developer", Address = "3rd Cross st" });

 

 

 

ObservableCollection<Employee> Developer4 = new ObservableCollection<Employee>();

 

Developer4.Add(

 

new Employee() { EmpId = "25", EmpName = "Developer - 5", Phone = "987654321", Designation = "Developer", Address = "3rd Cross st" });

 

Developer4.Add(

 

new Employee() { EmpId = "26", EmpName = "Developer - 6", Phone = "987654321", Designation = "Developer", Address = "3rd Cross st" });

 

ManagerList[0].TeamMembers = TeamLeaderList1;

ManagerList[1].TeamMembers = TeamLeaderList2;

TeamLeaderList1[0].TeamMembers = Developer1;

TeamLeaderList1[1].TeamMembers = Developer2;

TeamLeaderList2[0].TeamMembers = Developer3;

TeamLeaderList2[1].TeamMembers = Developer4;

 

 

return ManagerList;

 

}

}

 

 

public class Employee

 

{

 

 

    public string EmpId { set; get; }

 

 

 

    public string EmpName { set; get; }

 

 

 

    public string Designation { set; get; }

 

 

 

    public string Address { set; get; }

 

 

 

    public string Phone { set; get; }

 

 

 

    public ObservableCollection<Employee> TeamMembers { set; get; }

 

}

UI Code:

<Grid x:Name="LayoutRoot" Background="White">

 

 

 

 

<telerikGrid:RadGridView x:Name="HierarchicalGridView"

 

 

 

AutoGenerateColumns="False">

 

 

 

 

<telerikGrid:RadGridView.ChildTableDefinitions>

 

 

 

 

<telerikGrid:GridViewTableDefinition>

 

 

 

 

<telerikGrid:GridViewTableDefinition.Relation>

 

 

 

 

<telerikData:PropertyRelation ParentPropertyName="TeamMembers" />

 

 

 

 

</telerikGrid:GridViewTableDefinition.Relation>

 

 

 

 

</telerikGrid:GridViewTableDefinition>

 

 

 

 

</telerikGrid:RadGridView.ChildTableDefinitions>

 

 

 

 

<telerikGrid:RadGridView.Columns>

 

 

 

 

<telerikGrid:GridViewDataColumn DataMemberBinding="{Binding EmpId}"

 

 

 

Header="Employee Id" />

 

 

 

 

<telerikGrid:GridViewDataColumn DataMemberBinding="{Binding EmpName}"

 

 

 

Header="Employee Name" />

 

 

 

 

<telerikGrid:GridViewDataColumn DataMemberBinding="{Binding Designation}"

 

 

 

Header="Designation" />

 

 

 

 

<telerikGrid:GridViewDataColumn DataMemberBinding="{Binding Address}"

 

 

 

Header="Address" />

 

 

 

 

<telerikGrid:GridViewDataColumn DataMemberBinding="{Binding Phone}"

 

 

 

Header="Phone" />

 

 

 

 

</telerikGrid:RadGridView.Columns>

 

 

 

 

</telerikGrid:RadGridView>

 

 

 

 

</Grid>

 

 

 

 

But i'm getting only Manager row and Team leader row, whereas developer row is not shown and at the same time the hierarchy won't stops at developer level. it has further two levels.

Thanks,
Prakash.

 

 

[Vanya Pavlova]

Hi Prakash,

 

I strongly reccomend you to review our online documentation and the different cases for hierarchy. They are covered in a detail and you will be able to get a head-start with the hierarchies you may build with RadGridView/Silverlight.

Kind regards,
Vanya Pavlova
the Telerik team

[Prakash]

Hi Vanya Pavlova,

Thanks for your reply. I went with that option and the following is my changed code.
Please guide me whether I'm using correct option.

UI Code:

<Controls:RadGridView x:Name="radGridViewHierarchy" AutoGenerateColumns="False" ShowGroupPanel="False" >
    <Controls:RadGridView.FilterDescriptors>
        <telerikData:FilterDescriptor Member="ReportingTo" Operator="IsEqualTo" Value="0"/>
    </Controls:RadGridView.FilterDescriptors>
    <Controls:RadGridView.ChildTableDefinitions>
        <Controls:GridViewTableDefinition>
            <Controls:GridViewTableDefinition.Relation>
                <telerikData:TableRelation IsSelfReference="True">
                    <telerikData:TableRelation.FieldNames>
                        <telerikData:FieldDescriptorNamePair ParentFieldDescriptorName="EmpId" 
ChildFieldDescriptorName="ReportingTo"/>
                    </telerikData:TableRelation.FieldNames>
                </telerikData:TableRelation>
            </Controls:GridViewTableDefinition.Relation>
        </Controls:GridViewTableDefinition>
    </Controls:RadGridView.ChildTableDefinitions>
    <Controls:RadGridView.Columns>
        <Controls:GridViewDataColumn Width="Auto" Header="Employee Name">
            <Controls:GridViewColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding EmpName}" />
                </DataTemplate>
            </Controls:GridViewColumn.CellTemplate>
        </Controls:GridViewDataColumn>
        <Controls:GridViewDataColumn Width="Auto" Header="Employee Designation">
            <Controls:GridViewColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Designation}" />
                </DataTemplate>
            </Controls:GridViewColumn.CellTemplate>
        </Controls:GridViewDataColumn>
    </Controls:RadGridView.Columns>
</Controls:RadGridView>

Code to data source for the GridView:

ObservableCollection<Employee> EmpList = new ObservableCollection<Employee>();
EmpList.Add(new Employee() { EmpId = "1", EmpName = "Manager - 1", Designation = "Manager", ReportingTo = "0" });
EmpList.Add(new Employee() { EmpId = "2", EmpName = "Manager - 2", Designation = "Manager", ReportingTo = "0" });
EmpList.Add(new Employee() { EmpId = "11", EmpName = "Team Leader - 1", Designation = "Team Leader", ReportingTo = "1" });
EmpList.Add(new Employee() { EmpId = "12", EmpName = "Team Leader - 2", Designation = "Team Leader", ReportingTo = "1" });
EmpList.Add(new Employee() { EmpId = "13", EmpName = "Team Leader - 3", Designation = "Team Leader", ReportingTo = "2" });
EmpList.Add(new Employee() { EmpId = "14", EmpName = "Team Leader - 4", Designation = "Team Leader", ReportingTo = "2" });
EmpList.Add(new Employee() { EmpId = "21", EmpName = "Developer - 1", Designation = "Developer", ReportingTo = "11" });
EmpList.Add(new Employee() { EmpId = "22", EmpName = "Developer - 2", Designation = "Developer", ReportingTo = "11" });
EmpList.Add(new Employee() { EmpId = "23", EmpName = "Developer - 3", Designation = "Developer", ReportingTo = "12" });
EmpList.Add(new Employee() { EmpId = "24", EmpName = "Developer - 4", Designation = "Developer", ReportingTo = "12" });
EmpList.Add(new Employee() { EmpId = "25", EmpName = "Developer - 5", Designation = "Developer", ReportingTo = "13" });
EmpList.Add(new Employee() { EmpId = "26", EmpName = "Developer - 6", Designation = "Developer", ReportingTo = "13" });
EmpList.Add(new Employee() { EmpId = "25", EmpName = "Developer - 5", Designation = "Developer", ReportingTo = "14" });
EmpList.Add(new Employee() { EmpId = "26", EmpName = "Developer - 6", Designation = "Developer", ReportingTo = "14" });

radGridViewHierarchy..ItemsSource = EmpList;


Thanks,
Prakash.

[Vanya Pavlova]

Hello Prakash,

 

I am glad to see that you have used our online documentation to construct a meaningful hierrachy. We are constantly working on the improvement of our demos and docs in order to provide you with an useful information. 
Can you verify how this solution works for you? If this satisfies your personal requirements I will be glad if I can help you in case you have any additional questions related to RadGridView/Silverlight. 

All the best,
Vanya Pavlova
the Telerik team

[Prakash]

Hi Vanya Pavlova,

Thanks for immediate reply.

I have one more question, Initially I used a collection which does not have any parent to child relation.

First:
public class Employee
{
     public int EmpId {set; get;}
     public string EmpName {set; get;}
     public string Designation {set; get;}
     public string Phone {set; get;}
     public string Address {set; get;}
     public ObservableCollection<Employee> TeamMembers { set; get; } //This will have child records
}

Now I changed that to

Changed one:
public class Employee
{
        public string EmpId { set; get; }
        public string EmpName { set; get; }
        public string Designation { set; get; }
        public string Address { set; get; }
        public string Phone { set; get; }
        public string ReportingTo { set; get; } //this will hold the parent id value.
}

Here, I added ReportingTo field which is a relation field. so, my question is how to create hierarchy grid for the first employee type.

Thanks,
Prakash.

[Vanya Pavlova]

Hello Prakash,

 

In such way You may try to construct a collection as it was implemented in RadTreeListView/Getting Started section as the part of our docs, follow this link. You may use the same technique in a hierarchical RadGridView. 


Please let me know how this works for you!

Kind regards,
Vanya Pavlova
the Telerik team

[Prakash]

Hi Vanya Pavlova ,

I'm able to create the hierarchy grid using RadTreeListView.
I've used RadGridView to show the parent records and all child records shown using RadTreeListView. Since my parent record and child record won't share same set of columns. For example purpose I'm using the same here.

Now, I want to export the entire records both in RadGridView and RadTreeListView to Excel. I tried some options but it exports only RadGridView rows not RadTreeListView records. Pls help me in that.

UI Code:

<telerik:RadGridView x:Name="RadGridView1" AutoGenerateColumns="False">
            <telerik:RadGridView.Resources>
                <Style x:Key="GridViewToggleButtonColumnStyle" TargetType="telerik:GridViewCell">
                    <Setter Property="Padding" Value="0,0,0,0" />
                </Style>
            </telerik:RadGridView.Resources>
            <telerik:RadGridView.Columns>
                <telerik:GridViewToggleRowDetailsColumn CellStyle="{StaticResource GridViewToggleButtonColumnStyle}" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding EmpId}" Header="Employee Id" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding EmpName}" Header="Employee Name" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Phone}" Header="Phone" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Designation}" Header="Designation" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Address}" Header="Address" />
            </telerik:RadGridView.Columns>
            <telerik:RadGridView.RowDetailsTemplate>
                <DataTemplate>
                    <telerik:RadTreeListView x:Name="RadTreeListView1" AutoGenerateColumns="false" ItemsSource="{Binding TeamMembers}">
                        <telerik:RadTreeListView.ChildTableDefinitions>
                            <telerik:TreeListViewTableDefinition ItemsSource="{Binding TeamMembers}" />
                        </telerik:RadTreeListView.ChildTableDefinitions>
                        <telerik:RadTreeListView.Columns>
                            <telerik:GridViewDataColumn DataMemberBinding="{Binding EmpId}" Header="Employee Id" />
                            <telerik:GridViewDataColumn DataMemberBinding="{Binding EmpName}" Header="Employee Name" />
                            <telerik:GridViewDataColumn DataMemberBinding="{Binding Phone}" Header="Phone" />
                            <telerik:GridViewDataColumn DataMemberBinding="{Binding Designation}" Header="Designation" />
                            <telerik:GridViewDataColumn DataMemberBinding="{Binding Address}" Header="Address" />
                        </telerik:RadTreeListView.Columns>
                    </telerik:RadTreeListView>
                </DataTemplate>
            </telerik:RadGridView.RowDetailsTemplate>
        </telerik:RadGridView>
        <Button Content="Export Excel" x:Name="btnName" Height="30" Width="120" Click="Button_Click"/>

Code:

public partial class HierarchialEmployeeTree : UserControl
    {
        public HierarchialEmployeeTree()
        {
            InitializeComponent();
            HierarchialGridExample r = new HierarchialGridExample();
            RadGridView1.ItemsSource = EmployeeList();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            var content = "";
            var extension = "xls";
           
            var dialog = new SaveFileDialog()
            {
                DefaultExt = extension,
                Filter = String.Format("{1} files (*.{0})|*.{0}|All files (*.*)|*.*", extension, "Excel"),
                FilterIndex = 1
            };

            if (dialog.ShowDialog() == true)
            {
                using (var stream = dialog.OpenFile())
                {
                    content = RadGridView1.ToHtml(RadGridView1.Items, true, true);

                    var bytes = System.Text.Encoding.UTF8.GetBytes(content);
                    stream.Write(bytes, 0, bytes.Length);

                    stream.Close();
                }
            }
        }

        public ObservableCollection<Employee> EmployeeList()
        {
            ObservableCollection<Employee> ManagerList = new ObservableCollection<Employee>();
            ManagerList.Add(new Employee() { EmpId = "1", EmpName = "Manager - 1", Phone = "987654321", Designation = "Manager", Address = "3rd Cross st", ReportingTo = "0" });
            ManagerList.Add(new Employee() { EmpId = "2", EmpName = "Manager - 2", Phone = "987654321", Designation = "Manager", Address = "3rd Cross st", ReportingTo = "0" });

            ObservableCollection<Employee> TeamLeaderList1 = new ObservableCollection<Employee>();
            TeamLeaderList1.Add(new Employee() { EmpId = "11", EmpName = "Team Leader - 1", Phone = "987654321", Designation = "Team Leader", Address = "3rd Cross st", ReportingTo = "1" });
            TeamLeaderList1.Add(new Employee() { EmpId = "12", EmpName = "Team Leader - 2", Phone = "987654321", Designation = "Team Leader", Address = "3rd Cross st", ReportingTo = "1" });

            ObservableCollection<Employee> TeamLeaderList2 = new ObservableCollection<Employee>();
            TeamLeaderList2.Add(new Employee() { EmpId = "13", EmpName = "Team Leader - 3", Phone = "987654321", Designation = "Team Leader", Address = "3rd Cross st", ReportingTo = "2" });
            TeamLeaderList2.Add(new Employee() { EmpId = "14", EmpName = "Team Leader - 4", Phone = "987654321", Designation = "Team Leader", Address = "3rd Cross st", ReportingTo = "2" });

            ObservableCollection<Employee> Developer1 = new ObservableCollection<Employee>();
            Developer1.Add(new Employee() { EmpId = "21", EmpName = "Developer - 1", Phone = "987654321", Designation = "Developer", Address = "3rd Cross st", ReportingTo = "11" });
            Developer1.Add(new Employee() { EmpId = "22", EmpName = "Developer - 2", Phone = "987654321", Designation = "Developer", Address = "3rd Cross st", ReportingTo = "11" });

            ObservableCollection<Employee> Developer2 = new ObservableCollection<Employee>();
            Developer2.Add(new Employee() { EmpId = "23", EmpName = "Developer - 3", Phone = "987654321", Designation = "Developer", Address = "3rd Cross st", ReportingTo = "12" });
            Developer2.Add(new Employee() { EmpId = "24", EmpName = "Developer - 4", Phone = "987654321", Designation = "Developer", Address = "3rd Cross st", ReportingTo = "12" });

            ObservableCollection<Employee> Developer3 = new ObservableCollection<Employee>();
            Developer3.Add(new Employee() { EmpId = "25", EmpName = "Developer - 5", Phone = "987654321", Designation = "Developer", Address = "3rd Cross st", ReportingTo = "13" });
            Developer3.Add(new Employee() { EmpId = "26", EmpName = "Developer - 6", Phone = "987654321", Designation = "Developer", Address = "3rd Cross st", ReportingTo = "13" });

            ObservableCollection<Employee> Developer4 = new ObservableCollection<Employee>();
            Developer4.Add(new Employee() { EmpId = "25", EmpName = "Developer - 5", Phone = "987654321", Designation = "Developer", Address = "3rd Cross st", ReportingTo = "14" });
            Developer4.Add(new Employee() { EmpId = "26", EmpName = "Developer - 6", Phone = "987654321", Designation = "Developer", Address = "3rd Cross st", ReportingTo = "14" });

            ManagerList[0].TeamMembers = TeamLeaderList1;
            ManagerList[1].TeamMembers = TeamLeaderList2;

            TeamLeaderList1[0].TeamMembers = Developer1;
            TeamLeaderList1[1].TeamMembers = Developer2;

            TeamLeaderList2[0].TeamMembers = Developer3;
            TeamLeaderList2[1].TeamMembers = Developer4;

            return ManagerList;
        }

       
    }

    public class Employee
    {
        public string EmpId { set; get; }
        public string EmpName { set; get; }
        public string Designation { set; get; }
        public string Address { set; get; }
        public string Phone { set; get; }
        public string ReportingTo { set; get; }
        public ObservableCollection<Employee> TeamMembers { set; get; }
    }

Thanks,
Prakash.

[Vanya Pavlova]

Hello Prakash,

 
If you want to export all rows in RadTreeListView you may call ExpandAllHierarchyItems() before exporting.

Regards,
Vanya Pavlova
the Telerik team