Sorting in .NET MAUI TreeView (SfTreeView)

14 Jul 20264 minutes to read

The SfTreeView control provides built-in support for sorting data using the SortDescriptors property. Items can be sorted in either ascending or descending order. Custom sorting logic is also supported to sort the items.

Programmatic sorting

Sort items by creating a SortDescriptor with the property name and sort direction, and then adding it to the SortDescriptors collection.

SortDescriptor object holds the following three properties:

• PropertyName: Describes the name of the sorted property.
• Direction: Describes an object of type TreeViewSortDirection that defines the sorting direction.
• Comparer: Describes the comparer to be applied when sorting takes place.

MainPage.xaml

<ContentPage>
    <ContentPage.BindingContext>
        <local:FileManagerViewModel x:Name="viewModel"/>
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <syncfusion:SfTreeView x:Name="treeView">
            <syncfusion:SfTreeView.SortDescriptors>
                <treeviewengine:SortDescriptor PropertyName="ItemName" Direction="Ascending" />
            </syncfusion:SfTreeView.SortDescriptors>
        </syncfusion:SfTreeView>
    </ContentPage.Content>
</ContentPage>

MainPage.xaml.cs

using Syncfusion.Maui.TreeView;
using Syncfusion.TreeView.Engine;

public class MainPage : ContentPage
{
    SfTreeView treeView;
    public MainPage()
    {
        InitializeComponent();
        treeView = new SfTreeView();
        var sortDescriptor = new SortDescriptor()
        {
            PropertyName = "ItemName",
            Direction = TreeViewSortDirection.Ascending
        };
        treeView.SortDescriptors.Add(sortDescriptor);
        this.Content = treeView;
    }
}

NOTE

It is mandatory to specify the PropertyName of SortDescriptor when using programmatic sorting.

Custom sorting

Custom sorting can be applied by assigning a comparer to the SortDescriptor.Comparer property. The descriptor is then added to the SortDescriptors collection.

MainPage.xaml

<ContentPage>
    <ContentPage.Resources>
        <ResourceDictionary>
            <local:CustomDateSortComparer x:Key="CustomSortComparer" />
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.BindingContext>
        <local:FileManagerViewModel x:Name="viewModel"/>
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <syncfusion:SfTreeView x:Name="treeView">
            <syncfusion:SfTreeView.SortDescriptors>
                <treeviewengine:SortDescriptor Comparer="{StaticResource CustomSortComparer}" />
            </syncfusion:SfTreeView.SortDescriptors>
        </syncfusion:SfTreeView>
    </ContentPage.Content>
</ContentPage>

CustomSortComparer.cs

using System;
using System.Collections.Generic;

public class CustomDateSortComparer : IComparer<object>
{
    public int Compare(object x, object y)
    {
        if (x is FileManager xFile && y is FileManager yFile)
        {
            // Returns dates in descending order (most recent first)
            return -DateTime.Compare(xFile.Date, yFile.Date);
        }
        return 0;
    }
}

Clear sorting

When the SortDescriptors collection is cleared, the TreeView control restores the original order of its nodes, displaying them in the default sequence as defined in the underlying data source and effectively removing any applied sorting.

C#

treeView.SortDescriptors.Clear();

NOTE

When the new collection is updated to the ItemsSource, the SortDescriptors should be cleared and reinitialized manually based on the requirements for sorting.

NOTE

View sample in GitHub