Merge Cells in WinUI TreeGrid

14 Apr 20215 minutes to read

SfTreeGrid allows you to merge a range of adjacent cells in a row across columns using the QueryCoveredRange event.

The QueryCoveredRange event occurs when each cell is arranged. When scrolling, the merged range will be added for newly added columns through this event and will also be removed for the columns that are out of view.

TreeGridQueryCoveredRangeEventArgs of the QueryCoveredRange event provides information about the cell triggered in this event. GridQueryCoveredRangeEventArgs.OriginalSender returns the TreeGrid fired in this event using the TreeGridQueryCoveredRangeEventArgs.Range property. The adjacent cells can be merged.

xmlns:treeGrid="using:Syncfusion.UI.Xaml.TreeGrid"

<treeGrid:SfTreeGrid Name="sfTreeGrid"
                                ItemsSource="{Binding EmployeeDetails}"
                                QueryCoveredRange="SfTreeGrid_QueryCoveredRange"
                                SelectionMode="Single"
                                NavigationMode="Cell" />
this.sfTreeGrid.NavigationMode = Syncfusion.UI.Xaml.Grids.NavigationMode.Cell;
this.sfTreeGrid.SelectionMode = Syncfusion.UI.Xaml.Grids.GridSelectionMode.Multiple;
this.sfTreeGrid.QueryCoveredRange += SfTreeGrid_QueryCoveredRange;

private void SfTreeGrid_QueryCoveredRange(object sender, TreeGridQueryCoveredRangeEventArgs e)
{

}

Column wise merging cells by fixed range

You can merge the columns by setting the range using the Left and Right properties of TreeGridCoveredCellInfo.

this.sfTreeGrid.QueryCoveredRange += SfTreeGrid_QueryCoveredRange;

private void SfTreeGrid_QueryCoveredRange(object sender, TreeGridQueryCoveredRangeEventArgs e)
{
    if (e.RowColumnIndex.RowIndex == 1)
    {
        if (e.RowColumnIndex.ColumnIndex >= 1 && e.RowColumnIndex.ColumnIndex <= 3)
        {
            e.Range = new TreeGridCoveredCellInfo(1, 4, 1);
            e.Handled = true;
        }
    }             
}

Displaying column wise merged cells in WinUI TreeGrid

Merge all cells in an entire parent node

You can merge the entire column parent node using TreeGridCoveredCellInfo.

<treeGrid:SfTreeGrid Name="sfTreeGrid"
                                ItemsSource="{Binding EmployeeDetails}"
                                ChildPropertyName="Children"
                                QueryCoveredRange="SfTreeGrid_QueryCoveredRange"
                                SelectionMode="Single"
                                NavigationMode="Cell" />
this.sfTreeGrid.QueryCoveredRange += SfTreeGrid_QueryCoveredRange;

private void SfTreeGrid_QueryCoveredRange(object sender, TreeGridQueryCoveredRangeEventArgs e)
{    
    var treeNode = this.sfTreeGrid.GetNodeAtRowIndex(e.RowColumnIndex.RowIndex);
    if (treeNode != null && treeNode.HasChildNodes)
    {
        if (e.RowColumnIndex.ColumnIndex >= 1 && e.RowColumnIndex.ColumnIndex <= this.sfTreeGrid.Columns.Count)
        {
            e.Range = new TreeGridCoveredCellInfo(0, this.sfTreeGrid.Columns.Count, e.RowColumnIndex.RowIndex);
            e.Handled = true;
        }
    }
}

Displaying entire parent node merged cells in WinUI TreeGrid