Problem with nested hierarchy in gridView

[Richard]

Hi

I posted that as a support ticket, but if you have an answer for me, feel frre to give it, thank you very much. I'll paste the answer form the support.


 

I am testing your product. I am trying to make a nested hierarchy inside a radGridView. My code is inspired from both the Getting started documentation and an example you gave about nested hierarchy. Please, see the attached project.

 

My goal is to show a list of Divisions in a gridView, each division has teams, and each team has some employees.

 

I have an Employee class:

 

    public class Employee

    {

        public string FirstName

        {

            get;

            set;

        }

        public string LastName

        {

            get;

            set;

        }

        public int Age

        {

            get;

            set;

        }

        public bool Married

        {

            get;

            set;

        }

 

    }

 

 

A team class who has a collection of employees:

 

public class Team

    {

        private ObservableCollection<Employee> _empl = new ObservableCollection<Employee>();

 

        public ObservableCollection<Employee> Empl

        {

            get

            { return _empl; }

 

            set

            { _empl = value; }

        }

 

 

        public int Ident

        {

            get;

            set;

        }

        public string Nom

        {

            get;

            set;

        }

        public int Place

        {

            get;

            set;

        }

 

    }

 

 

A division class who has a list of teams:

    public class Division

    {

        public int Id

        {

            get;

            set;

        }

        public string Name

        {

            get;

            set;

        }

        public List<Team> Teams

        {

            get;

            set;

        }

 

    }

 

And a DivisionService class, who creates a collection of divisions, populating each division with some teams and some teams with some employees. Here is an excerpt of the class:

 

   public class DivisionsService

    {

        public static ObservableCollection<Division> GetDivisions()

        {

ObservableCollection<Division> divisions = new ObservableCollection<Division>();

            Division dA = new Division();

            dA.Name = "Division A";

            dA.Id = 1;

            dA.Teams = new List<Team>();

            Team team1 = new Team();

            team1.Ident = 1;

            team1.Nom = "Team I";

            team1.Place = 1;

            Employee emp01 = new Employee();

            emp01.FirstName = "Maria";

            emp01.LastName = "Anders";

            emp01.Married = true;

            emp01.Age = 24;

            team1.Empl.Add(emp01);

            Employee emp02 = new Employee();

            emp02.FirstName = "Klodia";

            emp02.LastName = "Choufleur";

            emp02.Married = false;

            emp02.Age = 28;

            team1.Empl.Add(emp02);

            dA.Teams.Add(team1);

 

            Team team2 = new Team();

            team2.Ident = 2;

            team2.Nom = "Team II";

            team2.Place = 2;

            Employee emp03 = new Employee();

            emp03.FirstName = "Jean";

            emp03.LastName = "Bon";

            emp03.Married = true;

            emp03.Age = 44;

            team2.Empl.Add(emp03);

 

            dA.Teams.Add(team2);

 

          (code here)

           

           return divisions;

        }

    }

 

 

The XAML creates the gridview and the data template:

 

<Window x:Class="TestRadGridView.MainWindow"

                           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

                           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

                           xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

                           Title="MainWindow" Height="350" Width="525">

             <Grid>

        <telerik:RadGridView x:Name="HierarchicalGridView"

                             AutoGenerateColumns="False"

                             MinHeight="386">

 

 

 

            <telerik:RadGridView.Columns>

                <telerik:GridViewDataColumn DataMemberBinding="{Binding Id}"

                                       Header="Id" />

                <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"

                                       Header="Name" />

            </telerik:RadGridView.Columns>

 

            <telerik:RadGridView.HierarchyChildTemplate>

                <DataTemplate>

                    <telerik:RadGridView

                        Name="teamGrid"

                        ShowGroupPanel="False"

                        AutoGenerateColumns="False">

                        <telerik:RadGridView.Columns>

                            <telerik:GridViewDataColumn

                                Header="Id"

                                DataMemberBinding="{Binding Ident}"/>

                            <telerik:GridViewDataColumn

                                Header="Nom"

                                DataMemberBinding="{Binding Nom}"/>

                            <telerik:GridViewDataColumn

                                Header="Place"

                                DataMemberBinding="{Binding Place}"/>

                        </telerik:RadGridView.Columns>

                        <telerik:RadGridView.HierarchyChildTemplate>

                            <DataTemplate>

                                <telerik:RadGridView

                                    Name="employeesGrid"

                                    ShowGroupPanel="False">

                                </telerik:RadGridView>

                            </DataTemplate>

                        </telerik:RadGridView.HierarchyChildTemplate>

                    </telerik:RadGridView>

                </DataTemplate>

            </telerik:RadGridView.HierarchyChildTemplate>

 

        </telerik:RadGridView>    

    </Grid>

</Window>

 

 

And the code behind the data binding and the relations:

 

       public MainWindow()

        {

            InitializeComponent();

 

            GridViewTableDefinition TeamsTableDefinition = new GridViewTableDefinition();

            TeamsTableDefinition.Relation = new PropertyRelation("Teams");

            this.HierarchicalGridView.TableDefinition.ChildTableDefinitions.Add(TeamsTableDefinition);

 

            GridViewTableDefinition emplTableDefinition = new GridViewTableDefinition();

            emplTableDefinition.Relation = new PropertyRelation("empl");

            TeamsTableDefinition.ChildTableDefinitions.Add(emplTableDefinition);

 

 

            this.HierarchicalGridView.ItemsSource = DivisionsService.GetDivisions();

 

        }

 

 

So, it does not work: I see the divisions, but there are no teams (and of course I can’t see is there are employees in the teams).

 

If I delete, in the XAML code, the data template, things are a little better: I see Teams in the divisions, but I do not see Employees in teams. Anyway, I need the data template.

 

So, what I did wrong?

 

 

