This is a migrated thread and some comments may be shown as answers.

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

3 Answers 558 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 1
Kevin asked on 09 Mar 2017, 12:57 AM

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.

3 Answers, 1 is accepted

Sort by
0
Orlin
Telerik team
answered on 10 Mar 2017, 06:47 AM
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
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.
0
Kevin
Top achievements
Rank 1
answered on 10 Mar 2017, 07:57 PM

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?

0
Accepted
Orlin
Telerik team
answered on 14 Mar 2017, 06:49 AM
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
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.
Tags
Grid
Asked by
Kevin
Top achievements
Rank 1
Answers by
Orlin
Telerik team
Kevin
Top achievements
Rank 1
Share this question
or