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

Layout

The layout of the Gantt consists of a GanttList and a Timeline sections. They are divided by a splitbar, which allows increasing the width of one of the sections at the expense of the other.

GanttList

The GanttList of the Gantt extends the TreeList component and offers its functionality. For more details on the configuration and features of the TreeList, refer to its documentation and demos.

The following features of the TreeList are currently not supported by the GanttList.

  • Locked columns
  • Column commands
  • Encoded column value
  • Column footer template
  • Binding the parent column, in scenarios that involve grouped columns
  • More than one level of grouping

Getting a Reference to the GanttList

The example below demonstrates how to get a reference to a GanttList.

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [
    {
      id: 1,
      orderId: 0,
      title: "Task1",
      start: new Date("2014/6/17 9:00"),
      end: new Date("2014/6/17 11:00")
    }
  ]
});
// Get a reference to the Gantt instance.
var gantt = $("#gantt").data("kendoGantt");
// Get a reference to the GanttList.
var ganttList = gantt.list;
</script>

Timeline

The Timeline section visualizes the tasks and diplays start and end dates, progress, resources, and dependency relationships between tasks. The Timeline allows different ways of interaction with the tasks. You can resize, move, remove, edit, or change the dependencies of the tasks.

See Also

In this article