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

Handle Unique Identifiers with Menu Items

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 handle unique identifiers with Kendo UI for jQuery Menu items?

Solution

Commonly, you are required to handle custom identifiers with click handlers or, as in this case, by using the select event.

To provide for the functionality, the Kendo UI Menu mainly uses the HTML elements that are rendered. That is why you can use custom HTML attributes to serve you as unique identifiers in your code.

In this way, you can programmatically:

  • Identify the clicked item.
  • Utilize values that are specific to the item other than text.
  • Remove a specific item from the Menu by identifying it through an attribute.
  • Run the specific logic for particular items.

The following examples demonstrate how to handle a custom command attribute to accomplish specific application requirements such as the ones mentioned in the previous list.

Bound with JSON Data

<ul id="menu"></ul>

<script>
  var imgUrl = "https://demos.telerik.com/kendo-ui/content/shared/icons/sports/swimming.png";
  $(document).ready(function() {
    $("#menu").kendoMenu({
      dataSource:
        [{
            text: "Command 1",
            attr: {
                command: "command1"
            }
        },{
            text: "Command 2",
            attr: {
                command: "command2"
            }
        },{
            text: "Remove Command 2",
            attr: {
                command_to_remove: "command2"
            },
            select: function (ev){
                var commandToRemove = ev.target.parent("li").attr("command_to_remove");
                removeCommand(commandToRemove);
            }
        }],
        select: function (ev){
            var clickedItem = $(ev.item);
            var command = clickedItem.attr("command");

            if(command){
                alert(command);
            }
        }
    });
  });

  function removeCommand(command){
      $("#menu").data("kendoMenu").remove("[command='" + command + "']");
  }
</script>

Created with HTML Elements

<ul id="menu">
    <li data-command="command1">Command 1</li>
    <li data-command="command2">Command 2</li>
    <li data-removecommand="command2" class="remove-command">Remove Command 2</li>
</ul>

<script>
  var imgUrl = "https://demos.telerik.com/kendo-ui/content/shared/icons/sports/swimming.png";
  $(document).ready(function() {
    $("#menu").kendoMenu({
        select: function (ev){
            var clickedItem = $(ev.item);
            var command = clickedItem.data("command");

            if(command){
                alert(command);
            }
        }
    });
  });

  $(".remove-command").click(function(ev){
    var commandToRemove = $(ev.target).parent("li").data("removecommand");
    removeCommand(commandToRemove);
  })

  function removeCommand(command){
      $("#menu").data("kendoMenu").remove("[data-command='" + command + "']");
  }
</script>

See Also

In this article