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.
Thanks.
6 Answers, 1 is accepted
0
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:
https://stackblitz.com/edit/react-wjnhcw?file=index.html
I hope this is helpful.
Regards,
Stefan
Progress Telerik
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
0
Artem
Top achievements
Rank 1
Rank 1
answered on 28 Aug 2018, 09:46 AM
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.
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.
0
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
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
0
Tomasz
Top achievements
Rank 1
Rank 1
answered on 04 Dec 2019, 09:30 AM
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.
0
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
0
Tomasz
Top achievements
Rank 1
Rank 1
answered on 04 Dec 2019, 03:40 PM
Perfect, thank you :)