Angular Grid Sorting Basics

The sorting functionality enables you to arrange the data by single or multiple fields in ascending or descending order.

You can enable the sorting feature by using two methods:

• The Data-Binding Directive—Allows you to implement sorting (or other data operations) with less code.
• Manual Sorting—Provides more control when implementing the sorting feature.

Using the Data-Binding Directive

When you use the built-in DataBindingDirective, the Grid performs the sorting automatically for you. To enable the sorting when the kendoGridBinding directive is applied:

1. Set the sortable option of the Grid.
2. (Optional) Set the sort property to a collection of SortDescriptor objects. This allows you to sort the data by specific criteria during the initialization of the Grid.

html

<kendo-grid
    [kendoGridBinding]="gridData"
    [sortable]="true">
    <kendo-grid-column field="ProductID"></kendo-grid-column>
</kendo-grid>

Further details on how the data binding directive works under the hood are available in the data operations with the built-in directive documentation section.

The following example demonstrates the Grid sorting functionality when the kendoGridBinding directive is applied.

Change Theme

Theme

Loading ...

Suggested Links

• Manual Sorting
• Multi-column Sorting
• API Reference of the GridComponent
• API Index of the Grid