New to Kendo UI for Angular? Start a free 30-day trial

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 Grid events manually. The manual sorting is especially useful when you require additional customizations of the sorting logic.

To enable sorting:

  1. Set the sortable property.
  2. Bind the sort option to a collection of SortDescriptor objects.
  3. Handle either of the following events:
    • sortChange eventUse this event when you enable only the sorting data operation.
    • dataStateChange eventUse this event when you enable more than one data operation, for example, sorting and filtering. Check the Data Operations article for more details 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 dataStateChange event instead of sortChange. 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.

Example
View Source
Change Theme:

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.