We want a menu in toolbar but menu inside toolbar is not work as expected.Menu popup is hide behind the toolbar.We tried to fix but we didn't get any fix for this.I there any other way to use menu in toolbar(Note: Menu should contain sub menu).Please help me resolve this issue.
Code
<div id="example">
<div class="demo-section k-content wide">
<div id="toolbar"></div>
</div>
<script>
$(document).ready(function() {
$("#toolbar").kendoToolBar({
items: [
{ type: "button", text: "Button" },
{ type: "button", text: "Toggle Button", togglable: true },
{
type: "splitButton",
text: "Insert",
menuButtons: [
{ text: "Insert above", icon: "insert-n" },
{ text: "Insert between", icon: "insert-m" },
{ text: "Insert below", icon: "insert-s" }
]
},
{ type: "separator" },
{
template: "<ul id='dropdown' style='width:150px;' ></ul>", overflow: "never"
}
]
});
$("#dropdown").kendoMenu({
dataSource: [{
text: "Action",
value: 0,
items: [
{ text: "Heading 1", value: 1 },
{ text: "Heading 2", value: 2 },
{ text: "Heading 3", value: 3 },
{ text: "Title", value: 4 },
{ text: "Subtitle", value: 5 ,
items: [
{ text: "Subtitle 1", value: 1 },
{ text: "Subtitle 2", value: 2 },
{ text: "Subtitle 3", value: 3},
]}
]
}]
});
});
</script>
</div>
Sample Program
Copyright Notice:Content Author:「Sindhu」,Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/37939979/using-kendomenu-inside-kendotoolbar-cause-issue