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.