Kendo contextMenu select function for specific items

Question

I'm trying to create a contextMenu usig the kendoContextMenu widget. This works using the following code.

$("#contextMenu").kendoContextMenu({
target: "#tree",
filter: ".k-item",
select: function(e) {
    alert("Selected");
},
dataSource:
[
    { text: "Item1"},
    {
        text: "SubMenu1",
        items: [
            { text: "Item1" }
        ]
    },
    {
        text: "SubMenu2",
        items: [
            { text: "Item1" }
        ]
    }
]
});

But I want to specify a function for each item to execute when the item is clicked. I don't want to determine what to execute based on the text contents.

I've tried to add a click item in the datasource but that doesn't seem to work.

Answer 1

Kendo ContextMenu doesn't have this feature, but you have 2 options:

First, configure context menu using html with onclick events:

<ul id="menu">
    <li>
        Option 1
        <ul>
            <li onclick="alert('test');">Sub option 1</li>
            <li>Sub option 2</li>
        </ul>
    </li>
    <li>Option 2</li>
</ul>
<script>
    $(document).ready(function() {        
        $("#menu").kendoContextMenu({
                orientation: orientation,
            });
        };
    });
</script>

Second, if you can ensure name uniqueness you can add click properties in dataSource configuration and then on context menu select event you can search in dataSource appropriate item and execute attached function manually.

Answer 2

I know this is old, but this is the way I have implemented it

$("#context-menu").kendoContextMenu({
  target: "#target",
  select: function(e) {
    let index = $(e.item).index();
    e.sender.options.dataSource[index].click(e);
  },
  dataSource: [
    {text: "Copy",
      click: function(e) {
        console.log("copied");
      }
    },
    {text: "Delete",
      click: function(e) {
        console.log("deleted");
      }
    }
  ]
});

<link href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>

<div id="target">Target</div>
<div id="context-menu"></div>

Answer 3

Other way its to add select function and switch case, this is case when you have treeview:

$("#menu").kendoContextMenu({
            select: function (e) {
                var button = $(e.item);
                var node = $(e.target);
                var tmpKendDiagram = $(".diagram").data("kendoDiagram");

                var tv = $(".tree-view").data("kendoTreeView");
                var item = tv.dataItem(node);
                var textSelect = $(e.item).children(".k-link").text();
                switch (textSelect) {
                    case '1option':
                        //do stuff
                        break;
                    case '2option':
                        //do stuf
                        break;
                    default:
                        break;
                }

            }
        });