KendoReact Data Grid Single-column Sorting

The KendoReact Data Grid provides powerful sorting capabilities that allow users to organize and analyze data effectively. Sorting can be applied to a single column or multiple columns simultaneously, depending on the application’s requirements.

Basics of Sorting in the KendoReact Data Grid

Sorting in the Grid is enabled through the sortable property. When sorting is enabled, users can click on column headers to sort data in ascending or descending order. Additional customization options allow for multi-column sorting and custom sorting logic in either one of the following modes:

• Built-in State Management: The Grid manages its own sorting state internally.

• Controlled Mode: The sorting state is externally managed by handling events and updating the state accordingly.

Features of Sorting

• Single-column Sorting—Users can sort data by one column at a time, with an option to unsort.
• Multiple-column Sorting—Allows sorting by multiple columns, defining sorting priorities.
• Custom Sorting Logic—Developers can implement custom compare functions
• Reversing Sorting Order—Allows you to prioritize the last sorted column.
• Client-side and Server-side Sorting—allows you to handle the sorting on the client for fast updates or processed on the server for larger datasets.

You can also enable the unsorting of columns by utilizing the sortable.allowUnsort option.

Using the Built-in State Management for Sorting

To enable sorting in the KendoReact Grid and utilize its built-in state management, follow these steps:

1. Enable the autoProcessData prop to allow the Grid to handle the updated state automatically.
2. Set the sortable prop of the Grid to enable sorting.
3. Set the defaultSort prop to define the initial sorting.

The following example demonstrates how to use sorting handled by the built-in state management of the KendoReact Grid.

Using the Sorting in Controlled Mode

To enable sorting in the KendoReact Grid and use it in controlled mode, follow these steps:

1. Set the sortable option of the Grid and set its mode prop to single.
2. Set the field option of the Grid column.
3. Utilize the sort option to apply the sorting styles and buttons to the affected columns.
4. Handle the onSortChange or the onDataStateChange event of the Grid. The onDataStateChange event is recommended when the Grid will have other data operations as it provides the complete dataState in a single event.
5. Sort the data on the client by using our built-in methods orderBy or process. The data can also be sorted on the server by making a request using the event parameters.

The orderBy method is recommended when using the onSortChange event and the process method is recommended when using the onDataStateChange event.

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

Single-column Sorting

Single-column sorting allows users to sort records by clicking on a column header. Clicking repeatedly cycles through ascending, descending, and unsorted states if enabled.

Learn more about enabling and customizing single-column sorting: Single-column Sorting Guide

Multiple-column Sorting

Multiple-column sorting lets users define a sorting hierarchy by sorting several columns at once. The order of sorting can be adjusted to prioritize certain columns.

Explore multiple-column sorting options: Multiple-column Sorting Guide

Customizing the Sort Compare Function

The SortDescriptor allows setting custom compare function for providing custom sorting logic. In the context of the Grid, the onSortChange or onDataStateChange events can be handled for finding the SortDescriptor for specific field and adding the custom sort compare function.

The following example demonstrates how to add custom compare function to version field within the onDataStateChange event of the Grid:

Reversing Sorting Order

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

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

KendoReact Data Grid Sorting APIs

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

Suggested Links

• React Data Grid
• Data Query Overview
• React Data Grid High-Level Overview