In new Kendo version 2017.1.223, column settings icon has wrong class k-i-more-vertical instead of k-i-arrowhead-s

[Kevin]

I have downloaded the new Kendo version 2017.1.223. I am using all components, and using the default Kendo styles by including kendo.default.min.css. I know that the icons changed in 2017, but there seems to be a problem related to classes that are generated by the Kendo grid.

With the new Kendo version, the column settings icons in the column headers are 3 vertical dots instead of a caret. When I inspect a column header element, I see that the span is using class 'k-icon k-i-more-vertical'. Our production site still has the previous Kendo version, and inspecting the column header element shows that the span is using class 'k-icon k-i-arrowhead-s'. 

I have attached screenshots to illustrate the problem. Please advise how to fix this so that the column headers contain caret icons instead of 3 vertical dots.

[Orlin]

Extension settingsExtension settingsExtension settingsExtension settings

Hello Kevin,

If I understand you correctly, you want the k-icon k-i-more-vertical icon (the three dots) to display the k-icon k-i-arrow-chevron-down symbol (the chevron) from the new icon font (see full list of icons here http://docs.telerik.com/kendo-ui/styles-and-layout/icons-web).

To achieve this, add the following to your CSS:​

.k-icon.k-i-more-vertical:before {
  content: "\e015";
}

And you can see it in action here:  http://dojo.telerik.com/OKeli

I hope this helps.

 

Regards,
Orlin
Telerik by Progress

[Kevin]

Actually my question was not how to change the class k-i-more-vertical to display a chevron instead of the three vertical dots, although I did test your CSS and it does work. Your CSS is a workaround to the problem that the wrong class is being used in the column header.

The HTML for the grid is generated by the Kendo grid UI, therefore the Kendo grid UI is putting class k-i-more-vertical in the header. I did not put that class in the column header. So my question is, why is class k-i-more-vertical being used for the column settings icon in the column header instead of a class such as k-i-arrow-chevron-down?

[Orlin]

Extension settingsExtension settings

Hello Kevin,

The change of the class name was a design decision and the k-i-more-vertical class is the intended one.

There is no out of the box option to change the class name but you can use a script to change it should you need to. Have a look at the following dojo example for one possible workaround: http://dojo.telerik.com/oYEto/2

I hope this answers your question.

 

Regards,
Orlin
Telerik by Progress