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

[Artem]

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.

[Stefan]

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

[Artem]

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.

[Stefan]

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

[Tomasz]

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.

[Stefan]

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

[Tomasz]

Perfect, thank you :)