Edit this page


You can use RadGridView's GroupRowStyleSelector property if you need to style group rows differently based on a specific condition.

Bear in mind that the GroupRowStyle takes precedence over the GroupRowStyleSelector and will overwrite it if both are defined simultaneously.

To achieve this, first create a new class that inherits from the StyleSelector class and override its SelectStyle method:

Example 1: The GroupRowStyleSelector class

public class GroupRowStyleSelector : StyleSelector
    public override Style SelectStyle(object item, DependencyObject container)
        var group = item as QueryableCollectionViewGroup;
        if (group.ItemCount > 1)
            return BigGroupStyle;
            return SmallGroupStyle;

    public Style BigGroupStyle { get; set; }
    public Style SmallGroupStyle { get; set; }
Public Class GroupRowStyleSelector
    Inherits StyleSelector
    Public Overrides Function SelectStyle(item As Object, container As DependencyObject) As Style
        Dim group = TryCast(item, CollectionViewGroup)

        If group IsNot Nothing Then
            If group.ItemCount > 1 Then
                Return BigGroupStyle
                Return SmallGroupStyle
            End If
        End If

        Return Nothing
    End Function

    Public Property BigGroupStyle() As Style
            Return m_BigGroupStyle
        End Get
            m_BigGroupStyle = Value
        End Set
    End Property
    Private m_BigGroupStyle As Style

    Public Property SmallGroupStyle() As Style
            Return m_SmallGroupStyle
        End Get
            m_SmallGroupStyle = Value
        End Set
    End Property
    Private m_SmallGroupStyle As Style
End Class

In the XAML file, define the style selector as a resource and set the properties of the BigGroupStyle and SmallGroupStyle:

Example 2: Setting the BigGroupStyle and SmallGroupStyle

    <my:GroupRowStyleSelector x:Key="GroupRowStyleSelector">
            <Style TargetType="telerik:GroupHeaderRow">
                <Setter Property="Background" Value="Red" />
            <Style TargetType="telerik:GroupHeaderRow">
                <Setter Property="Background" Value="Yellow" />

If you're using GroupRenderMode="Nested" the style should target the GridViewGroupRow element.

The "my:" prefix before GroupRowStyleSelector specifies the mapping for the namespace of the project: xmlns:my="..."

Finally, set the GroupRowStyleSelector property:

Example 3: Setting the GroupRowStyleSelector property

<telerik:RadGridView GroupRowStyleSelector="{StaticResource GroupRowStyleSelector}" />

And here is the final result:

Figure 1: The group footer rows styled using the GroupRowStyleSelector property

The group rows styled using the GroupRowStyleSelector property

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article