Could-you too, please, say how to access a selected item in a nested grid? Thank you again.

 

Cordially

 

Richard

[Maya]

Hello Richard,

You may define everything in xaml in this case without the need of setting the ChildTableDefinitions in the code-behind. The DataContext of each child grid is the parent item. As this parent item has a property - a child collection - you may directly set the source of this child grid:

<telerik:RadGridView x:Name="HierarchicalGridView"
                     AutoGenerateColumns="False"
                     MinHeight="386">
    <telerik:RadGridView.Columns>
        <telerik:GridViewDataColumn DataMemberBinding="{Binding Id}"
                                    Header="Id" />
        <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"
                                    Header="Name" />
    </telerik:RadGridView.Columns>
    <telerik:RadGridView.HierarchyChildTemplate>
        <DataTemplate>
            <telerik:RadGridView
                Name="teamGrid"
                ShowGroupPanel="False"
                ItemsSource="{Binding Teams}"
                AutoGenerateColumns="False">
                <telerik:RadGridView.ChildTableDefinitions>
                    <telerik:GridViewTableDefinition />
                </telerik:RadGridView.ChildTableDefinitions>
                <telerik:RadGridView.Columns>
                    <telerik:GridViewDataColumn
                        Header="Id"
                        DataMemberBinding="{Binding Ident}"/>
                    <telerik:GridViewDataColumn
                        Header="Nom"
                        DataMemberBinding="{Binding Nom}"/>
                    <telerik:GridViewDataColumn
                        Header="Place"
                        DataMemberBinding="{Binding Place}"/>
                </telerik:RadGridView.Columns>
                <telerik:RadGridView.HierarchyChildTemplate>
                    <DataTemplate>
                        <telerik:RadGridView
                            ItemsSource="{Binding Empl}"
                            Name="employeesGrid"
                            ShowGroupPanel="False">
                        </telerik:RadGridView>
                    </DataTemplate>
                </telerik:RadGridView.HierarchyChildTemplate>
            </telerik:RadGridView>
        </DataTemplate>
    </telerik:RadGridView.HierarchyChildTemplate>
</telerik:RadGridView>

On a side note, the property defined in the second child definition is not property spelled - empl -> need to be Empl. That is why when you remove the templates, you are not able to see the data for the innermost grid.
 

Greetings,
Maya
the Telerik team

[Richard]

Hello Maya!


Well, maybe it is something very simple and my question is stupid, but… I compiled the sample project and I do not see the children tables. What I am missing?

 

Thanks for your help

 

Richard

[Maya]

Hello Richard,

It is my mistake - on commenting the definitions of the child templates in the code-behind, I defined the one for the innermost grid, but forgot to add the one for the parent one. The lines you need to add are:

<telerik:RadGridView x:Name="HierarchicalGridView"
                             AutoGenerateColumns="False"
                             MinHeight="386">
            <telerik:RadGridView.ChildTableDefinitions>
                <telerik:GridViewTableDefinition />
            </telerik:RadGridView.ChildTableDefinitions>
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Id}"
                                            Header="Id" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"
                                            Header="Name" />
            </telerik:RadGridView.Columns>
                          ..............................................
</telerik:RadGridView>

 
 

All the best,
Maya
the Telerik team

[Richard]

Thanks a lot, Maya :) !!!

For my additional question, could you answer? How to access by C# to the selected item in a child gridview? Or to set it by code?

Thanks for your help!

Richard

[Maya]

Hello Richard,

You may handle the SelectionChanged event of the outer RadGridView. This event will be fired for each of the nested grids and you will be able to get the selected item for each of them:

<telerik:RadGridView x:Name="HierarchicalGridView"
                             AutoGenerateColumns="False"
                             SelectionChanged="HierarchicalGridView_SelectionChanged"
                             MinHeight="386">

Regards,
Maya
the Telerik team

[Richard]

Thanks a lot, Maya :) !

[Richard]

Hi again

Well, in the same project, I tried:

private void HierarchicalGridView_SelectionChanged(object sender, SelectionChangeEventArgs e)
  {
      Division division = HierarchicalGridView.SelectedItem as Division;
      Team team = teamGrid.SelectedItem as Division;
  }

With only the line "Division division = HierarchicalGridView.SelectedItem as Division;", it works, but it can't compile with the line "Team team = teamGrid.SelectedItem as Division;", as teamGrid is unknown. Could you, please, show me the proper way to do it?

Thank you
Richard

[Maya]

Hello Richard,

Indeed, the child grid will not be available in the code-behind through its name as it is defined in a DataTemplate. You need to find the corresponding row for a particular row, then using ChildrenOfType<T>() method to get the child GridViewDataControl and find its SelectedItem.
May you clarify a bit what is the exact behavior that you want to get ? 
 

Best wishes,
Maya
the Telerik team

[Richard]

Thanks for your help, Maya. Let’s say I select a Team_A in a Division_1, I would like to get the object Team_1 in a Team variable.

[Maya]

Hi Richard,

You may handle the SelectionChanged event as mentioned previously. Once you click on an item in Teams-grid, the last item in AddedItems collection from the argument will be the one you want to save. So, you may do something like:

Player selectedPlayer;
    private void clubsGrid_SelectionChanged(object sender, SelectionChangeEventArgs e)
    {
        if (e.AddedItems.LastOrDefault() is Player)
        {
            selectedPlayer = e.AddedItems.LastOrDefault() as Player;
        }
    }

 

Kind regards,
Maya
the Telerik team

[Richard]

Oh, AddedItem is about a list of selected items? I did not understand that, when I read the name of the property, I was thinking it tracked the list of items added to the table since last selection. Ok, this should work, thanks again, Maya, for your help and patience.

 

Let me buy you a drink if you come in Paris ;)

 

Richard