New to Telerik UI for .NET MAUI? Start a free 30-day trial

.NET MAUI DataGrid Aggregates Styling

The .NET MAUI DataGrid provides a styling functionality for its group footer, header, and column footer aggregates.

Style the Group Header

The Telerik UI for .NET MAUI DataGrid provides the GroupHeaderStyle (of type Style with target type DataGridGroupHeaderAppearance) configuration, which defines the style of the GroupHeader and the aggregates inside the header.

To visualize the aggregates in the DataGrid group header, set the ShowGroupHeaderAggregates to True. The property is a property inside the RadDataGrid instance.

Use the following properties to style the GroupHeader:

Property Description
BackgroundColor Defines the color that fills the area within the header.
BorderColor Defines the color that fills the border region.
BorderThickness Defines the thickness of the border.
ButtonFontAttributes Defines the font attributes for the expand/collapse symbol for the group headers.
ButtonFontFamily Defines the font family for the expand/collapse symbol of the GroupHeader.
ButtonFontSize Defines the font size for the expand/collapse symbol of the GroupHeader.
ButtonMargin Defines the margin for the expand/collapse symbol of the GroupHeader.
ButtonTextColor Defines the color for the expand/collapse symbol of the GroupHeader.
TextColor Defines the color for the text part of the GroupHeader
TextFontAttributes Defines the font attributes for the text part of the GroupHeader.
TextFontFamily Defines the font family for the text part of the GroupHeader.
TextFontSize Defines the size for the text part of the GroupHeader.
TextMargin Defines the margin for the text part of the GroupHeader.

Style the Aggregates in the Group Header

You can style the appearance of the aggregate results in the group header by setting the following properties to the GroupHeaderStyle:

Property Description
AggregatesTextColor Defines the color for the aggregates part of the GroupHeader
AggregatesTextFontAttributes Defines the font attributes for the aggregates part of the GroupHeader
AggregatesTextFontFamily Defines the font family of the aggregates part of the GroupHeader
AggregatesTextFontSize Defines the size of the aggregates part of the GroupHeader
AggregatesTextMargin Defines the margin for the aggregates part of the GroupHeader

The following example shows how to style the aggregate results in the group header when setting the GroupHeaderStyle in the page's resources:

<Style x:Key="GroupHeaderStyle" TargetType="telerik:DataGridGroupHeaderAppearance" >
    <Setter Property="BorderThickness" Value="0, 1" />
    <Setter Property="BorderColor" Value="#8660C5" />
    <Setter Property="TextColor" Value="#8660C5" />
    <Setter Property="TextFontAttributes" Value="Italic" />
    <Setter Property="AggregatesTextColor" Value="#8660C5" />
    <Setter Property="AggregatesTextFontAttributes" Value="Italic" />
</Style>

The DataGrid provides the following options for styling its group footer:

  • GroupFooterStyle (of type Style with target type DataGridColumnFooterAppearance)—Defines the style of the GroupFooter and the aggregates inside the footer.
  • GroupFooterStyleSelector (IStyleSelector)—Defines the style of the selected GroupFooter by passing the GroupFooterContext in the selector.
  • FooterStyle (of type Style with target type DataGridColumnFooterAppearance)—Defines the style of the Column Footer and the aggregates inside the Column Footer.

To visualize the GroupFooter, set the ShowGroupFooters property to True. The property is a property inside the RadDataGrid instance.

The following example shows how to define the GroupFooterStyle in XAML:

<Style x:Key="GroupFooterStyle" TargetType="telerik:DataGridGroupFooterAppearance" >
    <Setter Property="BorderThickness" Value="0, 1" />
    <Setter Property="BorderColor" Value="BlueViolet" />
    <Setter Property="TextColor" Value="BlueViolet" />
    <Setter Property="TextFontAttributes" Value="Italic" />
</Style>

The following example shows how to use the GroupFooterStyleSelector property:

1. Define the class to which the GroupFooterContext will be passed.

class CustomGroupFooterStyleSelector : IStyleSelector
{
    public Style CustomStyle { get; set; }

    public Style SelectStyle(object item, BindableObject container)
    {
        if (item is GroupFooterContext footerContext
           && footerContext.Group.Key.ToString() == "Video Card"
           && footerContext.Column is DataGridTypedColumn column
           && column.PropertyName == "Quantity")
        {
            return this.CustomStyle;
        }

        return null;
    }
}

2. Define the style selector which will passed to the DataGrid in XAML.

