Display sort order on column headers

[Madhura]

Is there any way in Kendo Grid to display the sorting order on a multiple sortable grid?
I have a grid with multiple sort mode (sortable: { mode: "multiple"}).
When I sort on more than one column, is there a way to display the order in which sorting is applied on the grid?
For example, displaying the sort order as 1,2,3,.. on the respective column headers.

[Dimo]

Hi Madhura,

Such an enhancement is not available in the Grid. You can use the information, which the Grid DataSource sort() method provides, to show the desired information to the user via custom approach.

http://docs.kendoui.com/api/web/grid#fields-dataSource

http://docs.kendoui.com/api/framework/datasource#methods-sort

$("#GridID").data("kendoGrid").dataSource.sort()

Regards,
Dimo
Telerik

[Ron]

Can we vote for this feature to be implemented in the grid? I have the same need because for a use it's totally confusing what sort order is being used when using multiple sorting. Especially when grid content is predefined. In our case users can built grids and their content which can then be saved to the database to be re-used. When loading such a grid from the database, the sorting method used by the grid is not visible to the user. Which, again, is very confusing.

Is there maybe an example on how to build a custom solution? Anyone?

[Dimo]

Hello Ron,

Yes, you can vote here:

http://kendoui-feedback.telerik.com/

I am afraid we have no ready-to-use example for the discussed behavior, but let me know if you try implementing it yourself and have specific questions. The sort order will be reflected in the order of the items returned by the the grid.dataSource.sort() array. You can use this information in the Grid's dataBound event to append some custom HTML to the Grid header cells.

Regards,
Dimo
Telerik

[Ron]

I have added the new idea. Votes please!

I have been messing about a bit on how to implement such a feature without the grid natively supporting it. Binding to an event such as dataBound is a good trigger indeed. Unfortunately the customization of the header cells is a bitch. I was hoping to use a template, but I can't figure out a way to "reload" or "re-render" the header cells. The only option I'm seeing is to use jquery to alter the header cells' content. For instance I'm trying to user a template like:

<script type="text/x-kendo-template" id="header-template">
#= title # <span style="float: right"></span>
</script>  

Using this template, I could try to populate the "indicator" span with the appropriate value after each dataBound event. I can't seem to get #= title # working though. The column data doesn't seem to be bound when the template is evaluated. Apart from that, I find this approach a bit tedious to implement on every grid in our application. It would be a lot easier (and cleaner) to have a grid option to do this. Again, this is something that I find to be mandatory for a grid using multi-sort. It's too confusing for a user to find out what sorting order has been used without the indicator

[Dimo]

Hello Ron,

Header templates are executed only once per Grid instance, for performance reasons. Moreover, they are unrelated to the Grid datasource (which is quite logical, actually), that's why binding expressions don't work. As a result, you need to use standard DOM manipulation in the dataBound event handler, as implied earlier.

Regards,
Dimo
Telerik

[Ron]

Ok, so header templates are executed only once. That's understandable. What I don't understand why you cannot use #'title#. The title is not necessarily bound to the datasource. It's part of the configuration of the the grid columns (http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.title). 

[Dimo]

Hello Ron,

Generally, binding expressions inside Kendo UI templates depend on some dataSource, because the idea is to use the template for multiple DOM items. This scenario is of course not applicable to the header cells. Providing the Grid configuration to the template makes sense in your scenario, but this is an edge non-standard use case. Normally, one would include the title string inside the header template directly and there would be no need for making things more complicated with binding expressions. Moreover, even if the header template included binding expressions, there is no automated way to re-render header cells and apply any changes in the variables used inside the header template.

Please use standard DOM manipulation in dataBound to achieve the desired behavior.

Regards,
Dimo
Telerik

[Ron]

I have attached a screenshot of the end result.

[Ron]

Something went wrong uploading the image. 

[Adam]

How did you finally implement this?

 

[Mark]

I stumbled upon this thread while looking for just this solution.

 A bit of experimenting resulted in this (in the Change event handler):

// get the grid etc...
    if (grid != null) {
        var sorts = grid.dataSource.sort();
        $(grid.thead).find("th > a > .sort-order").remove();
        for (var i = 0, len = sorts.length; i < len; i++) {
            var x = sorts[i];
            $("th[data-field='" + x.field + "'] > a").append("<span class='sort-order'>" + (i + 1) + "</span>");
        }
    }

The corresponding css is:

.sort-order {
    float: right;
    text-align: right;
    color: #111111;  /* or whatever... */
}

 

 I don't know if this is the best way but it seems to work (I'm still testing).