Skip to content

Commit eab1248

Browse files
AmalRajUmapathySelvamAmalRajUmapathySelvam
authored
Merge pull request #3570 from syncfusion-content/TreeView_Sorting
977149: Added UG for Support to Sorting in .Net MAUI TreeView
2 parents c795c8e + 874e719 commit eab1248

File tree

3 files changed

+118
-0
lines changed

3 files changed

+118
-0
lines changed

‎MAUI/TreeView/Images/sorting/maui-treeView-programmatic-sorting.gif‎

155 KB
Loading

‎MAUI/TreeView/sorting.md‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
---
2+
layout: post
3+
title: Sorting in .NET MAUI TreeView Control | Syncfusion
4+
description: Learn here all about Sorting support in Syncfusion .NET MAUI TreeView (SfTreeView) Control and more.
5+
platform: MAUI
6+
control: SfTreeView
7+
documentation: ug
8+
---
9+
10+
# Sorting in .NET MAUI TreeView (SfTreeView)
11+
12+
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.
13+
14+
## Programmatic sorting
15+
16+
Sort items by creating a `SortDescriptor` with the property name and sort direction, and then adding it to the `SortDescriptors` collection.
17+
18+
`SortDescriptor` object holds the following three properties:
19+
20+
* `PropertyName`: Describes the name of the sorted property.
21+
* `Direction`: Describes an object of type `TreeViewSortDirection` that defines the sorting direction.
22+
* `Comparer`: Describes the comparer to be applied when sorting takes place.
23+
24+
{% tabs %}
25+
{% highlight xaml hl_lines="4 5" %}
26+
<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.Maui.TreeView;assembly=Syncfusion.Maui.TreeView"
27+
xmlns:treeviewengine="clr-namespace:Syncfusion.TreeView.Engine;assembly=Syncfusion.Maui.TreeView">
28+
<syncfusion:SfTreeView x:Name="treeView">
29+
<syncfusion:SfTreeView.SortDescriptors>
30+
<treeviewengine:SortDescriptor PropertyName="ItemName" Direction="Ascending" />
31+
</syncfusion:SfTreeView.SortDescriptors>
32+
</syncfusion:SfTreeView>
33+
</ContentPage>
34+
{% endhighlight %}
35+
{% highlight c# hl_lines="14 16 17 20" %}
36+
using Syncfusion.Maui.TreeView;
37+
using Syncfusion.TreeView.Engine;
38+
39+
public class MainPage : ContentPage
40+
{
41+
SfTreeView treeView;
42+
43+
public MainPage()
44+
{
45+
InitializeComponent();
46+
47+
treeView = new SfTreeView();
48+
49+
var sortDescriptor = new SortDescriptor()
50+
{
51+
PropertyName = "ItemName",
52+
Direction = TreeViewSortDirection.Ascending
53+
};
54+
55+
treeView.SortDescriptors.Add(sortDescriptor);
56+
this.Content = treeView;
57+
}
58+
}
59+
{% endhighlight %}
60+
{% endtabs %}
61+
62+
![Programmatic sorting in .NET MAUI TreeView](images/sorting/maui-treeView-programmatic-sorting.gif)
63+
64+
N> It is mandatory to specify the `PropertyName` of `SortDescriptor` in programmatic sorting.
65+
66+
## Custom sorting
67+
68+
Custom sorting can be applied by assigning a comparer to the `SortDescriptor.Comparer` property and the comparer will be added to the `SortDescriptors` collection.
69+
70+
{% tabs %}
71+
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="4 9" %}
72+
<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.Maui.TreeView;assembly=Syncfusion.Maui.TreeView"
73+
xmlns:treeviewengine="clr-namespace:Syncfusion.TreeView.Engine;assembly=Syncfusion.Maui.TreeView">
74+
<ContentPage.Resources>
75+
<ResourceDictionary>
76+
<local:CustomDateSortComparer x:Key="CustomSortComparer" />
77+
</ResourceDictionary>
78+
</ContentPage.Resources>
79+
<syncfusion:SfTreeView x:Name="treeView">
80+
<syncfusion:SfTreeView.SortDescriptors>
81+
<treeviewengine:SortDescriptor Comparer="{StaticResource CustomSortComparer}" />
82+
</syncfusion:SfTreeView.SortDescriptors>
83+
</syncfusion:SfTreeView>
84+
</ContentPage>
85+
{% endhighlight %}
86+
{% endtabs %}
87+
88+
{% tabs %}
89+
{% highlight c# tabtitle="CustomSortComaparer.cs" %}
90+
91+
public class CustomDateSortComparer : IComparer<object>
92+
{
93+
public int Compare(object x, object y)
94+
{
95+
if (x is FileManager xFile && y is FileManager yFile)
96+
{
97+
// Latest file upadted dates will come first (descending order)
98+
return -DateTime.Compare(xFile.Date, yFile.Date);
99+
}
100+
return 0;
101+
}
102+
}
103+
104+
{% endhighlight %}
105+
{% endtabs %}
106+
107+
## Clear sorting
108+
109+
When the `SortDescriptors` collection is cleared, the TreeView control restores the original order of its node collection. This means the nodes will appear in the default sequence as defined in the underlying data source, effectively removing any applied sorting.
110+
111+
{% tabs %}
112+
{% highlight c# %}
113+
treeView.SortDescriptors.Clear();
114+
{% endhighlight %}
115+
{% endtabs %}
116+
117+
N> When the new collection is updated to the `ItemsSource`, the `SortDescriptors` should be cleared and reinitialized manually based on the requirements for sorting.

‎maui-toc.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1376,6 +1376,7 @@
13761376
<li><a href="/maui/TreeView/selection">Selection</a></li>
13771377
<li><a href="/maui/TreeView/checkbox">Checkbox</a></li>
13781378
<li><a href="/maui/TreeView/drag-and-drop">Drag and Drop</a></li>
1379+
<li><a href="/maui/TreeView/sorting">Sorting</a></li>
13791380
<li><a href="/maui/TreeView/mvvm">MVVM</a></li>
13801381
<li><a href="/maui/TreeView/load-on-demand">Load on Demand</a></li>
13811382
<li><a href="/maui/TreeView/item-height-customization">Item Height Customization</a></li>

0 commit comments

Comments
 (0)