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

Sorting

The Kendo UI Gantt for Angular enables you to sort single or multiple data fields.

Getting Started

To enable sorting, set the sortable option of the Gantt to true.

Clicking a column header sorts the content by a column field. A second click toggles the sort direction; a third one reverts to the unsorted state.

Example
View Source
Edit In Stackblitz  
Change Theme:

Sorting by Multiple Fields

The Gantt supports sorting by several fields. The Gantt indicates displays a number next to the sorting indicator to indicate the sorting order.

To enable multiple-column sorting, set the sortable option to a SortSettings object which contains { mode: 'multiple' }.

Example
View Source
Edit In Stackblitz  
Change Theme:

Setting the Initial Sort Order

To set the initial sorting configuration, bind the sort property of the TreeList to a collection of sort descriptors. For more information on how to process data collections, refer to the article on the process helpers for bulk data operations.

You can set the sorting direction of each field to ascending or descending by configuring the dir property of the SortDescriptor to asc or desc respectively. If dir is not set, the descriptor will not be processed.

The following example demonstrates how to set a sortable Gantt with initially applied sorting configuration.

Example
View Source
Edit In Stackblitz  
Change Theme:

Disabling the Unsorted State

The Gantt allows the user to remove a field from the sort order after cycling the sort direction. To disable this behavior and ensure that the fields are always sorted, set the sortable option to a SortSettings object which contains { allowUnsort: false }

Example
View Source
Edit In Stackblitz  
Change Theme: