Step 2: Enable Sorting

  • 3 min to read

You should enable data operations after binding the GridControl to a virtual source.

In this step, we describe how to enable the sorting feature:

  • You implement the sorting data operations in the virtual source.
  • Then you enable these data operations in the GridControl.

VirtualSourcesAdvancedTutorialSorting

NOTE

The Issues Service is used as an example of a data source in this tutorial.

Overview

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

  • Default - records are shown from new to old
  • Hot - issues with the most views over the last few days
  • Week - issues with the most views this week
  • Created Date
  • Votes
public enum IssueSortOrder {
    Default,
    Hot,
    Week,
    CreatedAscending,
    CreatedDescending,
    VotesAscending,
    VotesDescending,
}

In Step 1: Fetch Data and Enable Scrolling, you fetched rows with the default sort order:

public MainWindow() {
    // ...
    source.FetchRows += (o, e) => { e.Result = FetchRowsAsync(e); };
}
static async Task<FetchRowsResult> FetchRowsAsync(FetchRowsAsyncEventArgs e) {
    IssueSortOrder sortOrder = GetIssueSortOrder(e);
    const int pageSize = 30;
    var issues = await IssuesService.GetIssuesAsync(page: e.Skip / pageSize, pageSize: pageSize, sortOrder: sortOrder, filter: null);
    return new FetchRowsResult(issues, hasMoreRows: issues.Length == pageSize);
}
static IssueSortOrder GetIssueSortOrder(FetchRowsAsyncEventArgs e) {
    return IssueSortOrder.Default;
}

To Enable Sorting

  1. Implement the Hot and Week sort orders. Note that the GridControl does not have any values for these objects.

    <dxg:GridControl x:Name="grid" >
        <dxg:GridControl.Columns>
            <!-- -->
            <dxg:GridColumn FieldName="Hot" Visible="False" ShowInColumnChooser="False" />
            <dxg:GridColumn FieldName="Week" Visible="False" ShowInColumnChooser="False" />
        </dxg:GridControl.Columns>            
    </dxg:GridControl>
    
    static PropertyDescriptorCollection GetCustomProperties() {
        var customProperties = TypeDescriptor.GetProperties(typeof(IssueData))
            .Cast<PropertyDescriptor>()
            .Where(x => x.Name != "Tags")
            .Concat(new[] {
                CreateTagsProperty(),
                new DynamicPropertyDescriptor("Hot", typeof(string), x => null),
                new DynamicPropertyDescriptor("Week", typeof(string), x => null)
            })
            .ToArray();
        return new PropertyDescriptorCollection(customProperties);
    }
    
  2. Implement sorting in the virtual source:

    static IssueSortOrder GetIssueSortOrder(FetchRowsAsyncEventArgs e) {
        if(e.SortOrder.Length == 0)
            return IssueSortOrder.Default;
        var sort = e.SortOrder.Single();
        switch(sort.PropertyName) {
            case "Hot":
                if(sort.Direction != ListSortDirection.Descending)
                    throw new InvalidOperationException();
                return IssueSortOrder.Hot;
            case "Week":
                if(sort.Direction != ListSortDirection.Descending)
                    throw new InvalidOperationException();
                return IssueSortOrder.Week;
            case "Created":
                return sort.Direction == ListSortDirection.Ascending
                    ? IssueSortOrder.CreatedAscending
                    : IssueSortOrder.CreatedDescending;
            case "Votes":
                return sort.Direction == ListSortDirection.Ascending
                    ? IssueSortOrder.VotesAscending
                    : IssueSortOrder.VotesDescending;
            default:
                return IssueSortOrder.Default;
        }
    }
    
  3. Allow sorting in the GridControl:

    <dxg:GridColumn FieldName="Created" AllowSorting="True" DefaultSortOrder="Descending" />
    <dxg:GridColumn FieldName="Votes" AllowSorting="True" DefaultSortOrder="Descending" />
    <dxg:GridColumn x:Name="hotColumn" FieldName="Hot" Visible="False" ShowInColumnChooser="False" AllowSorting="True" AllowedSortOrders="Descending" SortOrder="Descending" />
    <dxg:GridColumn x:Name="weekColumn" FieldName="Week" Visible="False" ShowInColumnChooser="False" AllowSorting="True" AllowedSortOrders="Descending" />
    
  4. The Hot and Week columns are invisible in the GridControl.

    Set the TableView.CompactPanelShowMode and TableView.CompactSortElementShowMode properties to Always to allow end-users to specify the sort order in the compact panel:

    <dxg:TableView CompactPanelShowMode="Always" CompactSortElementShowMode="Always" />
    

    The image below shows the result:

    VirtualSourcesAdvancedTutorialSortingCompactPanel

To Continue or Review