Currently, the Kendo UI Toolbar supports adding icons to items by setting the "icon" property as documented here. However, only Kendo's own icons are supported.
In other widgets (like the Grid), adding custom icons (to a toolbar!) is already possible by specifiying an icon class.
However, if you wanted a third-party icon (or one of your own) directly to a standalone Toolbar, you would need to create a whole new template from scratch or replace the DOM element after rendering or use some hacky approach like demonstrated in this DOJO. While the first one means a lot of work, the latter ones are both not very stable.
Therefore, I propose to extend the icon support for Toolbars in general. I can think of two different solutions:
- Let the developer specify an icon class (like in the Grid) that is then written into the DOM.
- Let the developer specify some sort of "content template" that is displayed e.g. in a button or a splitButton. This way any content may be displayed in a toolbar item and this also allows for more complex and customized styling regarding the layout of e.g. icon and text.
Assume there is a Toolbar with a splitButton that has a subItem. Both the splitButton and the subItem have clickHandlers configured. As long as the splitButton is not in the toolbar's overflow, everything is working correctly. However, when overflown, clicking on the subItem executes the clickHandler of the splitButton instead of the clickHandler of the subItem.
This behavior can be reproduced in the following DOJO: https://dojo.telerik.com/enanUKan/3. Watch the console output when clicking the splitButton/its subItem.
Two more hints:
- The bug does not occur when using Kendo UI versions < 2021 R1 SP1 (2021.1.224).
- The bug does not occur when the splitButton has no clickHandler.
Unfortunately, both options are no viable solution for us. Any suggestions?