How to change the CaptionSummaryRow Style based on the grouping level in WPF SfDataGrid?

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

Conclusion

I hope you enjoyed learning about how to change the CaptionSummaryRow Style based on the grouping level in WPF SfDataGrid.

You can refer to our WPF SfDataGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF SfDataGrid example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!