Display Up/Down Sorting

4 posts, 0 answers
  1. Rich Reuter
    Rich Reuter avatar
    16 posts
    Member since:
    Aug 2012

    Posted 23 Jan 2017 Link to this post

    Is there a way to display a up/down sorting icon (see attached) in the header of a grid column to indicate that you can sort that column?
  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1296 posts

    Posted 25 Jan 2017 Link to this post

    Hello Rich,

    You can use the columns.headerTemplate to customize the layout of the headers in accordance with your preference:

    http://dojo.telerik.com/iSomi

    http://docs.telerik.com/kendo-ui/styles-and-layout/icons-web#list-of-font-icons

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Rich Reuter
    Rich Reuter avatar
    16 posts
    Member since:
    Aug 2012

    Posted 25 Jan 2017 in reply to Dimiter Topalov Link to this post

    Thanks Dimiter, that is helpful. However, I don't think that I was clear enough in my question to communicate what I really need.

    I am trying to accomplish the following:

    * Show the up/down glyph to indicate that the column can be sorted (which was answered)

    * When the column header is clicked, instead of showing the native up and down sorting arrows, the column header should contain the glyph up and down arrows (k-i-arrow-60-up, k-i-arrow-60-down)

    Is there also a way to replace the sorting arrows that are native to the grid?

    Thanks,

    Rich

  4. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1296 posts

    Posted 27 Jan 2017 Link to this post

    Hello Rich,

    Thank you for clearing up the desired functionality. The most straightforward approach would be to overwrite the CSS content rule for the following selectors:

    .k-i-sort-asc-sm:before {
    content: "\e004";
    }
         
    .k-i-sort-desc-sm:before {
    content: "\e006";
    }

    I have modified the example accordingly:

    http://dojo.telerik.com/iSomi/2

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top