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

Column Footers

The DataGrid allows you to display additional information which applies to the columns in a specific row placed at the bottom of the control. This row consists of individual footer cells for each column.

.NET MAUI DataGrid Column Footer

By default, column footers are hidden and in order to make them visible you have to set the ShowColumnFooters property to True.

The following example shows how to define a footer in the DataGrid:

<telerik:RadDataGrid x:Name="dataGrid" 
                     ShowColumnFooters="True"/>

To define a text inside the footer you have to use the FooterText property. The property is per column:

<telerik:RadDataGrid x:Name="dataGrid" 
                     ShowColumnFooters="True" 
                     AutoGenerateColumns="False">
    <telerik:RadDataGrid.Columns>
        <telerik:DataGridTextColumn PropertyName="Capital" 
                                    FooterText="Capital Footer"/>
        <telerik:DataGridTextColumn PropertyName="Country" 
                                    FooterText="Country Footer"/>
    </telerik:RadDataGrid.Columns>
</telerik:RadDataGrid>

Note that the footer has to be defined per column otherwise the cell will appear empty.

Styling

Use the FooterStyle property in order to style the DataGridColumn footer.

Check the .NET MAUI DataGrid Column Footer Styling topic for more information about the styling options you can use.

You can easily customize the content of the footer using the FooterContentTemplate(DataTemplate) property.

Define the DataTemplate for the footer:

<DataTemplate x:Key="CapitalColumnFooterTemplate">
    <telerik:RadBorder BackgroundColor="{StaticResource ApplicationAccentColor}"
                       BorderThickness="2,2,1,2"
                       BorderColor="#151950"
                       HeightRequest="30">
        <Label Text="Capital Footer"
               TextColor="White"
               HorizontalOptions="Center"
               VerticalOptions="Center"/>
    </telerik:RadBorder>
</DataTemplate>
<DataTemplate x:Key="CountryColumnFooterTemplate">
    <telerik:RadBorder BackgroundColor="{StaticResource ApplicationAccentColor}" 
                       BorderThickness="1,2,2,2"
                       BorderColor="#151950"
                       HeightRequest="30">
        <Label Text="Country Footer" 
               TextColor="White"
               HorizontalOptions="Center"
               VerticalOptions="Center"/>
    </telerik:RadBorder>
</DataTemplate>

Define the FooterContentTemplate in the DataGridColumn:

<telerik:RadDataGrid x:Name="dataGrid" 
                     ShowColumnFooters="True"
                     AutoGenerateColumns="False">
    <telerik:RadDataGrid.Columns>
        <telerik:DataGridTextColumn PropertyName="Capital" 
                                    HeaderContentTemplate="{StaticResource CapitalColumnHeaderTemplate}"
                                    FooterContentTemplate="{StaticResource CapitalColumnFooterTemplate}"/>
        <telerik:DataGridTextColumn PropertyName="Country"
                                    HeaderContentTemplate="{StaticResource CountryColumnHeaderTemplate}"
                                    FooterContentTemplate="{StaticResource CountryColumnFooterTemplate}"/>
    </telerik:RadDataGrid.Columns>
</telerik:RadDataGrid>

.NET MAUI DataGrid Column Footer Template

See Also

In this article
Not finding the help you need?