GanttProps
Represents the props of the KendoReact Gantt component.
Definition
Package:@progress/kendo-react-gantt
Properties
Provides view components as children. The Gantt renders the currently selected view.
className?
string
Adds custom CSS classes to the Gantt component.
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.
A collection of GanttColumnProps for creating columns.
defaultView?
string
Sets the view that shows first when the Gantt loads. You can choose from:
dayweek(Default)monthyear
"week"
Provides dependency data for the Gantt chart. Dependencies appear as visual connections between tasks.
Maps field names for reading dependency data from your data source.
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.
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.
onColumnMenuFilterChange?
(event: GanttColumnMenuFilterChangeEvent) => void
Fires when the user changes the column menu filter.
onColumnReorder?
(event: GanttColumnReorderEvent) => void
Fires when the user reorders columns.
onColumnResize?
(event: GanttColumnResizeEvent) => void
Fires when the user resizes a column.
onDataStateChange?
(event: GanttDataStateChangeEvent) => void
Fires when the data state changes.
onDependencyCreate?
(event: GanttDependencyCreateEvent) => void
Fires when the user creates a dependency by connecting two tasks.
onExpandChange?
(event: GanttExpandChangeEvent) => void
Fires when the user clicks the expand or collapse icon on a row.
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.
onHeaderSelectionChange?
(event: GanttHeaderSelectionChangeEvent) => void
Fires when the user clicks the checkbox in a column header.
onKeyDown?
(event: GanttKeyDownEvent) => void
Fires when the user presses any keyboard key.
onRowClick?
(event: GanttRowClickEvent) => void
Fires when the user clicks a row.
onRowContextMenu?
(event: GanttRowContextMenuEvent) => void
Fires when the user right-clicks on a row.
onRowDoubleClick?
(event: GanttRowDoubleClickEvent) => void
Fires when the user double-clicks a row.
onSelectionChange?
(event: GanttSelectionChangeEvent) => void
Fires when the user selects or deselects rows or cells.
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.
onTaskClick?
(event: GanttTaskClickEvent) => void
Fires when the user clicks a task.
onTaskContextMenu?
(event: GanttTaskContextMenuEvent) => void
Fires when the user right-clicks on a task.
onTaskDoubleClick?
(event: GanttTaskDoubleClickEvent) => void
Fires when the user double-clicks a task.
onTaskRemoveClick?
(event: GanttTaskRemoveClickEvent) => void
Fires when the user clicks the remove button on a task.
onViewChange?
(args: GanttViewChangeEvent) => void
Fires when the user selects a different view. Use this to control which view is shown.
reorderable?
boolean
If set to true, the user can reorder columns by dragging their header cells.
false
resizable?
boolean
If set to true, the user can resize columns by dragging the edges (resize handles) of their header cells.
false
row?
ComponentType<GanttRowProps>
The Gantt row component.
rowHeight?
number
Sets the height of all rows in pixels. All rows have the same height.
50
The Gantt selectable settings.
sort?
SortDescriptor[]
The descriptors by which the data is sorted. Applies the sorting styles and buttons to the affected columns.
sortable?
SortSettings
Enables sorting (see example).
style?
CSSProperties
Sets custom styles for the Gantt component.
taskData?
any[]
Provides task data for the Gantt chart. Tasks appear as visual bars in the timeline.
Maps field names for reading task data from your data source.
timezone?
string
Sets the timezone for displaying dates and times in the Gantt chart.
For example, Europe/Sofia.
toolbar?
{ addTaskButton: boolean }
Configures the toolbar options. You can enable the add task button.
view?
string
Controls which view is currently shown. The value must match the title property of a view.
webMcp?
boolean | WebMcpProps
Enables Web MCP tool registration for the Gantt component.
When set, browser-native AI agent tools are registered via
navigator.modelContext.registerTool() (Chrome 146+).