• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Sorting

The KendoReact Data Grid enables you to sort single and multiple data-bound columns.


Getting Started

To enable sorting:

  1. Set the sortable option of the Grid.
  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 sorting the Grid records.

Example
View Source
Change Theme:

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 a single or multiple value.
Example
View Source
Change Theme:

Custom 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:

Example
View Source
Change Theme:

Reversing Sorting Order

The Grid allows you to reverse the sorting order of its columns. To apply 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 have 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
    });
}