Create TreeView Using GridControl | DevExpress WPF | Saatody | Amit Padhiyar

Today i will create Advance TreeView using DevExpress GridControl Component. This code for WPF. So, It may contains XAML or Pure C# programmatically code. Actually GridControl contains many features like drag and drop, icons, adding and deleting rows. And main feature is it supports multiple columns. There can be many types of  GridControl for example TreeView, CardView, And TableView.

But today, I will talk about TreeView Only. Here we needed two more class(es). These will custom class(es) as role of "Model" and "Data". The Data class contains property of GridControls or you can say simply as a columns. And, The Model class contains ObservableCollection of Data class. GridControl binding with  ObservableCollection's object using ItemsSource.

See the below simple example.

XAML

<dxg:GridControl Name="GridControl" AutoGenerateColumns="AddNew">
    <dxg:GridControl.View>
        <dxg:TreeListView/>
    </dxg:GridControl.View>
</dxg:GridControl>

C#

namespace DevGridControl
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DemoModel DM = new DemoModel();
            GridControl.ItemsSource = DM.Data;

            DM.Data.Add(new DemoData { Name = "A", ID = 1, PID = 0 });
            DM.Data.Add(new DemoData { Name = "B", ID = 2, PID = 1 });
            DM.Data.Add(new DemoData { Name = "C", ID = 3, PID = 0 });
            DM.Data.Add(new DemoData { Name = "D", ID = 4, PID = 0 });
            DM.Data.Add(new DemoData { Name = "E", ID = 5, PID = 0 });
            DM.Data.Add(new DemoData { Name = "F", ID = 6, PID = 0 });
            DM.Data.Add(new DemoData { Name = "G", ID = 7, PID = 0 });
            DM.Data.Add(new DemoData { Name = "H", ID = 8, PID = 0 });
        }
    }
    public class DemoData
    {
        public string Name { set; get; }
        public int ID { set; get; }
        public int PID { set; get; }
    }
    public class DemoModel
    {
        public ObservableCollection<DemoData> Data { set; get; }
        public DemoModel()
        {
            Data = new ObservableCollection<DemoData>();
        }
    }
}

The given code output will be simple with auto created columns name. This happens due to AutoGenerateColumns. Now we will try to create hierarchy using ID and PID. Here TreeListView has two useful properties that can actually make hierarchy levels. KeyFieldName and ParentFieldName. KeyFieldName = "ID" and ParentFieldName = "PID".

XAML

<dxg:GridControl Name="GridControl" AutoGenerateColumns="AddNew">
    <dxg:GridControl.View>
        <dxg:TreeListView KeyFieldName="ID" ParentFieldName="PID"/>
    </dxg:GridControl.View>
</dxg:GridControl>

Now Advance TreeView is successfully created but now we are trying to hide others columns. The columns hide doesn't mean that the columns can't store data. Actually columns hide but data will be in their memory. with this we are also trying to hide columns titles.

<dxg:GridControl Name="GridControl" AutoGenerateColumns="AddNew" ShowBorder="False">
    <dxg:GridControl.Columns>
        <dxg:GridColumn FieldName="Name"/>
        <dxg:GridColumn FieldName="ID" Visible="False"/>
        <dxg:GridColumn FieldName="PID" Visible="False"/>
    </dxg:GridControl.Columns>
    <dxg:GridControl.View>
        <dxg:TreeListView KeyFieldName="ID" ParentFieldName="PID" ShowColumnHeaders="False" ShowIndicator="False" ShowHorizontalLines="False" ShowVerticalLines="False" AutoWidth="True"/>
    </dxg:GridControl.View>
</dxg:GridControl>