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

.NET MAUI DataGrid Column Headers

This article will guide you through the usage of the column headers, their customization as well through performing different data operations. Column headers are always visible and cannot be hidden.

DataGrid Column Header

Changing the text in the header

To customize text inside the header you have to use the HeaderText property. The property is per column. If HeaderText is not set, the text inside the PropertyName is displayed.

<telerik:RadDataGrid x:Name="dataGrid" 
                     AutoGenerateColumns="False">
    <telerik:RadDataGrid.Columns>
        <telerik:DataGridTextColumn PropertyName="Capital" 
                                    HeaderText="Capital Header"/>
        <telerik:DataGridTextColumn PropertyName="Country" 
                                    HeaderText="Country Header"/>
    </telerik:RadDataGrid.Columns>
</telerik:RadDataGrid>

Sorting

You can easily sort a particular column tapping ot its header. When the data is sorted by a column, its header changes its appearance and shows the sort direction via an indicator.

.NET MAUI DataGrid Column Header Sorting indicator

To learn more about the sorting functionality take a look at the Sorting article.

Filtering

The header of the column hosts the built-in filtering mechanism (the filter indicator which opens the Filtering UI), which allows you to filter the data by the columns' values.

.NET MAUI DataGrid Column Header filter indicator

To learn more about the filtering functionality take a look at the Filtering article.

Styling

Use the HeaderStyle property in order to style the DataGridColumn header.

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

Header Content Customization

You can easily customize the content of the Header using the HeaderContentTemplate(DataTemplate) property.

Define the DataTemplate for the header:

<DataTemplate x:Key="CapitalColumnHeaderTemplate">
    <HorizontalStackLayout Margin="4,0,2,0">
        <Image Source="rating.png" HeightRequest="16"/>
        <Label Text="Capital"
               HorizontalOptions="Center"
               VerticalOptions="Center"
               Margin="4,0,0,0"/>
    </HorizontalStackLayout>
</DataTemplate>
<DataTemplate x:Key="CountryColumnHeaderTemplate">
    <HorizontalStackLayout Margin="4,0,2,0">
        <Image Source="map.png" HeightRequest="16"/>
        <Label Text="Country"
               HorizontalOptions="Center"
               VerticalOptions="Center"
               Margin="4,0,0,0"/>
    </HorizontalStackLayout>
</DataTemplate>

Define the HeaderContentTemplate 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 Header Template

See Also

In this article
Not finding the help you need?