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

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.