Display sort order on column headers

13 posts, 0 answers
  1. Madhura
    Madhura avatar
    3 posts
    Member since:
    Dec 2013

    Posted 22 Jan 2014 Link to this post

    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.


  2.
  3. Dimo
    Admin
    Dimo avatar
    8482 posts

    Posted 22 Jan 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Ron
    Ron avatar
    75 posts
    Member since:
    Oct 2010

    Posted 29 Dec 2014 in reply to Dimo Link to this post

    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?
  7. Dimo
    Admin
    Dimo avatar
    8482 posts

    Posted 29 Dec 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8.
  9. Ron
    Ron avatar
    75 posts
    Member since:
    Oct 2010

    Posted 29 Dec 2014 in reply to Dimo Link to this post

    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
  11. Dimo
    Admin
    Dimo avatar
    8482 posts

    Posted 30 Dec 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. Ron
    Ron avatar
    75 posts
    Member since:
    Oct 2010

    Posted 05 Jan 2015 in reply to Dimo Link to this post

    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). 
  14.
  15. Dimo
    Admin
    Dimo avatar
    8482 posts

    Posted 05 Jan 2015 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  17. Ron
    Ron avatar
    75 posts
    Member since:
    Oct 2010

    Posted 06 Jan 2015 in reply to Dimo Link to this post

    Hi Dimo,

    I have managed to implement the desired behavior. It's not the prettiest way to implement it but for now it will have to do.

    After having implemented this behavior, I can actually see the sort order. And I have to say that it doesn't make sense to me the way things are (re)ordered. But I'll make a new post for that.

    Thanks, 
    Ron
  19. Ron
    Ron avatar
    75 posts
    Member since:
    Oct 2010

    Posted 07 Jan 2015 in reply to Ron Link to this post

    I have attached a screenshot of the end result.
  20.
  21. Ron
    Ron avatar
    75 posts
    Member since:
    Oct 2010

    Posted 07 Jan 2015 in reply to Ron Link to this post

    Something went wrong uploading the image. 
  23. Adam
    Adam avatar
    2 posts
    Member since:
    Jul 2015

    Posted 09 Feb 2016 in reply to Ron Link to this post

    How did you finally implement this?

     

  25. Mark
    Mark avatar
    16 posts
    Member since:
    Nov 2015

    Posted 10 Feb 2016 in reply to Adam Link to this post

    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).

     

     

     

  26.
Back to Top