I use a Master/Detail Grid for my application and the collapse / expand icons of the detail row are shown as plus / minus icons. Is it possible to change these icons to arrows (k-i-arrow-down / k-i-arrow-right)?
Georgi
Telerik team
commented on 18 May 2023, 05:27 AM
Hi Katharina,
Thank you very much for the details provided.
From what I understand from your question, you are looking for an approach that would allow you to change the default plus and minus icons in the Master-Detail Grid. Please, correct me if I misunderstood you.
One possible approach for achieving the desired modification of the default icons of the Master-Detail Grid is outlined in the Changing the Built-in Icons article and more precisely in the Font Icons section:
For your convenience, I modified the demo suggested in the article so that it demonstrates how to change the default plus and minus icons of the Master-Detail Grid:
thank you for your answer, the use of a service, that overrides the getCustomFontIconClass is working pretty well!
Only as information for other forum-users: When I'm providing this service in the app.module, every plus icon in my application will be replaced with the arrow icon. So I cannot use the plus icon anymore. So I decided to provide this service inside a sub module of my application (the place where I use my master-detail grid), and it seems to be, that only the plus icons inside that sub module and corresponding components will be replaced! That was what I need...
Hi Katharina,
Thank you very much for the details provided.
From what I understand from your question, you are looking for an approach that would allow you to change the default plus and minus icons in the Master-Detail Grid. Please, correct me if I misunderstood you.
One possible approach for achieving the desired modification of the default icons of the Master-Detail Grid is outlined in the Changing the Built-in Icons article and more precisely in the Font Icons section:
https://www.telerik.com/kendo-angular-ui/components/icons/icon-settings/#toc-font-icons
For your convenience, I modified the demo suggested in the article so that it demonstrates how to change the default plus and minus icons of the Master-Detail Grid:
https://stackblitz.com/edit/angular-wj5ykk
I hope this works for you. Let me know if you need additional assistance with this case.
Regards,Georgi
Progress Telerik
Hi Georgi,
thank you for your answer, the use of a service, that overrides the getCustomFontIconClass is working pretty well!
Only as information for other forum-users: When I'm providing this service in the app.module, every plus icon in my application will be replaced with the arrow icon. So I cannot use the plus icon anymore. So I decided to provide this service inside a sub module of my application (the place where I use my master-detail grid), and it seems to be, that only the plus icons inside that sub module and corresponding components will be replaced! That was what I need...
Thanks for your help,
regards,
Katharina