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.