blog-banner

kendoui

Here we share the experiences with the everyday technical challanges we face working on the projects.

<< Back

How to show sort ordinals in kendo ui grid column headers

Piyush Bhatt 06/14/2017 10:00 AM

Have you come across using multi-column sorting in Kendo Grid? If no, you want to try it out. But if Yes, you would have noticed that user wants to know order in which columns are sorted. This blog post explains how to display ordinals in column header so user can easily understand the sorting order.

Kendo ui grid supports sorting multiple columns. Following is a documented configuration to support multi-column sort.

sortable: { mode: "multiple", allUnsort: true },

 Users can click on column headers to sort the grid by that. Kendo by default will display up/down arrows to indicate whether the sorting is ascending or descending. But wouldn’t it be nice to see the order of the columns in which the grid is sorted. For example, in following grid is sorted by Age Ascending, Line 1 Descending, Percent Descending – and it shows ordinals 1, 2 and 3 next to each column.

Above behavior can be achieved using following code snippet. For a live demo visit - http://dojo.telerik.com/OzUbuc

 

//this is used to add sort orginals (1, 2, 3 etc.) to each sort columns

//to use this configure the multiple sorting in grid as follows and call this from dataBound.

//example:

//  sort : { mode: "multiple", allowUnsort: true }

//  dataBound: function(e) { this.addSortOrdinals(); }

//

kendo.ui.Grid.fn.addSortOrdinals = function() {

    var self = this;

    this.thead.find('.k-link sup').remove();

 

    var sorted = this.dataSource.sort();

    if (!sorted) { return; }

    sorted.forEach(function(s, i) {

        var th = self.thead.find('th[data-field=' + s.field + '] .k-link');

        if (th.find('sup').length) {

            th.find('sup').text(i + 1);

        } else {

            th.prepend('<sup>' + (i + 1) + ' </sup>');

        }

    });

}//addSortOrdinals

Here is how the grid will look like with sorting orginals.

kendo-hack-5.png

Check out other tips -  How to clear filter while adding new row in Kendo UI Grid

 

AI Software provides custom software development services to small to Fortune 500 clients in US. Telerik Kendo UI is a great tool for modern enterprise web application development. We have a pool of .Net professionals with skills in Kendo UI and similar other toolset. We can also train your team to quickly become productive with Kendo tools and modern web development best practices. 

To learn more about us or to setup a training for Kendo UI, please  Contact Us

 

  • AI Software FaceBook Page
  • AI Software Twitter Page

Recent Posts

Archives