TreeView in DataGridView - The Way of 10Tec iGrid
by Igor Katenov, the lead developer at 10Tec
Common tabular data can be displayed with the standard WinForms DataGridView control without any problems. But in some cases the data rows are related to each other as parent-child, and we need to display these relationships in the DataGridView control using a handy tree-like representation:
The grid above looks like TreeView in DataGridView control. It is not only a static visual representation: the nodes in the first column are clickable like in a real TreeView control so you can collapse/expand rows.
If you need the functionality like this in your application, you can go two different ways. First, you can try to extend the standard DataGridView to add TreeView functions to it. Second, you can use another control like our 10Tec WinForms grid that provides you with both DataGridView and TreeView features. Let's look at both approaches more carefully.
WinForms DataGridView with TreeView features
To implementing TreeView in DataGridView, we can use the standard .NET DataGridView control as the basis and extend its look and functionality as if we incorporated TreeView into one of its columns. We can derive from DataGridView and add the required tree functionality to it. Another option is to write a helper class we could attach to an existing DataGridView on a form so it will start to act like a TreeView with columns.
A good example of the approach of the first type is the TreeGridView control developed by Mark Rideout. We discuss some benefits and drawbacks of this control in greater detail in another article on this site, TreeGridView for C#/VB.NET. Unfortunately, this control is no longer supported since 2006.
A control of another type that resembles DataGridView with TreeView is TreeViewAdv written by Andrey Gliznetsov:
The source code is hosted on SourceForge and you can easily find it there, but we recommend that you read this CodeProject article dedicated to the control. The article explains the model-view ideology of the control and gives you some usage samples; you will also find a lot of useful user comments under the main article body. Note that TreeViewAdv is not a descendant of DataGridView (it is based on System.Windows.Forms.Control), but it looks similar to DataGridView and you should definitely consider using this control instead of DataGridView if you were going to display unbound hierarchical tabular data.
We could not find a lot of good and complete open-source solutions that implement TreeView functionality inside DataGridView, but you can try to do that by yourself by googling such queries as treeview datagridview or datagridview tree. Just take into account one more thing while choosing the right DataGridView with TreeView functionality for your project. We are talking about an advanced replacement for the standard .NET DataGridView that implements data binding, but not all TreeView-like data grid controls support this. Thus, you will not be able to easily upload your data into such a control and moreover, you may lose such standard grid functionality like sorting when using a TrewView in DataGridView solution.
DataGridView Tree Column: the iGrid.NET way
Perhaps, after reading the first part of the article you have already concluded that our WinForms grid can also act like a combination of the TreeView and DataGridView controls. And what is more important, we designed the control keeping in mind the requirements of the real world, so you will not encounter the problems like the aforementioned ones. Just let us highlight some major benefits of iGrid used as a DataGridView tree alternative.
As we write in our article Why is DataGridView Slow at Scrolling, Rendering, Filtering and Populating?, our iGrid is very fast if we compare it to the WinForms DataGridView. The more rows you have, the better the effect, and we have this excellent performance due to the non-traditional design of our .NET grid control.
The fact is that we do not use objects internally to store the cell data. Moreover, we developed a special memory manager for the iGrid cells based on pages and native .NET pointer arithmetic, so our control works very fast with 10,000 or even 100,000+ rows. Though you access cells, columns, rows through the prism of a handy object set, they are not inside the control. This allows iGrid to be one of the fastest grids for WinForms.
The same object-free approach is used to setup a TreeView-like grid. In fact, we do not use any collections of nested objects for that (like TreeNodeCollection in the standard TreeView). Instead, we operate so-called row levels that define the hierarchical level for every row. Here is a C# DataGridView TreeView example for iGrid in which we create one root node and one more node nested into it:
// Var to reference the last added row
iGRow myRow;
// Create one column for our tree
iGrid1.Cols.Add("Tree");
// Add the first root node
myRow = iGrid1.Rows.Add();
myRow.TreeButton = iGTreeButtonState.Visible;
myRow.Cells[0].Value = "Root node";
// Add one child node to the root
myRow = iGrid1.Rows.Add();
myRow.Level = 1;
myRow.TreeButton = iGTreeButtonState.Hidden;
myRow.Cells[0].Value = "Child node";
// Show tree lines for better structure indication
iGrid1.TreeLines.Visible = true;
// Auto-size the first column to see node text without clipping
iGrid1.Cols[0].AutoWidth();And the accompanying screenshot of the result:
As you can see, you can naturally perform such grid-specific tasks as column autosizing for the tree column. All other iGrid features - including multi-column sort, incremental search, etc. - are also available for an iGrid with a tree column.
If you have an ADO.NET data source like DataTable or DataReader in which one column stores row level values, you can populate iGrid with these data and setup a tree column inside it in one call (!) using this method:
public void FillWithData(
object dataSource,
bool useCurColSet,
string rowKeyCol,
bool addRowKeyCol,
string rowLevelCol,
bool addRowLevelCol,
bool addTreeButtons
)To find out more about other useful iGrid features when it emulates TreeView in DataGridView, move to the product home page using the link below: