Kendo-angular: Grid: header sorted -> no style to set

[meriturva]

We just would like to make column header bold when user has selected it for sorting purpose.
On Kendo UI for Jquery we had "data-dir" attribute, we really don't find a way to do css styiling on header when it is sorted.

We know that we could implement a kendoGridHeaderTemplate but we have to replicate a lot of logic kendo already has. We just would like to make header link bold!
Any advice?

[dydFreeman]

@meriturva i have the same problem. Have you find any solution?

[rkonstantinov]

Please be aware that this repo is for bug reports with the components. If you need technical support assistance you could:

• post your question on SO.
• we offer private support through Your Account on telerik.com.

A hint about how to implement such functionality will be to use the sortChange event and headerClass to detect and apply the CSS class to the appropriate column.

[meriturva]

Thanks @rkonstantinov for advice.
What i have to say is that i cannot use private support (i have DevCraft Ultimate license actually) but from private support i already got answer like:

This is a new and separate product, currently in beta stage and free for use and community preview. We will release a commercial offering in 2017 and that will also include dedicated support service.

So just to know .. could i start to use private support right now? or is it too early?

[rkonstantinov]

yes, you can :wink:

[meriturva]

Anyway @rkonstantinov your solution doesn't fit my requirements. I have a lot of grids on my pages an i cannot duplicate sortChange event and headerCass for every single different column. It is not suitable on my side. I'm thinking on different solution right now.

[tsvetomir]

There's no need to handle the sortChange event if you're using the [headerClass] binding. This will allow you to reuse the code as well.

See this plunkr for a very simplified example for headerClass usage.

    <kendo-grid-column 
      field="ContactName"
      title="Contact Name"
      [width]="150"
      [headerClass]="{ 'sorted': isSorted }">

[meriturva]

I have created a new plunker with my last implementation: http://plnkr.co/edit/YyWPHKkiPgHkQwd1CR8x

What i have to say is that it is really ugly (and it works just for sorting mode == sigle).

Just a comment, you have already a ngClass to handle sort icons near to column title, i think it is better to use same approach to add a class to whole th class instead replicate logic. For example if i have to implement same approach for multiple sort feature on few grids i guess it is not so convenient.

Secondly you have to add aria attribute aria-sort https://www.w3.org/WAI/PF/aria/states_and_properties#aria-sort

so you need to add something on th html element for sure!

[rkonstantinov]

Actually you could implement a directive which to do this in less than 20 lines. Here is a plunkr with basic implementation.

[meriturva]

Great @rkonstantinov !
So thanks...really....
you make me so happy regarding my choice of Kendo and Angular 2!

[meriturva]

@rkonstantinov last question, i promise!

Are you going to implement aria standard on grid? i see on other elements as DropDown that aria is correctly implemented and i just would like to know your plan about grid!

Again thanks.

[rkonstantinov]

Yes, we will add accessibility support in the following months.

[tsvetomir]

To confirm, Accessibility support is on top of our list and we'll start working on it soon.
We'll need few iterations to get it right and claim full support.