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

Open Gantt Task Editor on Treelist Click


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


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


  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>
      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")
        $(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);
In this article