Gantt

Directive

kendo-gantt

Child Components

• kendo-gantt-column
• kendo-gantt-toolbar-item
• kendo-gantt-view

Props

assignments Object

The configuration of the assignments for the Gantt resources (assignments in Kendo UI for jQuery). An assignment is a one-to-one mapping between a Gantt task and a Gantt resource and contains the number of units for which a resource is assigned to a task. The supported composite props are available in AssignmentsProps.

auto-bind Boolean

If auto-bind is set to false, the widget will not bind to the data source during initialization (auto-bind in Kendo UI for jQuery). In this case data binding will occur when the change event of the data source fires. By default, the Gantt binds to the data source that is specified in the configuration.

column-resize-handle-width Number

Defines the width of the column resize handle in pixels (columnResizeHandleWidth in Kendo UI for jQuery). Apply a larger value for easier grasping.

columns Array

The configuration of the Gantt columns (columns in Kendo UI for jQuery).

Accepts the following values:

• Arrays of JavaScript objects—JavaScript objects are interpreted as column configurations. The Gantt creates a column for every item of the array.
• Strings—Strings are interpreted as the field to which the column is bound.

current-time-marker Boolean | Object

If current-time-marker is set to false, the current- time marker of the Gantt will not be displayed (currentTimeMarker in Kendo UI for jQuery). The supported composite props are available in CurrentTimeMarkerProps.

data-source Object | Array

The data source of the Gantt which contains the tasks (dataSource in Kendo UI for jQuery).

The supported values are:

• A JavaScript object which represents any valid data source configuration.
• A JavaScript array.
• An existing kendo.data.GanttDataSource instance.

If the dataSource option is set to a JavaScript object or an array, the Gantt initializes a new kendo.data.GanttDataSource instance by using that value as the data source configuration. If the dataSource option is an existing kendo.data.GanttDataSource instance, the Gantt uses that instance and will not initialize a new one.

date Date

If date is set to a date and the date is within the start-end range of the selected view, the timeline of the currently selected view is scrolled to the start from this date (date in Kendo UI for jQuery).

dependencies Object | Array

The data source of the Gantt which contains the dependencies (dependencies in Kendo UI for jQuery).

The supported values are:

• A JavaScript object which represents any valid data source configuration.
• A JavaScript array.
• An existing kendo.data.GanttDependencyDataSource instance.

If the dataSource option is set to a JavaScript object or an array, the Gantt initializes a new kendo.data.GanttDependencyDataSource instance by using that value as the data source configuration. If the dataSource option is an existing kendo.data.GanttDependencyDataSource instance, the Gantt uses that instance and will not initialize a new one.

editable Boolean | Object

If editable is set to false, the user will not be able to create, modify, or delete tasks and dependencies (editable in Kendo UI for jQuery). The supported composite props are available in EditableProps.

navigatable Boolean

If navigatable is set to true, the user will be able to navigate the Gantt through the keyboard (navigatable in Kendo UI for jQuery). By default, the keyboard navigation is disabled.

work-day-start Date

Sets the start of the work day (workDayStart in Kendo UI for jQuery).

work-day-end Date

Sets the end of the work day (workDayEnd in Kendo UI for jQuery).

work-week-start Number

The index-based start of working week (workWeekStart in Kendo UI for jQuery).

work-week-end Number

The index-based end of working week (workWeekEnd in Kendo UI for jQuery).

hour-span Number

The span of an hour slot (hourSpan in Kendo UI for jQuery).

snap Boolean

If snap is set to true, the Gantt will snap tasks to the nearest slot during dragging while resizing or moving (snap in Kendo UI for jQuery). To allow free moving and resizing of tasks, set snap to false.

height Number | String

The height of the Gantt. Numeric values are treated as pixels (height in Kendo UI for jQuery).

list-width String | Number

The width of the task list. Numeric values are treated as pixels (listWidth in Kendo UI for jQuery).

messages Object

The configuration of the Gantt messages (messages in Kendo UI for jQuery). Use the messages option to customize or localize the Gantt messages. The supported composite props are available in MessagesProps.

pdf Object

Configures the PDF export settings of the Gantt (pdf in Kendo UI for jQuery). The supported composite props are available in PdfProps.

range Object

Configures the range settings of the Gantt (range in Kendo UI for jQuery). The supported composite props are available in RangeProps.

resizable Boolean

If resizable is set to true, the user can resize columns by dragging their header borders (resizable in Kendo UI for jQuery). By default, resizing is disabled.

selectable Boolean

If selectable is set to false, the user will not be able to select tasks in the Gantt (assignments in Kendo UI for jQuery). By default, selection is enabled and triggers the change event.

show-work-days Boolean

If show-work-days is set to false, the Gantt views will show all days of the week (showWorkDays in Kendo UI for jQuery). By default, the views display only business days.

show-work-hours Boolean

If show-work-hours is set to false, the Day view will show all hours of the day (showWorkHours in Kendo UI for jQuery). By default, the view displays only business hours.

task-template String | Function

The template for rendering the Gantt tasks (taskTemplate in Kendo UI for jQuery). The template supports the task fields.

toolbar Array

If a string value is assigned to the toolbar configuration option, it will be treated as a single string template for the whole Gantt toolbar and the string value will be passed as an argument to a kendo.template() function (toolbar in Kendo UI for jQuery).

If a kendo.template() function call or a generic function reference value is assigned, then the return value of the function will be used to render the content of the Gantt toolbar.

If an array value is assigned, it will be treated as the list of commands that is displayed in the toolbar of the Gantt.

Accepts the following commands:

• append—A built-in command that adds a new task to the Gantt.
• pdf—A built-in command that exports the Gantt to PDF.
• Custom

tooltip Object

The configuration options for the task tooltip (tooltip in Kendo UI for jQuery). The supported composite props are available in TooltipProps.

views Array

The views that are displayed by the Gantt and their configuration (views in Kendo UI for jQuery).

The supported values for the array items are:

• Objects—Specify the view configuration.
• Strings—Represent the view types (assuming default configuration).

By default, the Gantt displays Day, Week, and Month views.

resources Object

The configuration of the Gantt resources (resources in Kendo UI for jQuery). A Gantt resource is optional metadata that can be associated with a Gantt task. The supported composite props are available in ResourcesProps.

row-height Number | String

The height of the table rows (rowHeight in Kendo UI for jQuery). Numeric values are treated as pixels.

Events

databinding: Function

Fires before the Gantt binds to its data source (databinding in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Gantt instance.

databound: Function

Fires when the widget is bound to data from its data source dataBound in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Gantt instance.

add: Function

Fires when a new task or a new dependency is about to be added add in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Gantt instance.

edit: Function

Fires when the user starts editing a task by double-clicking a cell edit in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Gantt instance.

remove: Function

Fires when a task or a dependency is about to be removed remove in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Gantt instance.

cancel: Function

Fires when the user cancels the editing of a task cell by pressing the Esc key cancel in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Gantt instance.

save: Function

Fires when a task field is updated upon user interaction save in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Gantt instance.

change: Function

Fires when the user selects a task in the Gantt change in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Gantt instance.

columnresize: Function

Fires when the user resizes a column resize in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Gantt instance.

navigate: Function

Fires when the user changes the selected view of the Gantt navigate in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Gantt instance.

movestart: Function

Fires when the user starts to drag a task moveStart in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Gantt instance.

move: Function

Fires when the user is moving a task move in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Gantt instance.

moveend: Function

Fires when the user stops moving a task moveEnd in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Gantt instance.

pdfexport: Function

Fires when the user clicks the Export to PDF toolbar button pdfExport in Kendo UI for jQuery).

resizestart: Function

Fires when the user starts to resize a task resizeStart in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Gantt instance.

resize: Function

Fires when the user is resizing a task resize in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Gantt instance.

resizeend: Function

Fires when the user releases the mouse after resizing a task resizeEnd in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Gantt instance.

Methods

For more details about the methods available in the component's API please check its Kendo UI for jQuery API documentation.

kendoWidget

returns

Returns the Kendo UI Gantt instance.