Greetings,
I'm trying to use the Kendo menu with contentRender so I could render a custom icon component like FontAwesomeIcon.
I'm currently having issue with binding the data to each item when using the contentRender property.
Is there any way to fix this? Thanks!
Regards,
Jason Li
1 Answer, 1 is accepted
Hi, Jason,
I am really glad that you were able to find a solution to the initial issue. Let me, however, propose another solution that you may find more convenient.
The easiest way to render a custom item as well as bind the data to an array of objects is by using the items and itemRender props of the Menu component. In the below example, I am rendering the FontAwesomeIcon and the text of each item. Moreover, I am rendering sub-items using the items property of the MenuItemModel that is rendered when using the Menu items prop:
However, If you need to use contentRender instead and the approach for rendering sub-items is not applicable in that case, can you please send us a runnable example to understand better your use-case scenario and be able to assist you further?
Regards,
Wissam
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
<Menu onSelect={handleSelect}>
<MenuItem
text="Actions"
data={options}
contentRender={contentRender}
/>
</Menu>
where "options" are the menu items. I provided the image of the menu items.
I was able to bind the item data with contentRender by adding an onClick event handler to the items element.
I'm currently trying to figure out how to add a submenu with contentRender.
Please help, thanks!