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.2.dll
NuGet Package: DevExpress.Blazor
Declaration
[DefaultValue(GridColumnSortMode.Default)]
[Parameter]
public GridColumnSortMode SortMode { get; set; }
Property Value
Type | Default | Description |
---|---|---|
GridColumnSortMode | Default | A GridColumnSortMode 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>
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"/>
Note
The Grid does not support sorting by display text when you use a Server Mode data source or GridDevExtremeDataSource.
Custom Sorting
Follow the steps below to implement custom logic.
- Set the
SortMode
property toGridColumnSortMode.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.
Note
The Grid does not support custom sorting when you use a Server Mode data source or GridDevExtremeDataSource.
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
@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") {
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);
}
}
public void Dispose() {
Northwind?.Dispose();
}
}