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.

Use the following properties to style the aggregates:

  • GroupHeaderStyle(DataGridGroupHeaderStyle)—Defines the style of the GroupHeader and the aggregates inside the header.
  • GroupFooterStyle(DataGridGroupFooterStyle)—Defines the style of the GroupFooter and the aggregates inside the footer.
  • GroupFooterStyleSelector(DataGridStyleSelector)— Defines the style of the selected GroupFooter by passing the GroupFooterContext in the selector.
  • FooterStyle(DataGridColumnFooterStyle)—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.

To visualize the GroupHeader, set the ShowGroupHeaderAggregates to True. The property is a property inside the RadDataGrid.

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

<telerik:DataGridGroupFooterStyle x:Key="GroupFooterStyle"
                                  BorderThickness="0, 1"
                                  BorderColor="BlueViolet"
                                  TextColor="BlueViolet"
                                  TextFontFamily="Italic" />

GroupFooterStyleSelector

The following example shows how to use the GroupFooterStyleSelector property.

Define the class to which the GroupFooterContext will be passed.

class CustomGroupFooterStyleSelector : DataGridStyleSelector
{
    public DataGridGroupFooterStyle CustomStyle { get; set; }

    public override DataGridStyle 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;
    }
}

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

<local:CustomGroupFooterStyleSelector x:Key="GroupFooterStyleSelectorResource">
    <local:CustomGroupFooterStyleSelector.CustomStyle>
        <telerik:DataGridGroupFooterStyle TextFontAttributes="Bold"
                                          BorderColor="BlueViolet"
                                          HorizontalTextAlignment="Start"
                                          VerticalTextAlignment="End"
                                          BorderThickness="0, 1"/>
    </local:CustomGroupFooterStyleSelector.CustomStyle>
</local:CustomGroupFooterStyleSelector>

Customizing the footer in the DataGrid also changes the appearance of the Aggregates inside of it.

The following example demonstrates how to change the style of the Column Footer Aggregates.

Define the footer style in XAML:

<telerik:DataGridColumnFooterStyle x:Key="FooterStyle"
                                   BorderThickness="0, 1"
                                   BorderColor="PaleVioletRed"
                                   TextColor="PaleVioletRed"
                                   TextFontFamily="Italic" />

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 final result is as follows:

Group Aggregate Style

In this article
Not finding the help you need?