Columns

The Gantt provides options for individual configuration of the columns in its tree-list section.

The Gantt supports the following configuration options:

  • field—The field from the task model which will be used to populate the column.
  • title—The header text of the column.
  • sortable—Indicates if the column can be sorted.
  • editable—Indicates if the column can be edited.
  • width—The width of the column.
  • format—The format in which the data in the column is represented.

To configure individual columns, use the columns option.

The following example demonstrates how to configure Gantt columns.

<div id="gantt"></div>
<script>      
$("#gantt").kendoGantt({
  columns: [
    { field: "id", title: "ID", sortable: true, editable: false, width: 30 },
    { field: "title", title: "Title", sortable: true, editable: true, width: 150 },
    { field: "start", title: "Start Time", sortable: true, editable: true, format: "{0:MM/dd/yyyy HH:mm}", width: 100 },
    { field: "end", title: "End Time", sortable: true, editable: true, format: "{0:MM/dd/yyyy HH:mm}", width: 100 }
  ],
  dataSource: [
    {
      id: 1,
      orderId: 0,
      title: "Task1",
      start: new Date("2014/6/17 9:00"),
      end: new Date("2014/6/17 11:00")
    },
    {
      id: 2,
      orderId: 1,
      title: "Task2",
      start: new Date("2014/6/17 12:00"),
      end: new Date("2014/6/17 13:00")
    }
  ]
});
</script>

See Also

In this article
Not finding the help you need? Improve this article