Exploring Cool Features of Devexpress' ASPxGridView, Page 5
Implementing a Custom Sort
The default sort order uses comparisons based on the data type. For example, sorting on a string column will sort on the spelling of the text in the columns. If you wanted to deviate from the default sorting behavior, you can implement custom sorting for individual columns.
Custom sorting works by setting some properties, implementing a CustomColumnSort event handler, checking the field name, and then manually defining the sort. (Borrowed from one of the many great videos on tv.devexpress.com) the following steps set up sorting the Product Name column by length instead of spelling—shorter words appear earlier and longer words appear later.
- Open the Default.aspx page in the designer and click the Tasks button (on the upper right-hand side of the ASPxGridView).
- Select the Columns option to open the Columns Editor Form.
- Expand the Settings property and set the SortMode sub-property to Custom, and change the SortMode to 0. (Use Figure 7 as a visual guide).
Figure 7: Change the Settings.SortMode to Custom and the SortIndex to 0 to get the ASPxGridView to call the CustomerColumnSort event.
Unfortunately, the code in Listing 4 won't get called with an XpoDataSource.ServerMode set to True. You will have to make a choice: advanced server management of dataset sizes or custom sorting.
Listing 4: Turn XpoDataSource.ServerMode to False and add the following code to sort the Product Name column by length and spelling.
Protected Sub ASPxGridView1_CustomColumnSort( _ ByVal sender As Object, _ ByVal e As DevExpress.Web.ASPxGridView. _ CustomColumnSortEventArgs) _ Handles ASPxGridView1.CustomColumnSort ' Sort by length first, spelling second If (e.Column.FieldName = "ProductName") Then e.Handled = True Dim s1 As String = e.Value1 Dim s2 As String = e.Value2 If (s1.Length > s2.Length) Then e.Result = 1 ElseIf (s1.Length = s2.Length) Then e.Result = String.Compare(s1, s2) Else e.Result = -1 End If End If End Sub
Can you spot what is missing in the code? If you guessed that the sort in Listing 4 will always sort in ascending-length order, you are right. Checking the event argument's e.SortOrder property and figuring out how to sort in ascending and descending order is left to the reader as an exercise.
Another great feature of the ASPxGridView from Devexpress is the ability to group data using a drag and drop feature. Enable grouping and all the user has to do at runtime is drag a column header to the group panel and the ASPxGridView is re-arranged by that group. Drag a second column header to the group panel and a secondary grouping will be created. To enable grouping, click the ASPxGridView's Task button and check the Show Group Panel checkbox.
Run the application and you will now see the group panel with the hint about dragging a column header (see Figure 8 to see me dragging the Product Name column header) and Figure 9 shows how the grid data is re-structured to show products grouped by Product Name.
Figure 8: This figure is intended to show the column header in motion being dragged to the group panel.