Sorting
The native Vue Grid by Kendo UI enables you to sort single and multiple data-bound columns.
Getting Started
To enable sorting:
- Set the
sortable
option of the Grid. - Utilize the
sort
option to apply the sorting styles and buttons to the affected columns. - When
sortable
is configured and the user tries to sort a column, thesortchange
event is emitted. Handle theonSortChange
event where you have the option to sort the data programmatically, to make a request to the server for server sorting, or to use theprocess
method of theDataQuery
library which automatically processes the data.
The following example demonstrates the minimum required configuration for sorting the Grid records.
Customize Sorting
The sorting feature of the Grid enables you to unsort the columns and sort the records by multiple columns.
- To enable the unsorting of columns, utilize 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 asingle
ormultiple
value.
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.
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
});
}