New to Kendo UI for Angular? Start a free 30-day trial

Column Configuration

You can configure the TreeList part of the Gantt to render a column for specified fields in the provided data items. Alternatively, the Gantt can auto-generate a column for each data item field.

Manual Configuration

Usually, the TreeList columns of the Gantt need to be rendered only for certain properties of its data items. To render a column which represents a specific data item property, place a <kendo-gantt-column> tag within the <kendo-gantt> tag, and bind its field input to the respective property key of the data item.

The column settings of the Gantt also allow for a more thorough configuration of each column, including specifying the column width, header title, content format, filter type, and more. For the complete list of column options, refer to the dedicated API page of the GanttColumnComponent).

The following example demonstrates how to implement the manual configuration of the columns.

Example
View Source
Edit In Stackblitz  
Change Theme:

Auto-Generated Columns

The Gantt enables you to automatically generate its columns depending on the provided data. If the columns of the Gantt are not explicitly configured, that is, no <kendo-gantt-column> tags are specified, the component automatically generates a column for each field in the provided data items.

Example
View Source
Edit In Stackblitz  
Change Theme: