0

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" }
        ]
2
  • is this the kind of thing you are looking for: dojo.telerik.com/UlAfUZEg Aug 7, 2018 at 15:58
  • Yes, that is very close. I needed to add a padding: 0 to the .no-button class and now it is perfect.
    – kpg
    Aug 8, 2018 at 17:59

1 Answer 1

0

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.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.