DxGridDataColumn.SortMode Property

Specifies how grid data is sorted (by value, by display text, or custom logic is used).

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

[Parameter]
public GridColumnSortMode SortMode { get; set; }

Property Value

Type Description
GridColumnSortMode

An enumeration value.

Available values:

Name Description
Default

Sorts data by value.

Value

Sorts data by value.

DisplayText

Sorts data by display text.

Custom

Custom logic is used.

Remarks

The SortMode property specifies how grid data is sorted (by value, by display text, or custom logic is used).

Sort Data By Value (Default Behavior)

When you set the DxGridDxGridDataColumnColumn.SortMode property to GridColumnSortMode.Default or GridColumnSortMode.Value, the grid sorts different data types in the following ways:

Data Types Sort Order
Date-time values From earliest to most recent
Text values In alphabetical order
Numeric values From smallest to largest
<Columns>
    <DxGridDataColumn FieldName="OrderDate"
                  DisplayFormat="d"
                  SortMode="GridColumnSortMode.Value"/>
    <DxGridDataColumn FieldName="City" 
                  SortMode="GridColumnSortMode.Value"/>
    <DxGridDataColumn FieldName="Freight"
                  SortMode="GridColumnSortMode.Value"/>
</Columns>

Grid - Sort Data By Value

Sort Data By Display Text

When you set the DxGridDataColumn.SortMode property to GridColumnSortMode.DisplayText, column values are compared character by character (even numeric and date-time values). That means 10 or 100 would appear before 2.

The code below specifies the DisplayText mode for the OrderDate column. Note how 11 and 12 appear before 2 and that the year part of the date is not taken into account.

<DxGridDataColumn FieldName="OrderDate"
              DisplayFormat="d"
              SortIndex="1"
              SortMode="GridColumnSortMode.DisplayText"/>

Grid - Sort Data By Display Text

Custom Sorting

Follow the steps below to implement custom logic.

  • Set the SortMode property to GridColumnSortMode.Custom.
  • Handle the CustomSort event to implement your logic that compares column values. Use the GridCustomSortEventArgs event arguments (Value1, Value2, FieldName, and so on) to access column values and other grid data.

The code below implements custom logic to sort the Order Date column’s values without taking into account the year part of the date.

@using Microsoft.EntityFrameworkCore
@using Grid.Northwind
@inject NorthwindContext Northwind

<DxGrid Data="GridDataSource"
        CustomizeCellDisplayText="Grid_CustomColumnDisplayText"
        UnboundColumnData="Grid_CustomUnboundColumnData"
        CustomSort="OnCustomSort">
    <Columns>
        <DxGridDataColumn FieldName="OrderDate" DisplayFormat="d" GroupInterval="GridColumnGroupInterval.DateMonth"
                      SortIndex="0"
                      SortMode="GridColumnSortMode.Custom" />
        <DxGridDataColumn FieldName="Customer" />
        <DxGridDataColumn FieldName="ShipViaNavigation.CompanyName" />
        <DxGridDataColumn FieldName="Freight" DisplayFormat="n2" />
        <DxGridDataColumn FieldName="Amount" UnboundType="GridUnboundColumnType.Decimal" DisplayFormat="c" />
    </Columns>
</DxGrid>

@code {
    object GridDataSource { get; set; }

    protected override void OnInitialized() {
        GridDataSource = Northwind.Orders
            .Include(i => i.Customer)
            .Include(i => i.OrderDetails)
            .Include(i => i.ShipViaNavigation)
            .ToList();
    }

    void Grid_CustomColumnDisplayText(GridCustomizeCellDisplayTextEventArgs e) {
        if (e.FieldName == "Customer") {
            var customer = (Customer)e.Value;
            e.DisplayText = $"{customer.CompanyName} ({customer.Country}, {customer.City})";
        }
    }

    void Grid_CustomUnboundColumnData(GridUnboundColumnDataEventArgs e) {
        if (e.FieldName == "Amount") {
            var details = (ICollection<OrderDetail>)e.GetRowValue("OrderDetails");
            e.Value = details.Sum(i => i.Quantity * i.UnitPrice * (1 - (decimal)i.Discount));
        }
    }

    void OnCustomSort(GridCustomSortEventArgs e) {
        if (e.FieldName == "OrderDate") {
            e.Handled = true;
            int month1 = Convert.ToDateTime(e.Value1).Month;
            int month2 = Convert.ToDateTime(e.Value2).Month;
            if (month1 > month2)
                e.Result = 1;
            else if (month1 < month2)
                e.Result = -1;
            else e.Result = System.Collections.Comparer.Default.Compare(Convert.ToDateTime(e.Value1).Day, Convert.ToDateTime(e.Value2).Day);
        }
    }
}

Grid - Custom Sorting

Implements

See Also