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:Column Width="20" IsReadOnly="True"/>
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;
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.