Creating Treeview using DataGrid – (Component One)

In my previous posts I have explained how you can create TreeView look and feel in DataGrid using Cell Factory in Component One C1FlexGrid.  In that blog, I also mentioned it is round about way of doing it and there is a better way to do it. In this blog, we will look at the correct way to create TreeView look and feel in DataGrid. Before we go there, why are we attempting to create tree view in data grid? There are couple of reasons for that;

1. If your collection is large and each node have large number of children underneath it. Tree view takes time to load the children in memory when you expand for the first time. Because of that, if you have lot of nodes with lot of children under the nodes, your performance will suffer so switch to Data Grid which enjoys full virtualization. Since it has full virtualization expand and collapse in Data Grid is fast.

2. If you would like to get multi column look and feel with column heading.

Lets jump into the example, Here is what we are trying to achieve

image

We would like to get a tree view look with first column a check box and second column the description of the mode. In the above screen shot you can see, it looks like tree view with expand and collapse icons and also with proper indentation when expanded.

 

First look at the model; Nothing special here, it has IsChecked boolean which is the first column in our display and SourceDescription is the second column in the grid. In this example I defined children as observable collection. If you have large number of children under each node, I would recommend you to read this blog on when to use Observable collection and when not to use it.

public class Person:INotifyPropertyChanged
{
    public string ID { get; set; }
    public string Name { get; set; }
    public bool IsChecked { get; set; }
    public ObservableCollection<Person> Children { get; set; }
    public Person()
    {
        Children = new ObservableCollection<Person>();
        IsChecked = false;
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(string info)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(info));
        }
    }
}

Lets load the data

private void LoadPeople()
{
     _people = new List<Person>();
     for (int i = 0; i < 10; i++)
     {
         Person ppl= new Person() { ID = i.ToString(), Name = string.Format("Parent{0}",i.ToString()), IsChecked = false };
         if (i % 3 == 0)
         {
             for (int j = 0; j < 1000; j++)
             {
                 Person child = new Person() { ID = j.ToString(), Name = string.Format("Child{0}", j.ToString()) };
                 ppl.Children.Add(child);
             }
         }
        _people.Add(ppl);
     }
 }

Now lets look at the XAML

<c1:C1FlexGrid x:Name="_flex" HeadersVisibility="None" AutoGenerateColumns="False" ChildItemsPath="Children">
     <c1:C1FlexGrid.Columns>
         <c1:Column Binding="{Binding IsChecked, Mode=TwoWay}"/>
         <c1:Column Binding="{Binding Name}"/>
     </c1:C1FlexGrid.Columns>
</c1:C1FlexGrid>

As simple as that, only thing new in here is ‘ChildItemsPath’. It is the new property added to C1FlexGrid to mimic the tree view look and feel. So this big blog is all about this property.With this property, you do not require the different classes and all crazy event mechanisms.

If you do not want to have multiple columns like the one I did and want to have true one column look, use cell template to stack the items in one column and you will get the exact tree view.

By default, when you use the grid like this, it will put column and row header around the control to make it show as grid. To turn off the grid controls around it, make sure to use HeaderVisibility=”None”

 
Advertisements

6 thoughts on “Creating Treeview using DataGrid – (Component One)

  1. I too use the FlexGrid as a Treeview. I have been using the CellFactory method, but I am going to rewrite using the ChildItemsPath. I didn’t know about this one until I saw your blog.

    By the way, the code gets cut off in the above sample so I can’t actually see the ChildItemsPath in the XAML.

    Greg

  2. I tried creating this as instructed, but I get a compile time error saying the ChildItemsPath property does not exist. I have the latest prerelease from C1.

    Any idea what I am doing wrong?

    Greg

  3. 4.0.20111.145

    This is the latest I could find at prerelease.componentone.com.

    If you have a later version, could you email it to me? (Yes, I have a full license!)

    I met the C1 guys at the TechEd last week. I won an Ineta award for the use of the FlexGrid and the RTB from C1 and they were pretty happy about it. It was pretty cool meeting them.

    And by the way, I am here in Dallas too. Go Mavs!

    Greg

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s