Create a Split Button in the Menu
Environment
| Product | Progress® Kendo UI® Menu for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I create a Split button in the Kendo UI for jQuery Menu?
Solution
The example below demonstrates how to achieve the desired scenario.
<ul id="myMenu">
<li onclick="defaultitemclick();" class="defaultItem" data-action="1">action 1</li>
<li class="emptyItem"><span class="empty"> </span>
<ul>
<li class="item1" onclick="item1click();">Item 1</li>
<li class="item2" onclick="item2click();">Item 2</li>
<li class="item3" onclick="item3click();">Item 3</li>
</ul>
</li>
</ul>
<script>
function item1click() {
$(".defaultItem").data("action", "1").children(".k-link").text("action 1");
}
function item2click() {
$(".defaultItem").data("action", "2").children(".k-link").text("action 2");
}
function item3click() {
$(".defaultItem").data("action", "3").children(".k-link").text("action 3");
}
function defaultitemclick() {
alert($(".defaultItem").data("action"));
}
$(document).ready(function () {
$("#myMenu").kendoMenu({
openOnClick: true
});
});
</script>
<style>
html {
font:12px sans-serif;
}
#myMenu {
width: fit-content;
}
#myMenu .emptyItem {
border-right-width: 0;
}
#myMenu .emptyItem > .k-link {
padding-left: 0 !important;
}
</style>