Angular Grid Manual Sorting
The manual sorting gives the developer full control over the arranging of the data in the desired order. Compared to the sorting with the built-in directive, the manual approach provides greater transparency of the process because it requires you to handle the Angular Grid events manually. The manual sorting is especially useful when you require additional customizations of the sorting logic.
To enable sorting:
- Set the
sortableproperty. - Bind the
sortoption to a collection ofSortDescriptorobjects. - Handle either of the following events:
sortChangeevent—Use this event when you enable only the sorting data operation.dataStateChangeevent—Use this event when you enable more than one data operation, for example, sorting and filtering. For more details, check the section on how to handle multiple data operations.
The steps above are identical regardless if you process the data locally or send a request to the server to sort the data.
Sorting Local Data
To sort local data, use the built-in orderBy() or process() functions.
When other data operations like paging, filtering, or grouping, are also enabled, handle the
dataStateChangeevent instead ofsortChangeand use theprocess()method. For more details, check the section on how to handle multiple data operations.
The following example demonstrates how to sort the data by handling the sortChange event and using the orderBy() function.
Sorting on the Server
Handle the sortChange, or dataStateChange event to send a request containing information about the current Grid state to the server. For more details, check the section on how to handle multiple data operations using remote data.
Custom Sorting
To implement custom sorting logic, use the compare function of the SortDescriptor. This callback defines how items are compared during sorting, which is useful for scenarios such as:
- Sorting string-based identifiers with numeric suffixes (
"ORD-1","ORD-10","ORD-2"sorted as 1, 2, 10) - Handling special values like
NaNornull - Applying domain-specific sorting rules
The logic within the compare function should be adjusted according to your specific sorting requirements.
The following example demonstrates how to sort order IDs with string prefixes numerically. Without the custom compare callback, the default alphabetical sorting would order "ORD-10" before "ORD-2". With the custom logic, the numeric portions are extracted and sorted correctly (1, 2, 3... 10, 11... 100).