GanttProps

Premium

Represents the props of the KendoReact Gantt component.

Name	Type	Default	Description
children?	GanttView | GanttView[]		Specify the available view components as children and the Gantt will match the currently selected view and render it. jsx <Gantt> <GanttWeekView title="Day" /> <GanttDayView title="Week" /> </Gantt>
className?	string		Sets custom CSS classes to the Gantt DOM element. jsx <Gantt className="custom-class" />
columnMenu?	React.ComponentType<any>
columnMenuFilter?	CompositeFilterDescriptor[]
columns?	GanttColumnProps[]		A collection of GanttColumnProps for creating columns.
defaultView?	string		Sets the initially selected view. The available values are: day week (Default) month year jsx <Gantt defaultView="month" />
dependencyData?	GanttDependency[]		Sets the dependency data of the Gantt component. The data is then parsed and rendered as visual connections between Gantt tasks. jsx const dependencies = [{ id: 1, from: 1, to: 2 }]; <Gantt dependencyData={dependencies} />
dependencyModelFields?	GanttDependencyModelFields		The names of the model fields from which the Gantt will read its dependency data. 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.
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 on Gantt add button.
onColumnMenuFilterChange?	(event: GanttColumnMenuFilterChangeEvent) => void
onColumnReorder?	(event: GanttColumnReorderEvent) => void		Fires when the columns are reordered.
onColumnResize?	(event: GanttColumnResizeEvent) => void		Fires when a column is resized.
onDataStateChange?	(event: GanttDataStateChangeEvent) => void		Fires when the data state of the Gantt is changed.
onDependencyCreate?	(event: GanttDependencyCreateEvent) => void		Fires when the user creates dependecy between two tasks.
onExpandChange?	(event: GanttExpandChangeEvent) => void		Fires when the user clicks on the expand or collapse icon of a row.
onFilterChange?	(event: GanttFilterChangeEvent) => void		Fires when the Gantt filter is modified through the UI (more information and examples). You have to handle the event yourself and filter the data.
onHeaderSelectionChange?	(event: GanttHeaderSelectionChangeEvent) => void		Fires when the user clicks the checkbox of a column header whose field matches selectedField
onKeyDown?	(event: GanttKeyDownEvent) => void		Fires when the user press keyboard key.
onRowClick?	(event: GanttRowClickEvent) => void		Fires when the user clicks a row.
onRowContextMenu?	(event: GanttRowContextMenuEvent) => void		Fires when the user trigger the context menu of row.
onRowDoubleClick?	(event: GanttRowDoubleClickEvent) => void		Fires when the user double clicks a row.
onSelectionChange?	(event: GanttSelectionChangeEvent) => void		Fires when the user tries to select or deselect a row or cell.
onSortChange?	(event: GanttSortChangeEvent) => void		Fires when the sorting of the Gantt is changed (see example). You have 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 trigger the context menu of task.
onTaskDoubleClick?	(event: GanttTaskDoubleClickEvent) => void		Fires when the user double clicks a task.
onTaskRemoveClick?	(event: GanttTaskRemoveClickEvent) => void		Fires when the user clicks the task remove action.
onViewChange?	(args: GanttViewChangeEvent) => void		Called when a new view is selected. Useful for controlling the selected view. 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.
resizable?	boolean		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		Defines the row height and implements equal heights for all rows. 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		Represents the style HTML attribute. jsx <Gantt style={{ height: '500px' }} />
taskData?	any[]		Sets the task data of the Gantt component. The data is then parsed and rendered as visual Gantt tasks. jsx const tasks = [{ id: 1, title: 'Task 1', start: new Date(), end: new Date() }]; <Gantt taskData={tasks} />
taskModelFields?	GanttTaskModelFields		The names of the model fields from which the Gantt will read its task data. jsx const taskModelFields = { id: 'id', title: 'title', start: 'start', end: 'end' }; <Gantt taskModelFields={taskModelFields} />
timezone?	string		Specifies the id of the timezone that will be displayed in the Gantt. For example, Europe/Sofia. jsx <Gantt timezone="Europe/Sofia" />
toolbar?	{ addTaskButton: boolean; }		Allow configuration of the Gantt toolbar. Currently allows enabling the add button. jsx <Gantt toolbar={{ addTaskButton: true }} />
view?	string		Sets the currently selected view. The value is matched with the title property of the view. jsx <Gantt view="day" />