Tutorial: Sorting by Values or Display Text
- 4 minutes to read
This walkthrough is a transcript of the Custom Sorting and Non-Sortable Columns video available on the DevExpress YouTube Channel.
The document shows examples of how sorting data against a column can give you unexpected results if underlying values differ from the text displayed in grid cells. In a similar manner, you will see how a sort order can change for numeric or date-time columns if their values are treated as strings. You will learn how the grid determines when to sort data using cell display text or using actual column values. The tutorial will also show you the property you can use to manually switch from one mode to another.
Default Behavior
The grid usually sorts data exactly how you expect it to. When you sort against a column containing text data, like Name, it will be sorted in alphabetical order. If you sort numeric or date-time columns, you’ll get numbers sorted from smallest to largest or dates from earliest to most recent.
Now take a look at the Priority column that uses a cell editor to transform underlying priority values of 1, 2 and 3 to the corresponding textual descriptions: “Low”, “Medium” and “High”. When you click the column header, you expect the values to be sorted from Low to High or vice versa. In reality, data is sorted in alphabetical order where “High” is followed by “Low” and only then by “Medium”.
Sorting Columns that Use LookUp and ImageComboBox Editors
Go to design time and fix the sort mode for the Priority column. First, see how the assigned ImageComboBoxEdit in-place editor is set up. Expand the GridColumn.ColumnEdit property and access the editors items collection by clicking the ellipsis button for the RepositoryItemImageComboBox.Items property. Look at the ComboBoxItem.Value and ImageComboBoxItem.Description properties. “Low” corresponds to 1, “Medium” to 2 and “High” to 3. Now you can be sure the grid can properly sort data based on those underlying values.
Access the Priority column’s settings and see that its GridColumn.SortMode property is set to ColumnSortMode.Default.
In other words, the grid View automatically determines what kind of sorting to use. For columns with ImageComboBoxEdit or LookUpEdit editors, this means sorting by display text rather than values. It makes sense because these columns usually display names extracted by the ID from another table and you’d rather organize those names alphabetically than by IDs that you won’t see. On the other hand, this doesn’t work with statuses in which sorting by IDs makes sense, while alphabetical sorting doesn’t. So to force sorting by values, switch the GridColumn.SortMode property to ColumnSortMode.Value.
Run the application and click the Priority column header. As a result, these column cells are sorted in ascending order according their edit values of 1, 2 and 3.
Sorting Columns that Use Other Editor Types
With any other editor types, the grid View sorts values - which is expected behavior. Numbers go from smallest to biggest and dates are arranged from earliest to most recent. If you were to switch from value sorting to display text mode, then 10 or 100 would appear before 2, since 1 is less than 2 and strings are simply compared character by character. To enable this mode, you’ll need to manually switch the GridColumn.SortMode property to ColumnSortMode.DisplayText.
To try this in action, sort the Created Date column to ensure that dates are arranged as expected from earliest to most recent. After that, go to the Property grid displaying column settings and change the GridColumn.SortMode property to ColumnSortMode.DisplayText. See how “11” and “12” appear before “2” and notice that the year portion doesn’t seem to be taken into account.
