How to make FlexGrid work like a TreeView

Standard data binding maps a flat row-and-column layout directly to a grid UI. When you have a structured dataset (such as an organizational chart or hierarchical menus containing parent-child relations), displaying it in a nested tree structure requires manual manipulation. Bound tables cannot directly display collapsible tree nodes natively out of the box without processing.

Solution 
To convert a flat DataTable into a collapsible hierarchy, you must populate the grid unbound using the AddNode method. This allows you to explicitly define the indentation level for each inserted item.

First, configure your grid columns manually and determine the structural level from your row metadata (such as an integer level field). Iterate through your dataset and pass the calculated level into Rows.AddNode(level). This creates a special node row object capable of expanding and collapsing. Finally, assign the Tree.Column property to the index of the column that should host the tree outlines, toggle buttons, and connecting lines.

// Reset grid bounds and define column headers manually
flexGrid.Rows.Count = flexGrid.Rows.Fixed;
flexGrid.Cols.Count = flexGrid.Cols.Fixed + 2;

flexGrid.Cols[1].Name = flexGrid.Cols[1].Caption = "Name";
flexGrid.Cols[2].Name = flexGrid.Cols[2].Caption = "Code";

foreach (DataRow row in data.Rows)
{
    // Determine tree depth level from data field (e.g., Level 1 -> Index 0)
    int level = int.Parse(row["RowLevel"].ToString()) - 1;
    
    // Add the row as a tree node at the calculated depth
    var node = flexGrid.Rows.AddNode(level);
    
    // Assign cell values to the newly created node row
    node.Row["Name"] = row["ItemName"];
    node.Row["Code"] = row["ItemCode"];
}

// Specify which column displays the expand/collapse tree symbols
flexGrid.Tree.Column = 1;