Skip to main content
All docs
V24.1

DxTreeListDataColumn.SortMode Property

Specifies whether the TreeList sorts column data by values or uses custom sort logic.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(TreeListColumnSortMode.Value)]
[Parameter]
public TreeListColumnSortMode SortMode { get; set; }

Property Value

Type Default Description
TreeListColumnSortMode Value

An enumeration value.

Available values:

Name Description
Value

The TreeList sorts column data by values.

Custom

In this mode, the CustomSort event occurs every time the TreeList compares two column values. Handle this event to implement a custom value comparison algorithm.

Remarks

You can sort TreeList data by values or implement a custom sort algorithm.

Sort Data by Values

When a column’s SortMode property is set to Value (default), the TreeList component sorts column data by values. Based on the data type, the TreeList sorts column data in one of the following ways:

Date-time values
From earliest to most recent.
Text strings
In alphabetical order.
Numeric values
From smallest to largest.

Custom Sorting

Follow the steps below to implement a custom sorting algorithm:

  1. Set the column’s SortMode property to Custom.
  2. Handle the TreeList’s CustomSort event and implement a custom value comparison algorithm. Use event arguments to access column values and other TreeList data.

The following code snippet implements custom logic to sort the Start Date column’s values without taking into account the year part of the date:

@inject EmployeeTaskService EmployeeTaskService

<DxTreeList Data="TreeListData" KeyFieldName="Id" ParentKeyFieldName="ParentId" CustomSort="OnCustomSort">
    <Columns>
        <DxTreeListDataColumn FieldName="Name" Caption="Task" />
        <DxTreeListDataColumn FieldName="EmployeeName" />
        <DxTreeListDataColumn FieldName="StartDate"
                              DisplayFormat="d"
                              SortIndex="0"
                              SortMode="TreeListColumnSortMode.Custom"/>
        <DxTreeListDataColumn FieldName="DueDate" />
    </Columns>
</DxTreeList>

@code {
    List<EmployeeTask> TreeListData { get; set; }

    protected override void OnInitialized() {
        TreeListData = EmployeeTaskService.GenerateData();
    }

    void OnCustomSort(TreeListCustomSortEventArgs e) {
        if (e.FieldName == "StartDate") {
            var date1 = Convert.ToDateTime(e.Value1);
            var date2 = Convert.ToDateTime(e.Value2);
            if (date1.Month == date2.Month)
                e.Result = date1.Day.CompareTo(date2.Day);
            else
                e.Result = date1.Month.CompareTo(date2.Month);
            e.Handled = true;
        }
    }
}

For more information about data sorting in the TreeList component, refer to the following topic: Sort Data in Blazor TreeList.

Implements

See Also