Tutorial: Custom Sorting and Non-Sortable Columns

• Oct 29, 2020
• 3 minutes to read

This walkthrough is a transcript of the Custom Sorting and Non-Sortable Columns video available on the DevExpress YouTube Channel.

In this tutorial, you will learn how to implement a custom sorting algorithm to sort the Birth Date column’s values without taking into account the year part of the date, thus obtaining a properly sorted list of all birthdays in an organization. You will also learn the technique to enable sorting against columns containing non-sortable data, such as images.

Default Behavior

If you click the Birth Date column header, the default algorithm sorts dates taking into account years first, then months and then days. As you see, the list displays a January birthday, then one in May, and then a January date again, because they are sorted by years.

Implementing Custom Sorting Logic

This tutorial implements a custom sorting logic that would ignore the year part and give a list of birthdays sorted by months and dates only.

First of all, set the column’s GridColumn.SortMode property to ColumnSortMode.Custom.

After that, select the grid View and handle its ColumnView.CustomColumnSort event.

The column being processed is specified by the event’s CustomColumnSortEventArgs.Column parameter. The event handler compares two values specified using the CustomColumnSortEventArgs.Value1 and CustomColumnSortEventArgs.Value2 parameters. The result of a custom comparison is set to the CustomColumnSortEventArgs.Result parameter. This example compares birthday months. If the first month number is greater than the second, the Result parameter is set to 1. If the first month number is less than the second, set the Result parameter to -1. In case values are equal, compare days.

The event’s CustomColumnSortEventArgs.Handled parameter is set to true to prevent the default comparison mechanism from being invoked after event execution.

C#

private void gridView_CustomColumnSort(object sender, DevExpress.XtraGrid.Views.Base.CustomColumnSortEventArgs e) {
    if (e.Column.FieldName == "BirthDate") {
        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);
    }
}

Run the application and click the Birth Date column header. Cell values are now sorted based on a month and date comparison and the sort order ignores years.

Implementing Sorting Algorithm for Non-Sortable Columns

The GridControl can contain columns that display non-sortable data, such as images.

The Photo column displays images using a PictureEdit in-place editor, and nothing happens when you click its header. However, you can enable data sorting for this column too.

First of all, select the Photo column, expand its GridColumn.OptionsColumn property and set the OptionsColumn.AllowSort setting to true. Then, set its GridColumn.SortMode property to ColumnSortMode.Custom.

Add the following code to the ColumnView.CustomColumnSort event handler. When the Photo column’s data is sorted, the data will actually be sorted against the First Name column. Column values are accessed on the data source level using the event’s CustomColumnSortEventArgs.ListSourceRowIndex1 and CustomColumnSortEventArgs.ListSourceRowIndex2 parameters. The CustomColumnSortEventArgs.Handled parameter is set to true to indicate that the comparison operation was handled.

C#

private void gridView_CustomColumnSort(object sender, DevExpress.XtraGrid.Views.Base.CustomColumnSortEve
    // ...
    if (e.Column.FieldName == "Photo") {
        e.Handled = true;
        DataRowView dr1 = (gridView.DataSource as BindingSource)[e.ListSourceRowIndex1] as DataRowView;
        DataRowView dr2 = (gridView.DataSource as BindingSource)[e.ListSourceRowIndex2] as DataRowView;
        e.Result = System.Collections.Comparer.Default.Compare(dr1["FirstName"], dr2["FirstName"]);
    }
}

Run the application and click the Photo column header. Grid data is now sorted against the values in the FirstName column.