We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: UWP |
Control: SfDataGrid |
.NET Framework: 4.5 |
Product Version:

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.


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

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


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.


<Syncfusion:SfDataGrid x:Name="datagrid"
                               ItemsSource="{Binding Employees}"
                               CaptionSummaryRowStyleSelector="{StaticResource styleselector}">

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

background changes in SfDataGrid

Figure 1: CaptionSummaryRow style changed based on group levels

Sample Links





2X faster development

The ultimate UWP UI toolkit to boost your development speed.
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile