.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 based on the value of the GroupAggregatesAlignment (enum of type Telerik.Maui.Controls.DataGrid.DataGridGroupAggregatesAlignment) property.

To style the aggregates in the group header when the value for the GroupAggregatesAlignment is None, use the GroupHeaderStyle (of type Style with target type DataGridGroupHeaderAppearance) property.

The available properties in the GroupHeaderStyle are:

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="BorderColor" Value="#8660C5" />
    <Setter Property="TextColor" Value="#8660C5" />
    <Setter Property="TextFontAttributes" Value="Italic" />
    <Setter Property="AggregatesTextColor" Value="#8660C5" />
    <Setter Property="AggregatesTextFontAttributes" Value="Italic" />
</Style>

To style and customize the aggregate results when setting the GroupAggregatesAlignment to NextToHeader, use the following properties:

GroupAggregateCellStyle (of type Style with target type DataGridGroupAggregateCellAppearance)—Defines the style of the aggregates cell within the group header of the DataGrid.
GroupAggregateCellStyleSelector (IStyleSelector)—Allows you to set different styles for each aggregate within the group header of the DataGrid by passing the GroupAggregateCellContext in the selector.
GroupAggregateCellTemplate (DataTemplate)—Defines the appearance of each aggregate within the group header of the DataGrid.

The properties listed above are properties inside the RadDataGrid instance. The table below describes the available properties for the GroupAggregateCellStyle:

Property	Description
`TextColor`	Defines the color of the cell text.
`FontAttributes`	Defines the font attributes for the text in the cell.
`FontFamily`	Defines the font family for the text in the cell.
`FontSize`	Defines the size for the text in the cell.
`Margin`	Defines the margin that is applied to the text of the cell.

Example with the `GroupAggregateCellStyle`

1. Define the DataGrid in XAML:

<telerik:RadDataGrid x:Name="dataGrid"
                     Grid.Row="1"
                     ItemsSource="{Binding Peripherals}"
                     ShowGroupHeaderAggregates="True"
                     GroupAggregateCellStyle="{StaticResource GroupAggregateCellStyle}"
                     GroupAggregatesAlignment="NextToHeader"
                     AutoGenerateColumns="False"
                     CanUserReorderColumns="True"
                     GroupHeaderStyle="{StaticResource GroupHeaderStyle}"
                     UserEditMode="Cell">
    <telerik:RadDataGrid.Columns>
        <telerik:DataGridTextColumn PropertyName="Name">
            <telerik:DataGridTextColumn.AggregateDescriptors>
                <telerik:PropertyAggregateDescriptor PropertyName="Name"
                                                 Function="Count"
                                                 Caption="Count: " />
            </telerik:DataGridTextColumn.AggregateDescriptors>
        </telerik:DataGridTextColumn>
        <telerik:DataGridNumericalColumn PropertyName="Price"
                                         CellContentFormat="{}{0:C}">
            <telerik:DataGridNumericalColumn.AggregateDescriptors>
                <telerik:PropertyAggregateDescriptor PropertyName="Price"
                                                     Function="Min" 
                                                     Format="C"
                                                     Caption="Cheapest: " />
                <telerik:PropertyAggregateDescriptor PropertyName="Price" 
                                                     Function="Max" 
                                                     Format="C"
                                                     Caption="Priciest: " />
            </telerik:DataGridNumericalColumn.AggregateDescriptors>
        </telerik:DataGridNumericalColumn>
        <telerik:DataGridNumericalColumn PropertyName="DeliveryPrice"
                                         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">
            <telerik:DataGridNumericalColumn.AggregateDescriptors>
                <telerik:PropertyAggregateDescriptor PropertyName="Quantity"
                                                     Function="Sum"
                                                     Caption="Total amount: " />
            </telerik:DataGridNumericalColumn.AggregateDescriptors>
        </telerik:DataGridNumericalColumn>
    </telerik:RadDataGrid.Columns>
    <telerik:RadDataGrid.GroupDescriptors>
        <telerik:PropertyGroupDescriptor PropertyName="DeliveryPrice" />
    </telerik:RadDataGrid.GroupDescriptors>
    <telerik:RadDataGrid.BindingContext>
        <local:ViewModel />
    </telerik:RadDataGrid.BindingContext>
</telerik:RadDataGrid>

2. Define the GroupAggregateCellStyle in the page's resources:

<Style x:Key="GroupAggregateCellStyle" TargetType="telerik:DataGridGroupAggregateCellAppearance">
    <Setter Property="TextColor" Value="#F18900" />
</Style>

3. Define theDataModel:

public class Data : NotifyPropertyChangedBase
{
    private string name;
    private double price;
    private double deliveryPrice;
    private int quantity;

    public string Name
    {
        get => this.name;
        set
        {
            if (value != this.name)
            {
                this.name = value;
                this.OnPropertyChanged();
            }
        }
    }

    public double Price
    {
        get => this.price;
        set
        {
            if (value != this.price)
            {
                this.price = value;
                this.OnPropertyChanged();
            }
        }
    }

    public double DeliveryPrice
    {
        get => this.deliveryPrice;
        set
        {
            if (value != this.deliveryPrice)
            {
                this.deliveryPrice = value;
                this.OnPropertyChanged();
            }
        }
    }

    public int Quantity
    {
        get => this.quantity;
        set
        {
            if (value != this.quantity)
            {
                this.quantity = value;
                this.OnPropertyChanged();
            }
        }
    }
}

4. Define the ViewModel:

public class ViewModel
{
    public ViewModel()
    {
        this.Peripherals = new ObservableCollection<Data>
        {
            new Data { Name = "KeyBoard", Price = 24.6, DeliveryPrice = 2, Quantity = 32 },
            new Data { Name = "Mouse", Price = 30.9, DeliveryPrice = 2, Quantity = 54 },
            new Data { Name = "Video Card", Price = 760.7, DeliveryPrice = 3, Quantity = 17 },
            new Data { Name = "Motherboard", Price = 210.4, DeliveryPrice = 4, Quantity = 12 },
            new Data { Name = "SSD", Price = 42.9, DeliveryPrice = 3, Quantity = 88 },
            new Data { Name = "RAM", Price = 50, DeliveryPrice = 4, Quantity = 126 }
        };
    }

    public ObservableCollection<Data> Peripherals { get; set; }
}

For the DataGrid GroupHeaderAggregates Style example refer to the SDKBrowser Demo application and navigate to the DataGrid > Aggregates category.

Example with the `GroupAggregateCellStyleSelector`

1. Define the DataGrid in XAML:

<telerik:RadDataGrid x:Name="dataGrid"
                     Grid.Row="1"
                     ItemsSource="{Binding Peripherals}"
                     ShowGroupHeaderAggregates="True"
                     GroupAggregateCellStyle="{StaticResource GroupAggregateCellStyle}"
                     GroupAggregatesAlignment="NextToHeader"
                     AutoGenerateColumns="False"
                     CanUserReorderColumns="True"
                     GroupHeaderStyle="{StaticResource GroupHeaderStyle}"
                     UserEditMode="Cell">
    <telerik:RadDataGrid.Columns>
        <telerik:DataGridTextColumn PropertyName="Name">
            <telerik:DataGridTextColumn.AggregateDescriptors>
                <telerik:PropertyAggregateDescriptor PropertyName="Name"
                                                 Function="Count"
                                                 Caption="Count: " />
            </telerik:DataGridTextColumn.AggregateDescriptors>
        </telerik:DataGridTextColumn>
        <telerik:DataGridNumericalColumn PropertyName="Price"
                                         CellContentFormat="{}{0:C}">
            <telerik:DataGridNumericalColumn.AggregateDescriptors>
                <telerik:PropertyAggregateDescriptor PropertyName="Price"
                                                     Function="Min" 
                                                     Format="C"
                                                     Caption="Cheapest: " />
                <telerik:PropertyAggregateDescriptor PropertyName="Price" 
                                                     Function="Max" 
                                                     Format="C"
                                                     Caption="Priciest: " />
            </telerik:DataGridNumericalColumn.AggregateDescriptors>
        </telerik:DataGridNumericalColumn>
        <telerik:DataGridNumericalColumn PropertyName="DeliveryPrice"
                                         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">
            <telerik:DataGridNumericalColumn.AggregateDescriptors>
                <telerik:PropertyAggregateDescriptor PropertyName="Quantity"
                                                     Function="Sum"
                                                     Caption="Total amount: " />
            </telerik:DataGridNumericalColumn.AggregateDescriptors>
        </telerik:DataGridNumericalColumn>
    </telerik:RadDataGrid.Columns>
    <telerik:RadDataGrid.GroupDescriptors>
        <telerik:PropertyGroupDescriptor PropertyName="DeliveryPrice" />
    </telerik:RadDataGrid.GroupDescriptors>
    <telerik:RadDataGrid.BindingContext>
        <local:ViewModel />
    </telerik:RadDataGrid.BindingContext>
