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

Open Gantt Task Editor on Treelist Click

Environment

Product Progress® Kendo UI® Gantt for jQuery
Operating System All
Browser All
Preferred Language JavaScript

Description

How can I show the editor of the Gantt when I select tasks in the tree-list?

Solution

  1. Attach a click handler to the rows in the tree-list of the Gantt.
  2. Call the editTask method of the Gantt and pass the dataItem of the selected task as a parameter.
    <div id="gantt"></div>
    <script>
    $("#gantt").kendoGantt({
      dataSource: [
        {
          id: 1,
          orderId: 0,
          parentId: null,
          title: "Task1",
          start: new Date("2014/6/17 9:00"),
          end: new Date("2014/6/17 11:00")
        },
        {
          id: 2,
          orderId: 1,
          parentId: null,
          title: "Task2",
          start: new Date("2014/6/17 12:00"),
          end: new Date("2014/6/17 14:00")
        }
      ]
    });
    </script>
    <script>
        $(document).ready(function() {
          $(".k-gantt").delegate(".k-gantt-treelist .k-grid-content tr", "click", function(e) {
        var gantt = $("#gantt").data("kendoGantt");
        var task = gantt.dataItem(this);
        gantt.editTask(task);
          });
        });
    </script>
In this article