Skip to main content

Step 2: Enable Sorting

  • 3 minutes 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.



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


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 {

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;

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:GridColumn FieldName="Hot" Visible="False" ShowInColumnChooser="False" />
            <dxg:GridColumn FieldName="Week" Visible="False" ShowInColumnChooser="False" />
    static PropertyDescriptorCollection GetCustomProperties() {
        var customProperties = TypeDescriptor.GetProperties(typeof(IssueData))
            .Where(x => x.Name != "Tags")
            .Concat(new[] {
                new DynamicPropertyDescriptor("Hot", typeof(string), x => null),
                new DynamicPropertyDescriptor("Week", typeof(string), x => null)
        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;
                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:


Continue or Review