Hierarchical Nested Structure with C1FlexGrid

C1Flexgrid for WPF provides lot of features including the option to Group the data. However, it lacks the support for Hierarchical structure. Hierarchical display provides the ability to present the master data to users, such that the related detail data can be viewed in the same grid with a single mouse click. End users can expand and collapse the related row bands using a TreeView-like interface. In this blog, we manually handle the creation of Master Detail structure and use C1Flexgrid as nested grids to display the expanded details for Master row.

Define C1Flexgrid Structure

Even though we are going to use bound C1Flexgrid, we have to insert an unbound column which would be used to display the expand/collapse icon.

<c1:C1FlexGrid Name="c1Flexgrid1">  
 <c1:C1FlexGrid.Columns>  
   <c1:Column Width="20"  IsReadOnly="True"/>  
 </c1:C1FlexGrid.Columns>  
</c1:C1FlexGrid>  

Basic logic behind this structure is to insert hidden unbound row for each bound row. Based on the child rows available for the bound rows, we will show the expand/collpase icon on the first column (unbound column added in xaml).

for (int i = c1Flexgrid1.Rows.Count - 1; i >= 0; i = i - 1)  
{  
  C1.WPF.FlexGrid.Row rw = new C1.WPF.FlexGrid.Row();  
  rw.AllowMerging = true;  
  c1Flexgrid1.Rows.Insert(i + 1, rw);  
  rw.Height = 1;  
}  

Next step is to merge the cells for the inserted unbound rows, so that when we include the nested child C1Flexgrid in this row, it is evenly fills the row. To merge the cells, we will use the IMergeManager class.

c1Flexgrid1.MergeManager = new MyMergeManager();  

public class MyMergeManager : C1.WPF.FlexGrid.IMergeManager  
{  
   public CellRange GetMergedRange(C1FlexGrid grid, CellType cellType, CellRange range)  
   {  
     if (grid.Rows[range.Row].DataItem == null)  
       if (cellType == CellType.Cell && range.Column >= 1 && range.Column < grid.Columns.Count-1)  
       {  
         range.Column = 1;  
         range.Column2 = grid.Columns.Count-1;  
       }  

      return range;  
  }  
}  

Handle Expand/Collapse Operations for Nested Grids

This important section involves implementing CellFactory where we handle the inclusion of Child C1FlexGrids and toggling their visibility. Since the size of the code implementation is large, refer to the attached sample and check out the implementation of CellFactory Class. Once we have all the code in place, final appearance of the nested grids look like this. Refer to the attached sample for complete implementation. Download Sample