How to change the CaptionSummaryRow Style based on the grouping level?

In SfDataGrid, the group represents the collection of records that belong to a particular category. While grouping a column, the details about the group is displayed in CaptionSummaryRow like Group name, Group Key, ItemsCount. Click here to know more about Grouping.

In SfDataGrid, each group has a level property. For example, when you initially group a column, more groups are created and the group level is considered as 1 for those groups. When you group another column, the group level is considered as 2 for newly created groups. Likewise, the group levels are maintained for all the groups.

By using CaptionSummaryRowStyleSelector, you can change the styles of the CaptionSummaryRow based on the group level. You can here to know more about StyleSelector in SfDataGrid.

In the following code examples, the CaptionSummaryRow background is changed based on the group level by using CaptionsummaryRowStyleSelector.

You can refer the following code example to define the multiple styles with background for CaptionSummaryRowControl and click here to know more about CaptionSummaryRowControl.

XAML

<Window.Resources>
    <local:CustomCaptionSummaryRowStyleSelector x:Key="styleselector"/>
    <Style x:Key="rowStyle1" TargetType="Syncfusion:CaptionSummaryRowControl">
        <Setter Property="Background" Value="LightPink" />
    </Style>
    <Style x:Key="rowStyle2" TargetType="Syncfusion:CaptionSummaryRowControl">
        <Setter Property="Background" Value="LightSteelBlue" />
    </Style>
    <Style x:Key="rowStyle3" TargetType="Syncfusion:CaptionSummaryRowControl">
        <Setter Property="Background" Value="LightGreen" />
    </Style>
</Window.Resources>

You can apply the above styles to CaptionSummaryRow based on the grouping level by using CaptionSummaryRowStyleSelector as shown in the following code example.

C#

public class CustomCaptionSummaryRowStyleSelector : StyleSelector
{
    public override Style SelectStyle(object item, DependencyObject container)
    {
        var dataRow = item as DataRowBase;
        var level = dataRow.Level;
        //based on group levels, style applied to captionsummaryrow
        if (level == 1)
            return App.Current.MainWindow.Resources["rowStyle1"] as Style;
        else if (level == 2)
            return App.Current.MainWindow.Resources["rowStyle2"] as Style;
        else if (level == 3)
            return App.Current.MainWindow.Resources["rowStyle3"] as Style;            
        return base.SelectStyle(item, container);
    }
}

Here, CustomCaptionSummaryStyleSelector class is derived from StyleSelector and the SelectStyle method is overridden. For WinRT, the SelectStyleCore method is overridden, and styles are returned based on the group level. In the SelectStyle method, you can get the DataRowBase from the argument item and from the DataRowBase, you can get the group level and apply the style based on the group level.

You can refer the following code example to apply the customized style to CaptionSummaryRow.

XAML

<Syncfusion:SfDataGrid x:Name="datagrid"
                               AutoGenerateColumns="False"                               
                               ItemsSource="{Binding Employees}"
                               AllowGrouping="True" 
                               ShowGroupDropArea="True"                               
                               ShowRowHeader="True" 
                               CaptionSummaryRowStyleSelector="{StaticResource styleselector}">

In the following screenshot, CaptionSummaryRow background has been changed based on the group level.

Figure 1: CaptionSummaryRow style changed based on group levels

Sample Links

WPF

WRT

UWP