TreeGridView for C#/VB.NET
by Igor Katenov, the lead developer at 10Tec
A TreeGridView control is a grid control that allows you to represent data in a hierarchical view. In this article we would like to talk about TreeGridView controls for WinForms .NET. We will describe some free solutions with their advantages and disadvantages, and briefly describe 10Tec’s iGrid.NET, a TreeGridView for C# or VB.NET applications:
TreeGridViews based on WinForms DataGridView
The very first idea that can came into our mind if we need to implement a TreeGridView in C# or VB.NET is to inherit the standard .NET DataGridView control and extend its functionality, then compile the result as a new control. One of the well-known free solutions of this type is Mark Rideout's TreeGridView:
A big class of problems for such solutions is the DataGridView control itself. We all know that this control becomes noticeably slow if we add a significant amount of records to it, and you can even find comments about that in Mark's blog. The object constructs used to provide you with a friendly way to manipulate hierarchical rows in DataGridView may also add new performance issues. As a C# example, here is a typical object code in which we add one root row and a child row for it in the TreeGridView developed by Mike Rideout:
TreeGridNode node = treeGridView1.Nodes.Add(null, "Using DataView filter when binding to DataGridView", "tab", @"10/19/2005 1:02 AM");
node.ImageIndex = 0;
node.DefaultCellStyle.Font = boldFont;
node = node.Nodes.Add(null, "Re: Using DataView filter when binding to DataGridView", "tab", @"10/19/2005 1:02 AM");
node.ImageIndex = 1;DataGridView also has several known issues related to hiding its columns and rows. For instance, its rows may be still visible if you set their Visible property to False. If this feature is exploited to collapse/expand rows in a TreeGridView control, you automatically inherit all these issues.
One related interesting thing concerning this TreeGridView is the following. If we look inside its source code, we'll see that Mark does not use the DataGridViewRow.Visible property to implement the functionality of the tree buttons. Perhaps, to avoid the issue we have just mentioned. But he uses row addition/removal for this, and this becomes extremely slow if a node has several hundred nested rows. If we modify the code above to add 500 rows under the first node:
TreeGridNode node = treeGridView1.Nodes.Add(null, "Using DataView filter when binding to DataGridView", "tab", @"10/19/2005 1:02 AM");
node.ImageIndex = 0;
node.DefaultCellStyle.Font = boldFont;
for (int i = 0; i < 500; i++)
{
TreeGridNode node2;
node2 = node.Nodes.Add(null, "Re: Using DataView filter when binding to DataGridView", "tab", @"10/19/2005 1:02 AM");
node2.ImageIndex = 1;
}, then launch it and click the plus/minus button in the first row of our tree grid, we can wait about a minute on an average client pc until we see the first node expanded.
If you plan to use this or a similar C# or VB.NET TreeGridView solution, check whether the candidate implements data binding. You may need that at some point when building your application, but not all authors keep in mind this. You can find a clone of Mike Rideout's TreeGridView with data source support, but note that the original version does not implement data binding.
Unfortunately, this TreeGridView control for C#/VB.NET applications has not been updated since 2006 and is no longer supported. It means that nobody but you will fix new bugs if your customers reveal them while working with this component in your real-world applications. This concerns almost all similar open-source developments, which are provided "as is" without any warranties. So be ready to spend hours of your personal time trying to understand how the component works and debug it.
iGrid.NET as a TreeGridView control
10Tec WinForms grid control, iGrid.NET, is a classic grid control first of all. But it provides you with a built-in feature to convert one of its column into a tree column, so iGrid becomes a first-class TreeGridView control for your VB.NET or C# applications.
If we briefly compare it to the free TreeGridView solutions mentioned above, we can say the following:
- iGrid is very fast (it is not based on DataGridView, has its own internal memory manager to optimize row insertion/deletion and its drawing code is highly optimized).
- It provides you with the ability to edit its cells even in TreeGridView mode and use the rich event model to control this process.
- The control allows you to sort its columns by various sort criteria including custom one, preserving the hierarchy levels in the tree structure.
- In TreeGridView mode, you can also use all other formatting capabilities like format strings, dynamic cell contents, etc.
- iGrid can be used to display data from ADO.NET data sources.
We do not want to duplicate other great features and benefits of iGrid here as you can discover them in the corresponding section of this website, we just would like to illustrate the last point from the list above.
The TreeGridView concept of iGrid is based on the notion of row levels. A row’s level is an integer number that indicates the level of nesting. The rows of the root level have the level of 0, their children rows have the level of 1, and so on. If your data source contains information about the hierarchical relationships between rows in the form of row levels, iGrid can use this information and you can upload your hierarchical data into iGrid with one method call.
To demonstrate this, let’s create the following test DataTable in C#:
DataTable table = new DataTable();
table.Columns.Add("RowLevel", typeof(int));
table.Columns.Add("Title", typeof(string));
table.Columns.Add("Data1", typeof(string));
table.Columns.Add("Data2", typeof(string));
table.Rows.Add(0, "Node 1", null, null);
table.Rows.Add(1, "Node 1.1", "Data 1.1", "Text 1.1");
table.Rows.Add(1, "Node 1.2", "Data 1.2", "Text 1.2");
table.Rows.Add(1, "Node 1.3", "Data 1.3", "Text 1.3");
table.Rows.Add(0, "Node 2", null, "Node 2 details");
table.Rows.Add(1, "Node 2.1", "Data 2.1", "Text 2.1");
table.Rows.Add(2, "Node 2.1.1", "Data 2.1.1", "Text 2.1.1");To display these data rows as a multi-column tree in iGrid, we need just one call:
iGrid1.FillWithData(table, false, null, "RowLevel");(the last parameter is the key of the column that stores the row level data).
The result is on the following screenshot:
Frankly speaking, we got the TreeGridView depicted above after issuing one more method that automatically adjusts the width of all columns, iGrid1.Cols.AutoWidth(), but this was just an extra call to enhance the visual representation of our data.
To wrap up this short overview of C#/VB.NET TreeGridView solutions for WinForms, we can just add that iGrid.NET is a control constantly supported and developed by 10Tec Company. The link below will redirect you to the home page of iGrid on this website, from which you can find out more about the features available in your solutions if you use iGrid as a TreeGridView control.