Sorting data in a Grid using a selected column

The Kendo UI Grid comes with several features, such as sorting by selected columns, pagination, grouping, and scrolling. These configuration options can be specified at the Grid configuration level and at the column level as well.

How to do it…

To enable the sort by column feature, set the sortable configuration option to true. This will make all the columns in the Grid available for sorting. If you want some of the columns in the Grid to not be available for sorting, then you can add the same property, sortable, with a false value at the column level as well:

$("#grid").kendoGrid({
  columns: [
    {
      field : 'movieName',
      title : 'Movie',
      sortable: false,
    },
    {
      field : 'year',
      title : 'Year' 
    },
    {
      field : 'rating',
      title : 'Rating'
    }
  ],  
  dataSource: {
    transport: {
      read: 'http://localhost/kendo/code/chapter2/remote.json'
    }
  },
  sortable: true
});

Here, by adding sortable as true, all the columns in the Grid will be available for sorting. At the column level, for the movieName field, the sortable option is set to false. This will disable the sorting functionality on the first column. Also, note that adding the sortable option for each column is not required since this is specified at the Grid level.

In many scenarios, you would like the Grid columns to be sorted by multiple columns. In our example, the Grid can be sorted by year first and then by rating. To make this option available, set the option mode as multiple:

sortable: {
  mode: 'multiple'
}

By default, the value for mode is single, that is, the columns will be sorted based on the selected column.

How it works…

When you render the Grid with the sortable mode set to either single or multiple, the Grid is shown as it is. However, when you hover over a sortable column, the cursor changes to a pointer and when you click on it, the Grid gets sorted by the selected column. In the single mode, the Grid is sorted based on the selected column, as shown in the following screenshot:

Here, the Grid is sorted by the third column, Rating; an upward arrow indicates that the Grid is sorted in the ascending order. Based on this column, the data in the Grid is sorted.

Now, let's take a look at an example where the sortable mode is set to multiple. As mentioned earlier, this mode allows users to sort by multiple columns. This example allows the columns in the Grid to be sorted by the first selected column and then by the second selected column.

Here, the Grid is sorted by the second column, Year, first and then by the third column, Rating. A downward arrow indicates that the column is sorted in the descending order. Here, the Grid is sorted by listing the recent movies that have high ratings.