Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Collapse]Data Grid
   [Expand]Getting Started
   [Expand]Binding to Data
   [Expand]Grid View
   [Expand]View Technology
   [Expand]Grouping
   [Collapse]Sorting
     Sorting Overview
     Sortable and Non-Sortable Columns
     Tutorial: Custom Sorting and Non-Sortable Columns
     Tutorial: Data Sorting Basics
     Tutorial: Sorting by Values or Display Text
   [Expand]Summaries
   [Expand]Data Editing
   [Expand]Filtering and Locating Rows
   [Expand]Focus and Selection Handling
   [Expand]Processing Rows
   [Expand]Formatting Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
   [Expand]Batch Modifications
   [Expand]Hit Information
   [Expand]Hints
   [Expand]Popup Menus
   [Expand]Saving and Restoring Layouts
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]Examples
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Tutorial: Sorting by Values or Display Text

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.

Expanded 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".

Expanded 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.

Expanded 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.

Expanded See Also

How would you rate this topic?​​​​​​​