</telerik:RadDataGrid>

2. Define the StyleSelector class:

<Style x:Key="GroupAggregateCellStyle" TargetType="telerik:DataGridGroupAggregateCellAppearance">
    <Setter Property="TextColor" Value="#F18900" />
</Style>

3. Define the GroupAggregateCellStyleSelector in the page's resources:

<Style x:Key="GroupAggregateCellStyle" TargetType="telerik:DataGridGroupAggregateCellAppearance">
    <Setter Property="TextColor" Value="#F18900" />
</Style>

4. Define the DataModel:

public class Data : NotifyPropertyChangedBase
{
    private string name;
    private double price;
    private double deliveryPrice;
    private int quantity;

    public string Name
    {
        get => this.name;
        set
        {
            if (value != this.name)
            {
                this.name = value;
                this.OnPropertyChanged();
            }
        }
    }

    public double Price
    {
        get => this.price;
        set
        {
            if (value != this.price)
            {
                this.price = value;
                this.OnPropertyChanged();
            }
        }
    }

    public double DeliveryPrice
    {
        get => this.deliveryPrice;
        set
        {
            if (value != this.deliveryPrice)
            {
                this.deliveryPrice = value;
                this.OnPropertyChanged();
            }
        }
    }

    public int Quantity
    {
        get => this.quantity;
        set
        {
            if (value != this.quantity)
            {
                this.quantity = value;
                this.OnPropertyChanged();
            }
        }
    }
}

5. Define the ViewModel:

public class ViewModel
{
    public ViewModel()
    {
        this.Peripherals = new ObservableCollection<Data>
        {
            new Data { Name = "KeyBoard", Price = 24.6, DeliveryPrice = 2, Quantity = 32 },
            new Data { Name = "Mouse", Price = 30.9, DeliveryPrice = 2, Quantity = 54 },
            new Data { Name = "Video Card", Price = 760.7, DeliveryPrice = 3, Quantity = 17 },
            new Data { Name = "Motherboard", Price = 210.4, DeliveryPrice = 4, Quantity = 12 },
            new Data { Name = "SSD", Price = 42.9, DeliveryPrice = 3, Quantity = 88 },
            new Data { Name = "RAM", Price = 50, DeliveryPrice = 4, Quantity = 126 }
        };
    }

    public ObservableCollection<Data> Peripherals { get; set; }
}

For the DataGrid GroupHeaderAggregates StyleSelector example refer to the SDKBrowser Demo application and navigate to the DataGrid > Aggregates category.

Style the Group Footer

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 Group Footer Appearance

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.

.NET MAUI DataGrid Aggregates Styling

Style the Group Header

Style the Aggregates in the Group Header

Example with the `GroupAggregateCellStyle`

Example with the `GroupAggregateCellStyleSelector`

Style the Group Footer

Customizing the Group Footer Appearance

See Also

Sample Applications

Support Resources

Community

.NET MAUI DataGrid Aggregates Styling

Style the Group Header

Style the Aggregates in the Group Header

Example with the GroupAggregateCellStyle

Example with the GroupAggregateCellStyleSelector

Style the Group Footer

Customizing the Group Footer Appearance

See Also

Sample Applications

Support Resources

Community

Example with the `GroupAggregateCellStyle`

Example with the `GroupAggregateCellStyleSelector`