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

Show a Context Menu of a TreeView Node


Product Progress® Kendo UI® TreeView for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


How can I show a ContextMenu with tree-item actions in the Kendo UI for jQuery TreeView?


The following example demonstrates how to achieve the desired behavior.

    <ul id="treeview">
      <li data-expanded="true">
        <span class="k-sprite folder"></span>
        My Website
          <li><span class="k-sprite html"></span>index.html</li>
          <li><span class="k-sprite image"></span>body-back.png</li>
          <li><span class="k-sprite image"></span>my-photo.jpg</li>

    <ul id="menu">
        <li><img src="" />Send via e-mail</li>
        <li><img src="" />Delete</li>

      $(document).ready(function() {

          // listen to right-clicks on treeview container
          target: "#treeview",

          // show when node text is clicked
          filter: ".k-in",

          // handle item clicks
          select: function(e) {
            var button = $(e.item);
            var node = $(;
            alert(kendo.format("'{0}' button clicked on '{1}' node", button.text(), node.text()));

            // you can get the node data (e.g. id) via the TreeView dataItem method:
            // $("#treeview").data("kendoTreeView").dataItem(node);

    <style scoped>
      /* allow menu to break out of treeview container */
      div.k-treeview {
        overflow: visible;

      #treeview .k-sprite {
        background-image: url("");
      .folder { background-position: 0 -16px; }
      .html { background-position: 0 -48px; }
      .image { background-position: 0 -64px; }


See Also

In this article