Sorting

The native Vue Grid by Kendo UI enables you to sort single and multiple data-bound columns.

Getting Started

To enable sorting:

1. Set the sortable option of the Grid.
2. Use the sort option to apply the sorting styles and buttons to the affected columns.
3. When sortable is configured and the user tries to sort a column, the sortchange event is emitted. Handle the onSortChange event where you have the option to sort the data programmatically, to make a request to the server for server sorting, or to use the process method of the DataQuery library which automatically processes the data.

The following example demonstrates the minimum required configuration for sorting the Grid records.

Change Theme

Theme

Loading ...

Customize Sorting

The sorting feature of the Grid allows you to clear the sorting on columns and sort the records by multiple columns.

• To enable the unsorting of columns, use the sortable.allowUnsort option which determines if the columns can be unsorted.
• To enable the sorting of multiple columns, set the sortable.mode option which accepts a single or multiple value.

Change Theme

Theme

Loading ...

Reversing Sorting Order

The Grid allows you to reverse the sorting order of its columns. To apply a higher priority to the column which was last sorted, place the last column at the beginning of the sorting array before you set the new state. When a column is removed from the sorting state, you do not need to reverse the items.

jsx

sortChange(event) {
    const sort = event.sort;
    if (sort.length >= this.state.sort.length) {
        sort.unshift(sort.pop());
    }
    this.setState({
        products: this.GetProducts(sort),
        sort: sort
    });
}

Suggested Links

• API Reference of the Grid
• API Index of the Grid