How to show default sort/filter icons in DataGrid .NET MAUI header?

Overview

By default, **.NET MAUI DataGrid ** shows a sort glyph only after a column is sorted (i.e., when the user taps a header or you add a SortColumnDescription). It does not display a “default” sort or filter icon up front. To present a consistent UI cue that columns are sortable/filterable, you can embed your own icon in each column header via HeaderTemplate, and then toggle its visibility when the grid’s sorting changes.
This article shows a practical pattern to:

Add a default sort/filter icon next to the header text using HeaderTemplate.
Listen to sorting changes to keep icons in sync with the grid’s current sort state.

Steps to show default icons in DataGrid headers

Step 1: Add Required Namespaces

Add the Syncfusion DataGrid namespace to your page.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
             x:Class="YourNamespace.MainPage">

If you’re setting up SfDataGrid for the first time, follow the “Getting Started” guide to install the NuGet and register the Syncfusion core handler.

Step 2: Define a header template with a hint icon

Use each column’s HeaderTemplate to place an icon next to the header text (this icon will act as the default “sortable/filterable” hint).

Important XAML (per column):

<syncfusion:DataGridNumericColumn MappingName="OrderID" Format="0">
    <syncfusion:DataGridNumericColumn.HeaderTemplate>
        <DataTemplate>
            <StackLayout Orientation="Horizontal" Spacing="5">
                <Label Text="Order ID" VerticalOptions="Center" />
                <!-- Default hint icon (visible by default) -->
                <Image Source="sorticon.png"
                       AutomationId="orderID"
                       WidthRequest="16" HeightRequest="16"
                       Opacity="0.75" />
            </StackLayout>
        </DataTemplate>
    </syncfusion:DataGridNumericColumn.HeaderTemplate>
</syncfusion:DataGridNumericColumn>

HeaderTemplate is the recommended way to place custom content buttons, images, or labels into DataGrid column headers.

Step 3: Handle sorting changes to toggle the hint icons

SfDataGrid exposes sorting built-ins (single/multiple/tri-state). Once sorting is applied, the grid shows its own sort indicator in the sorted column header. We’ll keep our default hint icon visible on other columns and hide it on the currently sorted column(s) to avoid duplication.

Attach the event in XAML:

<syncfusion:SfDataGrid x:Name="dataGrid"
                       ItemsSource="{Binding Orders}"
                       AutoGenerateColumnsMode="None"
                       SortingMode="Single"
                       AllowTriStateSorting="True"
                       SortColumnsChanged="SfDataGrid_SortColumnsChanged">
    <!-- columns -->
</syncfusion:SfDataGrid>

Code-behind essentials (toggle icons):

private void SfDataGrid_SortColumnsChanged(object sender, DataGridSortColumnsChangedEventArgs e)
{
    UpdateHeaderIcons();
}

private void UpdateHeaderIcons()
{
    // 1) Show “hint” icons on all headers by default
    ShowIconsForAllHeaders();

    // 2) Hide the hint icon for any column that is currently sorted
    foreach (var desc in dataGrid.SortColumnDescriptions)
    {
        switch (desc.ColumnName)
        {
            case nameof(OrderInfo.OrderID):
                FindHeaderImageByAutomationId("orderID")
                    ?.SetValue(VisualElement.IsVisibleProperty, false);
                break;

            // Repeat for other columns (CustomerID, ShipCountry, ...)
        }
    }
}

private void ShowIconsForAllHeaders()
{
    FindHeaderImageByAutomationId("orderID")
        ?.SetValue(VisualElement.IsVisibleProperty, true);

    // Repeat for other header icons...
}

This pattern reacts to sorting changes so your custom hint icons remain visible on unsorted columns and get hidden where the grid already displays its own sort glyph.

Output

After these steps, your grid will render with a default sort/filter hint icon in each header. When the user sorts a column (or you sort programmatically), the grid’s built‑in sort indicator appears for that column and your default hint icon hides, while remaining visible for other columns clearly communicating interactivity.

Download Sample

Download the complete sample from GitHub.

Conclusion

SfDataGrid doesn’t show default header icons until a column is actually sorted. By embedding your own hint icon in HeaderTemplate and listening to SortColumnsChanged, you can create a polished, predictable experience that guides users to interact with your grid—while staying fully aligned with the grid’s built‑in sorting behavior.

You can refer to our .NET MAUI DataGrid’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI DataGrid Documentation to understand how to present and manipulate data.

For current customers, you can check out our .NET MAUI components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our .NET MAUI DataGrid and other .NET MAUI components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)