Filter and Sort Nodes in Tree View for .NET MAUI

• Apr 30, 2024
• 2 minutes to read

You can filter and sort items in the DXTreeView control. Refer to the following section for information on how to populate a Tree View with items: Display Hierarchical Data.

Filter Tree View Items

The Tree View ships with APIs that allow you to filter items. The following code snippet uses a custom search bar to filter Tree View nodes:

XAML

<dxe:TextEdit ...
    PlaceholderText="Search" 
    TextChanged="OnSearchTextChanged"/>

<dxt:DXTreeView 
        x:Name="treeView"
        ItemsSource="{Binding Nodes}" 
        FilterMode="ParentBranch"
        RestoreExpandStateOnClearFilter="True"
        ExpandNodesOnFiltering="True">
    <!-- ... -->
</dxt:DXTreeView>

C#

void OnSearchTextChanged(object sender, EventArgs e) {
    string searchText = ((TextEdit)sender).Text;
    this.treeView.FilterString =
        string.IsNullOrEmpty(searchText)
        ? null
        : $"Contains([Name], '{searchText}')";
}

Use the following API to specify the filter condition:

FilterMode

Specifies whether the control displays matching nodes only or also includes parent nodes or entire branches.

FilterExpression

Specifies a filter expression.

FilterString

Specifies a filter string.

RestoreExpandStateOnClearFilter

Specifies whether the Tree View restores the expanded node state when filtering is cancelled.

ExpandNodesOnFiltering

Specifies whether to expand a node if its child nodes match the filter condition.

Use Filter Strings

The FilterString property allows you to specify a filter expression string written in Criteria Language Syntax.

The following code snippet filters out nodes whose text includes the string “Employee”:

XAML

<dxt:DXTreeView 
        ItemsSource="{Binding Nodes}"
        FilterString="StartsWith([Name], 'Employee')" >
    <!-- ... -->
</dxt:DXTreeView>

Use Filter Expressions

You can also use the FilterExpression property to filter Tree View items. To build expressions, use criteria operators described in the following topic: Criteria Operators.

The following code snippet replicates the filtering rule from the previous section, but uses a filter expression instead of a filter string:

C#

using DevExpress.Data.Filtering;
//...
    treeView.FilterExpression = new FunctionOperator(FunctionOperatorType.StartsWith, new OperandProperty("Name"), new ConstantValue("Employee"));

To convert a filter string to its CriteriaOperator equivalent, call the CriteriaOperator.Parse method. For information on the Parse method and its limitations, refer to the following help topic: Limitations of CriteriaOperator.Parse.

Sort Tree View Items

You can apply multiple sorting rules to Tree View items. The rules are applied in the same order as specified in the SortDescriptions collection.

To configure a sorting rule, create a TreeViewSortDescription object and specify the following options:

FieldName

Defines the name of the data source field whose values are used to sort items.

SortOrder

Specifies whether items should be sorted in ascending or descending order.

Then, add the TreeViewSortDescription object to the SortDescriptions collection.

The following code snippet sorts Tree View nodes in ascending order:

XAML

<dxt:DXTreeView ... >
    <dxt:DXTreeView.SortDescriptions>
        <dxt:TreeViewSortDescription 
            x:Name="sortDescription" 
            FieldName="JobTitle"
            SortOrder="Ascending"/>
    </dxt:DXTreeView.SortDescriptions>
</dxt:DXTreeView>