New to Kendo UI for jQuery? Download free 30-day trial

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">&nbsp;</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>

See Also

In this article