New to KendoReact? Start a free 30-day trial

GanttProps

Interface

Represents the props of the KendoReact Gantt component.

Definition

Package:@progress/kendo-react-gantt

Properties

children?

GanttView | GanttView[]

Provides view components as children. The Gantt renders the currently selected view.

Example:

jsx

<Gantt>
  <GanttWeekView title="Day" />
  <GanttDayView title="Week" />
</Gantt>

className?

string

Adds custom CSS classes to the Gantt component.

Example:

jsx

<Gantt className="custom-class" />

columnMenu?

ComponentType<any>

The component to render as the column menu.

columnMenuFilter?

CompositeFilterDescriptor[]

The descriptors by which the data is filtered in the column menu.

columns?

GanttColumnProps[]

A collection of GanttColumnProps for creating columns.

defaultView?

string

Sets the view that shows first when the Gantt loads. You can choose from:

day
week (Default)
month
year

Default:

"week"

Example:

jsx

<Gantt defaultView="month" />

dependencyData?

GanttDependency[]

Provides dependency data for the Gantt chart. Dependencies appear as visual connections between tasks.

Example:

jsx

const dependencies = [{ id: 1, from: 1, to: 2 }];
<Gantt dependencyData={dependencies} />

dependencyModelFields?

GanttDependencyModelFields

Maps field names for reading dependency data from your data source.

Example:

jsx

const dependencyModelFields = { id: 'id', from: 'from', to: 'to' };
<Gantt dependencyModelFields={dependencyModelFields} />

filter?

FilterDescriptor[]

The descriptors by which the data is filtered (more information and examples). This affects the values and buttons in the FilterRow of the Gantt.

navigatable?

boolean

If set to true, the user can use dedicated shortcuts to interact with the Gantt. By default, navigation is disabled and the Gantt content is accessible in the normal tab sequence.

Default:

false

noRecords?

ReactElement<GanttNoRecordsProps, string | JSXElementConstructor<any>>

Represents the component that will be rendered when the data property of the Gantt is empty or undefined.

onAddClick?

(event: GanttAddClickEvent) => void

Fires when the user clicks the add task button.

Parameters:eventGanttAddClickEvent

onColumnMenuFilterChange?

(event: GanttColumnMenuFilterChangeEvent) => void

Fires when the user changes the column menu filter.

Parameters:eventGanttColumnMenuFilterChangeEvent

onColumnReorder?

(event: GanttColumnReorderEvent) => void

Fires when the user reorders columns.

Parameters:eventGanttColumnReorderEvent

onColumnResize?

(event: GanttColumnResizeEvent) => void

Fires when the user resizes a column.

Parameters:eventGanttColumnResizeEvent

onDataStateChange?

(event: GanttDataStateChangeEvent) => void

Fires when the data state changes.

Parameters:eventGanttDataStateChangeEvent

onDependencyCreate?

(event: GanttDependencyCreateEvent) => void

Fires when the user creates a dependency by connecting two tasks.

Parameters:eventGanttDependencyCreateEvent

onExpandChange?

(event: GanttExpandChangeEvent) => void

Fires when the user clicks the expand or collapse icon on a row.

Parameters:eventGanttExpandChangeEvent

onFilterChange?

(event: GanttFilterChangeEvent) => void

Fires when the Gantt filter is modified through the UI (more information and examples). You need to handle the event yourself and filter the data.

Parameters:eventGanttFilterChangeEvent

onHeaderSelectionChange?

(event: GanttHeaderSelectionChangeEvent) => void

Fires when the user clicks the checkbox in a column header.

Parameters:eventGanttHeaderSelectionChangeEvent

onKeyDown?

(event: GanttKeyDownEvent) => void

Fires when the user presses any keyboard key.

Parameters:eventGanttKeyDownEvent

onRowClick?

(event: GanttRowClickEvent) => void

Fires when the user clicks a row.

Parameters:eventGanttRowClickEvent

onRowContextMenu?

(event: GanttRowContextMenuEvent) => void

Fires when the user right-clicks on a row.

Parameters:eventGanttRowContextMenuEvent

onRowDoubleClick?

(event: GanttRowDoubleClickEvent) => void

Fires when the user double-clicks a row.

Parameters:eventGanttRowDoubleClickEvent

onSelectionChange?

(event: GanttSelectionChangeEvent) => void

Fires when the user selects or deselects rows or cells.

Parameters:eventGanttSelectionChangeEvent

onSortChange?

(event: GanttSortChangeEvent) => void

Fires when the sorting of the Gantt is changed (see example). You need to handle the event yourself and sort the data.

Parameters:eventGanttSortChangeEvent

onTaskClick?

(event: GanttTaskClickEvent) => void

Fires when the user clicks a task.

Parameters:eventGanttTaskClickEvent

onTaskContextMenu?

(event: GanttTaskContextMenuEvent) => void

Fires when the user right-clicks on a task.

Parameters:eventGanttTaskContextMenuEvent

onTaskDoubleClick?

(event: GanttTaskDoubleClickEvent) => void

Fires when the user double-clicks a task.

Parameters:eventGanttTaskDoubleClickEvent

onTaskRemoveClick?

(event: GanttTaskRemoveClickEvent) => void

Fires when the user clicks the remove button on a task.

Parameters:eventGanttTaskRemoveClickEvent

onViewChange?

(args: GanttViewChangeEvent) => void

Fires when the user selects a different view. Use this to control which view is shown.

Parameters:argsGanttViewChangeEvent

Example:

jsx

const handleViewChange = (args) => console.log(args.view);
<Gantt onViewChange={handleViewChange} />

reorderable?

boolean

If set to true, the user can reorder columns by dragging their header cells.

Default:

false

resizable?

boolean

If set to true, the user can resize columns by dragging the edges (resize handles) of their header cells.

Default:

false

row?

ComponentType<GanttRowProps>

The Gantt row component.

rowHeight?

number

Sets the height of all rows in pixels. All rows have the same height.

Default:

Example:

jsx

<Gantt rowHeight={40} />

Example:

jsx

<Gantt style={{ height: '500px' }} />

taskData?

any[]

Provides task data for the Gantt chart. Tasks appear as visual bars in the timeline.

Example:

jsx

const tasks = [{ id: 1, title: 'Task 1', start: new Date(), end: new Date() }];
<Gantt taskData={tasks} />

taskModelFields?

GanttTaskModelFields

Maps field names for reading task data from your data source.

Example:

jsx

const taskModelFields = { id: 'id', title: 'title', start: 'start', end: 'end' };
<Gantt taskModelFields={taskModelFields} />

timezone?

string

Sets the timezone for displaying dates and times in the Gantt chart. For example, Europe/Sofia.

Example:

jsx

<Gantt timezone="Europe/Sofia" />

{ addTaskButton: boolean }

Configures the toolbar options. You can enable the add task button.

Example:

jsx

<Gantt toolbar={{ addTaskButton: true }} />

view?

string

Controls which view is currently shown. The value must match the title property of a view.

Example:

jsx

<Gantt view="day" />

webMcp?

boolean | WebMcpProps

Enables Web MCP tool registration for the Gantt component. When set, browser-native AI agent tools are registered via document.modelContext.registerTool().

Example:

tsx

// Boolean: generic "gantt" label
<Gantt webMcp taskData={tasks} />

// Config object: explicit name
<Gantt webMcp={{ dataName: 'project' }} taskData={tasks} />