How to add separator to kendo toolbar splitbutton menuitems - css

Question

Kendo UI 2015.2.805
I want to add a separator line between menu items on the toolbars's split button dropdown. I know how to add a separator line between toolbar buttons, as shown below, but it does not work for the menuButtons array.
$("#my_toolbar").kendoToolBar({
items: [
{ type: "button", text: "Option 1" },
{ type: "separator"},
{ type: "button", text: "Option 2" },
{ type: "splitButton", text: "Actions",
menuButtons: [
{ id: "button_3", text: "Option 3" },
{ id: "button_4", text: "Option 4" },
//separator here
{ id: "button_5", text: "Option 5" },
{ id: "button_6", text: "Option 6" }
]
}
]
});
`
How to add separator at the comment?
RESOLVED:
Posting David's solution here from his link so it's persisted. I needed to style the .no-button in my environment to collapse it to a line. Perfect.
.no-button { padding: 0;}
menuButtons: [
{ id: "button_3", text: "Option 3" },
{ id: "button_4", text: "Option 4" },
{ enable: false, attributes: { class: "no-button"} },
{ id: "button_5", text: "Option 5" },
{ id: "button_6", text: "Option 6" }
]

Answer 1

There is no OOTB way to do this. There are a few hacky ways to do it with your own markup. For example you can do something like this:
$("#my_toolbar").kendoToolBar({
items: [
{ type: "button", text: "Option 1" },
{ type: "separator"},
{ type: "button", text: "Option 2" },
{ type: "splitButton", text: "Actions",
menuButtons: [
{ id: "button_3", text: "Option 3" },
{ id: "button_4", text: "Option 4" },
{ text: "<hr style='margin:0px; padding:0px; color:#d8d8d8;' />", enable: false },
{ id: "button_5", text: "Option 5" },
{ id: "button_6", text: "Option 6" }
]
}
]
});
The only problem with this is that it will get highlighted if you scroll over it, because it will get wrapped in an anchor element when it gets rendered. If that bothers you, then you could give the hr an id and then use JavaScript to find it, get its parent, and modify the css of the anchor.