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

Show Context Menu in the TreeList

Environment

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

Description

How can I render a context menu in the Kendo UI for jQuery TreeList?

Solution

The following example demonstrates how to show a context menu for the TreeList rows.

  <div id="treelist"></div>

  <ul id="menu">
    <li><span class='k-icon k-i-add'></span>Add</li>
    <li><span class='k-icon k-i-delete'></span>Delete</li>
  </ul>

  <script>
    $(document).ready(function () {
      var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service";

      var dataSource = new kendo.data.TreeListDataSource({
        transport: {
          read:  {
            url: crudServiceBaseUrl + "/EmployeeDirectory/All",
            dataType: "jsonp"
          },
          update: {
            url: crudServiceBaseUrl + "/EmployeeDirectory/Update",
            dataType: "jsonp"
          },
          destroy: {
            url: crudServiceBaseUrl + "/EmployeeDirectory/Destroy",
            dataType: "jsonp"
          },
          create: {
            url: crudServiceBaseUrl + "/EmployeeDirectory/Create",
            dataType: "jsonp"
          },
          parameterMap: function(options, operation) {
            if (operation !== "read" && options.models) {
              return {models: kendo.stringify(options.models)};
            }
          }
        },
        batch: true,
        schema: {
          model: {
            id: "EmployeeId",
            fields: {
              EmployeeId: { type: "number", editable: false, nullable: false },
              parentId: { field: "ReportsTo", nullable: true },
              FirstName: { validation: { required: true } },
              LastName: { validation: { required: true } },
              HireDate: { type: "date" },
              Phone: { type: "string" },
              HireDate: { type: "date" },
              BirthDate: { type: "date" },
              Extension: { type: "number", validation: { min: 0, required: true } },
              Position: { type: "string" }
            },
            expanded: true
          }
        }
      });

      $("#treelist").kendoTreeList({
        dataSource: dataSource,
        toolbar: [ "create" ],
        editable: true,
        height: 540,
        columns: [
          { field: "FirstName", expandable: true, title: "First Name", width: 220 },
          { field: "LastName", title: "Last Name", width: 100 },
          { field: "Position" },
          { field: "HireDate", title: "Hire Date", format: "{0:MMMM d, yyyy}" },
          { field: "Phone", title: "Phone" },
          { field: "Extension", title: "Ext", format: "{0:#}" }
        ]
      });


      $("#menu").kendoContextMenu({
        // Listen to right-clicks on the TreeList container.
        target: "#treelist",

        // Show when a row is clicked.
        filter: "tbody > tr",

        // Handle the item clicks.
        select: function(e) {
          var button = $(e.item);
          var row = $(e.target);
          var dataItem = $("#treelist").data("kendoTreeList").dataItem(row);

          alert(kendo.format("'{0}' button clicked on '{1}'", button.text(), dataItem.FirstName));
        }
      });
    });
  </script>

See Also

In this article