<local:CustomGroupFooterStyleSelector x:Key="GroupFooterStyleSelectorResource">
    <local:CustomGroupFooterStyleSelector.CustomStyle>
        <Style TargetType="telerik:DataGridGroupFooterAppearance">
            <Setter Property="BorderThickness" Value="0, 1" />
            <Setter Property="BorderColor" Value="BlueViolet" />
            <Setter Property="TextFontAttributes" Value="Bold" />
            <Setter Property="VerticalTextAlignment" Value="End" />
        </Style>
    </local:CustomGroupFooterStyleSelector.CustomStyle>
</local:CustomGroupFooterStyleSelector>

For the DataGrid GroupFooter Aggregates styling example refer to the SDKBrowser Demo application and navigate to the DataGrid > Aggregates category.

Customizing the footer in the DataGrid also changes the appearance of the aggregates inside the component.

The following example demonstrates how to change the style of the column footer aggregates:

1. Define the footer style in XAML.

<Style x:Key="FooterStyle" TargetType="telerik:DataGridColumnFooterAppearance">
    <Setter Property="BorderThickness" Value="0, 1" />
    <Setter Property="BorderColor" Value="PaleVioletRed" />
    <Setter Property="TextColor" Value="PaleVioletRed" />
    <Setter Property="TextFontAttributes" Value="Italic" />
</Style>

2. Add the styling to the DataGrid.

<telerik:RadDataGrid x:Name="dataGrid"
                     AutoGenerateColumns="False"
                     ShowGroupFooters="True"
                     ShowColumnFooters="True"
                     GroupFooterStyleSelector="{StaticResource GroupFooterStyleSelectorResource}"
                     UserGroupMode="Disabled"
                     GroupFooterStyle="{StaticResource GroupFooterStyle}"
                     UserEditMode="Cell">
    <telerik:RadDataGrid.Columns>
        <telerik:DataGridTextColumn PropertyName="Name"
                                    FooterStyle="{StaticResource FooterStyle}">
            <telerik:DataGridTextColumn.AggregateDescriptors>
                <telerik:PropertyAggregateDescriptor PropertyName="Name"
                                                     Function="Count"
                                                     Caption="Total count: " />
            </telerik:DataGridTextColumn.AggregateDescriptors>
        </telerik:DataGridTextColumn>
        <telerik:DataGridNumericalColumn PropertyName="Price"
                                         FooterStyle="{StaticResource FooterStyle}"
                                         CellContentFormat="{}{0:C}">
            <telerik:DataGridNumericalColumn.AggregateDescriptors>
                <telerik:PropertyAggregateDescriptor PropertyName="Price"
                                                     Function="Min" 
                                                     Format="C"
                                                     Caption="Cheapest item: " />
                <telerik:PropertyAggregateDescriptor PropertyName="Price" 
                                                     Function="Max" 
                                                     Format="C"
                                                     Caption="Priciest item: " />
            </telerik:DataGridNumericalColumn.AggregateDescriptors>
        </telerik:DataGridNumericalColumn>
        <telerik:DataGridNumericalColumn PropertyName="DeliveryPrice"
                                         FooterStyle="{StaticResource FooterStyle}"
                                         HeaderText="Delivery Price"
                                         CellContentFormat="{}{0:C}">
            <telerik:DataGridNumericalColumn.AggregateDescriptors>
                <telerik:PropertyAggregateDescriptor PropertyName="DeliveryPrice"
                                                     Function="Average"
                                                     Format="C"
                                                     Caption="Average: " />
            </telerik:DataGridNumericalColumn.AggregateDescriptors>
        </telerik:DataGridNumericalColumn>
        <telerik:DataGridNumericalColumn PropertyName="Quantity"
                                         FooterStyle="{StaticResource FooterStyle}">
            <telerik:DataGridNumericalColumn.AggregateDescriptors>
                <telerik:PropertyAggregateDescriptor PropertyName="Quantity"
                                                     Function="Sum"
                                                     Caption="Total amount: " />
            </telerik:DataGridNumericalColumn.AggregateDescriptors>
        </telerik:DataGridNumericalColumn>
    </telerik:RadDataGrid.Columns>
</telerik:RadDataGrid>

The footer style is added per column.

The following image shows the end result.

Group Aggregate Style

For the DataGrid GroupFooter styling example refer to the SDKBrowser Demo application and navigate to the DataGrid > Aggregates category.

See Also

In this article