Skip to main content

GridColumnSortMode Enum

Lists values that specify how to sort grid data.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public enum GridColumnSortMode

Members

Name Description
Default

If the column editor is a combo box with specified text and value field names, the Grid sorts column data by display text. Otherwise, the Grid sorts column data by values.

Value

The Grid sorts column data by values.

DisplayText

The Grid sorts column data by display text.

Custom

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

Related API Members

The following properties accept/return GridColumnSortMode values:

Remarks

You can sort Grid data by values or by display text, or implement a custom sorting algorithm.

Default Sort Mode

The Grid sorts column data by values unless the column editor is a combo box editor with specified text and value field names. In the latter case, the Grid sorts column data by display text strings.

In the following code snippet, all columns use the default sort mode. The Grid sorts the Category column by display text and sorts the Unit Price column by values:

Grid - Default Sort Mode

@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory

<DxGrid Data="Products">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="ProductName" Width="25%" />
        <DxGridDataColumn FieldName="CategoryId" SortIndex="0">
            <EditSettings>
                <DxComboBoxSettings Data="Categories"
                                    ValueFieldName="CategoryId" 
                                    TextFieldName="CategoryName" />
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" SortIndex="1" />
        <DxGridDataColumn FieldName="Discontinued" />
    </Columns>
</DxGrid>
@code {
    NorthwindContext Northwind { get; set; }
    List<Product> Products { get; set; }
    List<Category> Categories { get; set; }

    protected override async Task OnInitializedAsync() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        Products = await Northwind.Products.ToListAsync();
        Categories = await Northwind.Categories.ToListAsync();
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

Sort Data by Values

Set a column’s SortMode property to Value to sort column data by values. The Grid sorts column data differently depending on the data type:

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

The following code snippet sorts column data by values:

<DxGrid Data="Products">
    <Columns>
        <!-- ... -->
        <DxGridDataColumn FieldName="UnitPrice" 
                          DisplayFormat="c" 
                          SortIndex="0"
                          SortMode="GridColumnSortMode.Value" />
    </Columns>
</DxGrid>

Sort Data by Display Text

Set a column’s SortMode property to DisplayText to compare column values by characters. In this mode, 10 and 100 values appear before 2.

Note

When the Grid component is bound to a Server Mode data source or GridDevExtremeDataSource, the component sorts data in all columns by values.

The following code snippet activates the DisplayText mode for the Unit Price column:

<DxGrid Data="Products">
    <Columns>
        <!-- ... -->
        <DxGridDataColumn FieldName="UnitPrice" 
                          DisplayFormat="c" 
                          SortIndex="0"
                          SortMode="GridColumnSortMode.Value" />
    </Columns>
</DxGrid>

Grid - Sort Data By Display Text

Custom Sorting

Follow the steps below to implement a custom sorting algorithm:

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

Note

When the Grid component is bound to a Server Mode data source or GridDevExtremeDataSource, the component sorts data in all columns by values.

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

@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<DxGrid Data="GridDataSource"
        CustomSort="OnCustomSort">
    <Columns>
        <DxGridDataColumn FieldName="OrderDate"
                          DisplayFormat="d"
                          SortIndex="1"
                          SortMode="GridColumnSortMode.Custom"/>
        <DxGridDataColumn FieldName="ShipName" />
        <DxGridDataColumn FieldName="ShipCity" />
        <DxGridDataColumn FieldName="Freight"
                          DisplayFormat="n2"/>
    </Columns>
</DxGrid>

@code {
    object GridDataSource { get; set; }
    NorthwindContext Northwind { get; set; }

    protected override void OnInitialized() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        GridDataSource = Northwind.Orders.ToList();
    }

    void OnCustomSort(GridCustomSortEventArgs e) {
        if(e.FieldName == "OrderDate") {
            var date1 = Convert.ToDateTime(e.Value1);
            var date2 = Convert.ToDateTime(e.Value2);

            if(date1.Month == date2.Month)
                e.Result = date1.Day.Compare(date2.Day);
            else
                e.Result = date1.Month.Compare(date2.Month);
            e.Handled = true;
        }
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

Grid - Custom Sorting

Watch Video: Grid - Sort Data

View Example: Grid - Custom Sorting

See Also