GanttProps

Premium

Represents the props of the KendoReact Gantt component.

Name	Type	Default	Description
children?	GanttView | GanttView[]		Provides view components as children. The Gantt renders the currently selected view. jsx <Gantt> <GanttWeekView title="Day" /> <GanttDayView title="Week" /> </Gantt>
className?	string		Adds custom CSS classes to the Gantt component. jsx <Gantt className="custom-class" />
columnMenu?	React.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	"week"	Sets the view that shows first when the Gantt loads. You can choose from: day week (Default) month year jsx <Gantt defaultView="month" />
dependencyData?	GanttDependency[]		Provides dependency data for the Gantt chart. Dependencies appear as visual connections between tasks. 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. 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	false	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.
noRecords?	React.ReactElement<GanttNoRecordsProps>		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. jsx const handleViewChange = (args) => console.log(args.view); <Gantt onViewChange={handleViewChange} />
reorderable?	boolean	false	If set to true, the user can reorder columns by dragging their header cells.
resizable?	boolean	false	If set to true, the user can resize columns by dragging the edges (resize handles) of their header cells.
row?	React.ComponentType<GanttRowProps>		The Gantt row component.
rowHeight?	number	50	Sets the height of all rows in pixels. All rows have the same height. jsx <Gantt rowHeight={40} />
selectable?	GanttSelectableSettings		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?	React.CSSProperties		Sets custom styles for the Gantt component. jsx <Gantt style={{ height: '500px' }} />
taskData?	any[]		Provides task data for the Gantt chart. Tasks appear as visual bars in the timeline. 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. 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. jsx <Gantt timezone="Europe/Sofia" />
toolbar?	{ addTaskButton: boolean; }		Configures the toolbar options. You can enable the add task button. jsx <Gantt toolbar={{ addTaskButton: true }} />
view?	string		Controls which view is currently shown. The value must match the title property of a view. jsx <Gantt view="day" />