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

4 posts, 1 answers
  1. Kevin
    Kevin  avatar
    16 posts
    Member since:
    Jun 2012

    Posted 08 Mar 2017 Link to this post

    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.

  2. Orlin
    Admin
    Orlin avatar
    62 posts

    Posted 10 Mar 2017 Link to this post

    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.
  3. Kevin
    Kevin  avatar
    16 posts
    Member since:
    Jun 2012

    Posted 10 Mar 2017 in reply to Orlin Link to this post

    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?

  4. Answer
    Orlin
    Admin
    Orlin avatar
    62 posts

    Posted 14 Mar 2017 Link to this post

    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.
Back to Top