Columns
The Gantt provides options for individual configuration of the columns in its tree-list section.
The Gantt supports the following configuration options:
-
attributes—The HTML attributes of the table cell (td) that is rendered for the column. -
columns—The columns which will be rendered as child columns under this group column header. -
draggable—Renders a draggable icon to reorder the rows. -
editor—Provides a way to specify a custom editing UI for the column. -
editable—Indicates if the column can be edited. -
expandable—If set totrue, the column will show the icons that are used for expanding and collapsing child rows. By default, the first column of the TreeList is expandable. -
field—The field from the task model which will be used to populate the column. -
filterable—If set totrueand if filtering is enabled, a filter menu will be displayed for this column. If set tofalse, the filter menu will not be displayed. By default, a filter menu is displayed for all columns when filtering is enabled through the filterable option. -
filterable.ui—Theroledata attribute of the component that is used in the filter menu, or a JavaScript function which initializes that component. -
format—The format in which the data in the column is represented. -
headerAttributes—The HTML attributes of the table header cell (th) that is rendered for the column. -
headerTemplate—The template which renders the column header content. By default, the value of the title column option is displayed in the column header cell. -
hidden—If set totrue, the Gantt will not display the column. By default, all columns are displayed. -
menu—If set totrue, the Gantt will display the column in the column menu. By default, the column menu includes all data-bound columns, that is, the ones with a setfieldoption. -
minScreenWidth—The pixel screen width below which the column will be hidden. The setting takes precedence over the hidden setting and the two cannot not be used at the same time. -
sortable—Indicates if the column can be sorted. If set totrueand sorting is enabled, the user can click the column header and sort the treelist by the column field. If set tofalse, sorting will be disabled for this column. By default, all columns are sortable if sorting is enabled though the sortable option. -
sortable.compare—A JavaScript function for comparing the values. -
template—The template which renders the column content. The Gantt renders table rows (tr) which represent the data source items. Each table row consists of table cells (td) which represent the treelist columns. By default, the HTML-encoded value of the field is displayed in the column. -
title—The header text of the column. -
width—The width of the column.
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>