How to change expand/collapse icon on a master row of a grid?

7 posts, 0 answers
  1. Artem
    Artem avatar
    17 posts
    Member since:
    Apr 2018

    Posted 27 Aug 2018 Link to this post

    I'm looking at this example: https://www.telerik.com/kendo-react-ui/components/grid/advanced-features/hierarchy that uses "k-plus" and " k-minus" classes to show appropriate state of the row. How possible is it to change those classes to other ones (e.g "k-i-arrow-chevron-right" and "k-i-arrow-chevron-down" respectively)?

    Thanks.
  2. Stefan
    Admin
    Stefan avatar
    2915 posts

    Posted 28 Aug 2018 Link to this post

    Hello, Artem,

    The classes could be changed by using a custom row and cell renders which will allow modifying the render row or cell as desired:

    https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-cellrender

    https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-rowrender

    If only classes on a single cell of the row have to be changed I can suggest, just using a CSS rule to change the icon that will be shown for that class:

    .k-i-add:before, .k-i-plus:before, .k-plus:before {
      content: "\E014";
    }
    .k-i-kpi-trend-equal:before, .k-i-minus:before, .k-minus:before {
      content: "\E015";
    }

    https://stackblitz.com/edit/react-wjnhcw?file=index.html

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Artem
    Artem avatar
    17 posts
    Member since:
    Apr 2018

    Posted 28 Aug 2018 in reply to Stefan Link to this post

    Hello Stefan,

    Thank you for the reply.

    From my point of view, custom cell renderer looks better (although significantly harder to implement) than overriding icon content via CSS. It would be great if you could add possibility to set needed icons via your Theme customization.
  4. Stefan
    Admin
    Stefan avatar
    2915 posts

    Posted 29 Aug 2018 Link to this post

    Hello, Artem,

    Indeed that renderers approach requires more code and configuration that is why we offered the CSS approach that is not ideal but can save time.

    As for directly customizing the icons inside the theme builder - The Theme builder main function is changing the colors for the themes, but this is a good new idea for it. I will bring this to the attention of the team responsible for the tool.

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Tomasz
    Tomasz avatar
    11 posts
    Member since:
    Jun 2017

    Posted 04 Dec 2019 Link to this post

    Is it possible tu customize GridCellHierarchyComponent? We are using FontAwesome for react components and instead of modifying CSS we would like to put our own component. Beside this we need to have other column that has button "Details" that also should be able to expand data item.
  6. Stefan
    Admin
    Stefan avatar
    2915 posts

    Posted 04 Dec 2019 Link to this post

    Hello, Tomasz,

    In this case, I can suggest checking the following Knowledgebase article that contains an example of how to implement a custom expand collapse column. This will allow rendering custom icons, buttons or anything that is needed:

    https://www.telerik.com/kendo-react-ui/knowledge-base/custom-expand-collapse-column/

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Tomasz
    Tomasz avatar
    11 posts
    Member since:
    Jun 2017

    Posted 04 Dec 2019 in reply to Stefan Link to this post

    Perfect, thank you :)
Back to Top