Merge Cells in WinUI TreeGrid

26 Apr 20225 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.

XAML

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

<treeGrid:SfTreeGrid Name="sfTreeGrid"
                                ItemsSource="{Binding EmployeeDetails}"
                                QueryCoveredRange="SfTreeGrid_QueryCoveredRange"
                                SelectionMode="Single"
                                NavigationMode="Cell" />

C#

this.sfTreeGrid.NavigationMode = Syncfusion.UI.Xaml.Grids.NavigationMode.Cell;
this.sfTreeGrid.SelectionMode = Syncfusion.UI.Xaml.Grids.GridSelectionMode.Single;
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.

C#

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;
        }
    }             
}

Merge all cells in an entire parent node

You can merge the entire column parent node using TreeGridCoveredCellInfo.

XAML

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

C#

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;
        }
    }
}