Step 2: Enable Sort Operations

• Dec 30, 2021
• 3 minutes to read

This step describes how to allow users to sort rows:

• Implement sort operations in the virtual source.
• Enable these operations in the GridControl.

Note

This tutorial uses the Issues Service as a sample data source.

Run Demo: Infinite Scrolling Source - Step 2 Run Demo: Paged Source - Step 2

Sort Orders

The Issues Service allows you to apply the following sort orders:

• Default - records are shown from newest to oldest
• Created Date in Descending order
• Votes in any order

C#

public enum IssueSortOrder {
    Default,
    CreatedDescending,
    VotesAscending,
    VotesDescending
}

The Step 1: Fetch Data topic demonstrates how to fetch rows with the default sort order:

C#

[Command]
public void FetchIssues(FetchRowsAsyncArgs args) {
    args.Result = GetIssuesAsync(args);
}
async Task<FetchRowsResult> GetIssuesAsync(FetchRowsAsyncArgs args) {
    var take = args.Take ?? 30;
    var issues = await IssuesService.GetIssuesAsync(
        skip: args.Skip,
        take: take,
        sortOrder: GetIssueSortOrder(args.SortOrder),
        filter: null);

    return new FetchRowsResult(issues, hasMoreRows: issues.Length == take);
}
static IssueSortOrder GetIssueSortOrder(SortDefinition[] sortOrder) {
    return IssueSortOrder.Default;
}

Allow Users to Sort Rows

1. Implement sort operations in the virtual source:

   • Use the SortDefinition class instance to get the GridControl‘s sort options.
   • Parse these sort options and return a sort order. A command bound to the InfiniteAsyncSource.FetchRowsCommand property uses this sort order when the GridControl fetches rows.
   C#

   static IssueSortOrder GetIssueSortOrder(SortDefinition[] sortOrder) {
       if (sortOrder.Length > 0) {
           var sort = sortOrder.Single();
           if (sort.PropertyName == "Created") {
               if (sort.Direction != ListSortDirection.Descending)
                   throw new InvalidOperationException();
               return IssueSortOrder.CreatedDescending;
           }
           if (sort.PropertyName == "Votes") {
               return sort.Direction == ListSortDirection.Ascending
                   ? IssueSortOrder.VotesAscending
                   : IssueSortOrder.VotesDescending;
           }
       }
       return IssueSortOrder.Default;
   }
   

2. Allow users to sort GridControl rows by the Votes column:

   • Set the ColumnBase.AllowSorting property to true.
   • Set the ColumnBase.DefaultSortOrder property to Descending to specify the default sort order. This order is applied when a user clicks the column’s header for the first time.
   XAML

   <dxg:GridColumn FieldName="Votes" AllowSorting="True" DefaultSortOrder="Descending"/>
   

   

3. Allow users to sort GridControl rows by the Created column:

   • Set the ColumnBase.AllowSorting property to true.
   • The Issues Service can sort rows by the Created Date field in Descending order only. Set the ColumnBase.AllowedSortOrders property to Descending. This disables other sort orders by this column from the UI.
   XAML

   <dxg:GridColumn FieldName="Created" AllowSorting="True" AllowedSortOrders="Descending"/>
   

   

   In this tutorial, the Issues Service can sort data by a single column only. If your data source can sort data by multiple columns, set the GridViewBase.AllowGroupingSortingBySingleColumnOnly property to false. In this case, the GridControl can be sorted by multiple columns. To do this, users should hold the Shift key and click required column headers to sort data against these columns.

4. The Created column allows users to sort data in Descending order only. When a user clicks this column’s header, the GridControl does not change the sort order. Users should hold the Ctrl key and click the column header to clear the column’s sort order.

   Set the DataViewBase.ColumnSortClearMode property to Click to allow users to click the column’s header to apply/clear the sort order:

   XAML

   <dxg:GridControl.View>
       <dxg:TableView ColumnSortClearMode="Click"/>
   </dxg:GridControl.View>
   

   

Continue or Review

• Proceed to Step 3 - Enable Filter Operations.
• Review Step 1 - Fetch Data.