I am currently using Kendo-UI 2021.2.616, specifically the Bootstrap SASS theme.
Is there a specific class or object definition that I can use to create a splitter in a menu item dropdown?
What I'm currently doing is adding an item where the text is empty and there is styling to give it the appearance that the item is just a horizontal line. Example:
$('#menu').kendoMenu({ dataSource: new kendo.data.HierarchicalDataSource({ data: [ { text: 'Dropdown', items: [ { text: 'Item 1', url: '#/' }, { text: 'Item 2', url: '#/' }, { attr: { style: 'border-top: 1px solid #000; height: 1px; margin: 0 0.25rem;' }, text: '' }, { text: 'Item 3', url: '#/' } ] } ] })
});Fiddle:
My issue is that my workaround smells like a hack. I feel like the Kendo-UI library would have a menu item splitter defined, but looking through the documentation I cannot find one.
1 Answer
Actually, your workaround is not a hack. That is basically how you add a separator, some CSS magic. Since you are looking for a defined Kendo separator. Change:
attr: { style: 'border-top: 1px solid #000; height: 1px; margin: 0 0.25rem;'
},to this:
attr: { class: 'k-separator'
},That should do the trick.
1
