@progress/kendo-react-gantt
Version:
React Gantt enables the display of self-referencing tabular data with many features. KendoReact Gantt package
1,615 lines (1,523 loc) • 47 kB
TypeScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { BaseEvent } from '@progress/kendo-react-common';
import { CellProps } from '@progress/kendo-react-data-tools';
import { ComponentType } from 'react';
import { CompositeFilterDescriptor } from '@progress/kendo-data-query';
import { Day } from '@progress/kendo-date-math';
import { filterBy as filterBy_2 } from '@progress/kendo-react-data-tools';
import { FilterCellProps } from '@progress/kendo-react-data-tools';
import { FilterComponentProps } from '@progress/kendo-react-data-tools';
import { FilterDescriptor } from '@progress/kendo-data-query';
import { FilterOperator } from '@progress/kendo-react-data-tools';
import { ForwardRefExoticComponent } from 'react';
import { getSelectedState } from '@progress/kendo-react-data-tools';
import { getSelectedStateFromKeyDown } from '@progress/kendo-react-data-tools';
import { HeaderCellProps } from '@progress/kendo-react-data-tools';
import { IntlService } from '@progress/kendo-react-intl';
import { LocalizationService } from '@progress/kendo-react-intl';
import { orderBy as orderBy_2 } from '@progress/kendo-react-data-tools';
import * as React_2 from 'react';
import { RefAttributes } from 'react';
import { setSelectedState } from '@progress/kendo-react-data-tools';
import { SortDescriptor } from '@progress/kendo-data-query';
import { SortSettings } from '@progress/kendo-react-data-tools';
import { TableKeyDownEvent } from '@progress/kendo-react-data-tools';
import { TableSelectableMode } from '@progress/kendo-react-data-tools';
import { TableSelectableSettings } from '@progress/kendo-react-data-tools';
import { TableSelectionChangeEvent } from '@progress/kendo-react-data-tools';
import { TreeColumnBaseProps } from '@progress/kendo-react-data-tools';
import { TreeListRowProps } from '@progress/kendo-react-treelist';
import { ZonedDate } from '@progress/kendo-date-math';
/**
* @hidden
*/
export declare const addDependency: (options: {
defaultDataItem?: DataItem;
dependencyModelFields: DependencyModelFields;
dependencyData: DataItem[];
fromId: any;
toId: any;
type: number;
}) => DataItem[];
/**
* The direction of the add new task action.
* If set to 'none' the task should be added at the end of the data collection.
* If set to 'above', 'below' or 'child', `selectedTask` option should be provided.
*/
declare type AddDirection = 'none' | 'above' | 'below' | 'child';
/**
* @hidden
*/
export declare const addTask: (options: {
defaultDataItem?: DataItem;
selectedDataItem?: DataItem;
direction: AddDirection;
taskModelFields: TaskModelFields;
dataTree: DataItem[];
slotStart: Date;
slotEnd: Date;
}) => DataItem[];
declare interface ColumnDragEvent {
/**
* An event target.
*/
target: GanttHandle;
/**
* A native DOM event.
*/
nativeEvent: any;
/**
* The current columns collection.
*/
columns: GanttColumnProps[];
}
/**
* Creates a tree from the passed dataset.
*
* @param {object[]} dataset - The source dataset of data items.
* @param {(item: object) => any} getId - A function which will return the id of the data item.
* @param {(item: object) => any} getParentId - A function which will return the data item id of its parent data item.
* @param {string} subItemsField - The field which points to the subitems collection of each data item.
* @returns {object[]} - A collection of the generated data items that are structured in a tree.
*/
export declare const createDataTree: (dataset: any[], getId: (item: any) => any, getParentId: (item: any) => any, subItemsField: string) => any[];
/**
* Represents the items which the [`data`]({% slug api_gantt_ganttprops %}#toc-data) property accepts.
* The `data` has no strict type. However, to visualize it correctly,
* use it in combination with the [`modelFields`]({% slug api_gantt_ganttprops %}#toc-modelfields) property.
*/
declare type DataItem = any;
/** @hidden */
declare interface DateRange {
start: Date;
end: Date;
zonedStart: ZonedDate;
zonedEnd: ZonedDate;
}
/**
* Represents the combined object of the default and custom GanttDependencyModelFields.
*/
declare interface DependencyModelFields {
/**
* The unique identifier of the Gantt dependency. Dependencies, whose id is not set, are considered as "new".
* Defaults to `"id"`.
*/
id: string;
/**
* The unique identifier of the from task.
* Defaults to `"fromId"`.
*/
fromId: string;
/**
* The unique identifier of the to task.
* Defaults to `"toId"`.
*/
toId: string;
/**
* The type of the dependency.
* Defaults to `"type"`.
*/
type: string;
}
/**
* The dependency type when two tasks are connected.
*
* The supported values are:
* * `FF`—from 'finish' to 'finish'
* * `FS`—from 'finish' to 'start'
* * `SS`—from 'start' to 'start'
* * `SF`—from 'start' to 'finish'
*/
declare enum DependencyType {
FF = 0,
FS = 1,
SF = 2,
SS = 3
}
/**
* Similar to the `Object.assign` function. Additionally, creates a new array for the subitems.
*
* @param {object} item - The source data item.
* @param {string} subItemsField - The field which points to the subitems collection of each data item.
* @param {object} propsToExtend - The props with which the source data item will be extended.
* @returns {object} - The target data item.
*/
export declare const extendDataItem: (item: any, subItemsField: string, propsToExtend?: any) => any;
/**
* Filters the provided data tree according to the specified `Array<FilterDescriptor|CompositeFilterDescriptor>`.
*
* @param {T[]} data - The data that will be filtered.
* @param {FilterDescriptor[]|CompositeFilterDescriptor[]} descriptors - The filter criteria that will be applied.
* @param {string} subItemsField - The field which points to the subitems collection of each data item.
* @returns {T[]} - The filtered data.
*/
export declare const filterBy: typeof filterBy_2;
/**
* Represents the Gantt component.
*
* @remarks
* Supported children components are: {@link GanttWeekView}, {@link GanttDayView}, {@link GanttMonthView}, {@link GanttYearView}.
*/
export declare const Gantt: React_2.ForwardRefExoticComponent<GanttProps & React_2.RefAttributes<GanttHandle | null>>;
/** The attribute required by the Gantt selection on Gantt `td` elements. */
export declare const GANTT_COL_INDEX_ATTRIBUTE = "data-grid-col-index";
/** Attribute which disable selection start from this element. */
export declare const GANTT_PREVENT_SELECTION_ELEMENT = "data-prevent-selection";
/** The attribute required by the Gantt selection on Gantt `tr` elements. */
export declare const GANTT_ROW_INDEX_ATTRIBUTE = "data-grid-row-index";
/**
* Represents the object of the `onAddClick` Gantt event.
*/
export declare interface GanttAddClickEvent extends GanttEvent {
/**
* The direction of the add action.
*/
direction: AddDirection;
/**
* The data item which is currently selected.
*/
selectedDataItem?: any;
/**
* Current view first slot range start date.
*/
slotStart: Date;
/**
* Current view first slot range end date.
*/
slotEnd: Date;
}
/**
* @hidden
*/
declare interface GanttBaseProps {
/**
* Represents the component that will be rendered when the `data` property of the Gantt is empty or undefined.
*/
noRecords?: React.ReactElement<GanttNoRecordsProps>;
/**
* A collection of `GanttColumnProps` for creating columns.
*/
columns?: GanttColumnProps[];
/**
* Specifies the id of the timezone that will be displayed in the Gantt.
* For example, `Europe/Sofia`.
*
* Defaults to `Etc/UTC`.
*/
timezone?: string;
/**
* If set to `true`, the user can resize columns by dragging the edges (resize handles) of their header cells.
*
* @default false
*/
resizable?: boolean;
/**
* Enables sorting ([see example]({% slug sorting_gantt %})).
*/
sortable?: GanttSortSettings;
/**
* The descriptors by which the data is sorted. Applies the sorting styles and buttons to the affected columns.
*/
sort?: SortDescriptor[];
/**
* The descriptors by which the data is filtered ([more information and examples]({% slug filtering_gantt %})).
* This affects the values and buttons in the `FilterRow` of the Gantt.
*/
filter?: FilterDescriptor[];
/**
* If set to `true`, the user can reorder columns by dragging their header cells.
*
* @default false
*/
reorderable?: 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
*/
navigatable?: boolean;
/**
* The descriptors by which the data is filtered in the column menu.
*/
columnMenuFilter?: CompositeFilterDescriptor[];
/**
* The component to render as the column menu.
*/
columnMenu?: React.ComponentType<any>;
/**
* The Gantt row component.
*/
row?: React.ComponentType<GanttRowProps>;
/**
* The Gantt selectable settings.
*/
selectable?: GanttSelectableSettings;
}
export declare const GanttBooleanFilter: React_2.FunctionComponent<GanttBooleanFilterProps>;
export declare interface GanttBooleanFilterProps extends FilterComponentProps {
/**
* The list of the operators.
*/
operators?: GanttFilterOperator[];
}
/**
* Represents the props of the GanttCell component.
*/
declare interface GanttCellProps extends Omit<CellProps, 'onChange' | 'render'> {
/**
* An array of indexes of each parent and current item in the data tree.
*/
level: number[];
/**
* Indicates that the data item of the cell has subitems.
*/
hasChildren?: boolean;
/**
* If set to `true`, the cell will render indentation based on its level prop and
* the icons that are used for expanding and collapsing child rows.
*/
expandable?: boolean;
/**
* The index of the column. Useful for applying `aria-colindex` accessibility attribute.
*/
colIndex: number;
/**
* The event that is fired when the expand or collapse icon of the cell is clicked.
*/
onExpandChange: (event: React.MouseEvent<HTMLSpanElement>, dataItem: any, level: number[]) => void;
/**
* A function for overriding the default rendering of the cell.
*/
render?: (defaultRendering: React.ReactElement<HTMLTableCellElement> | null, props: GanttCellProps) => React.ReactElement<HTMLTableCellElement> | null;
/**
* The event that is fired when the cell value is changed.
*/
onChange?: (event: {
dataItem: any;
level: number[];
syntheticEvent: React.SyntheticEvent<any>;
field?: string;
value?: any;
}) => void;
}
/**
* Represents the object of the `onColumnMenuFilterChange` Gantt event.
*/
export declare interface GanttColumnMenuFilterChangeEvent extends GanttEvent {
/**
* The new `CompositeFilterDescriptor` based on the user action.
*/
filter: CompositeFilterDescriptor[];
/**
* The field of the column which triggers the event.
*/
field: string;
}
/**
* The props of the columns of the Gantt component.
*/
export declare interface GanttColumnProps extends Omit<TreeColumnBaseProps, 'children' | 'editCell' | 'cell' | 'disableReorder'> {
/**
* Defines the component that will be rendered as a cell. If not set, a `GanttCell` will be rendered by default.
*/
cell?: ComponentType<GanttCellProps>;
/**
* @hidden
* Defines the component that will be rendered as an edit cell.
*/
editCell?: ComponentType<GanttCellProps>;
/**
* Defines the component that will be rendered as a header cell.
* If not set, a `GanttHeaderCell` will be rendered by default.
*/
headerCell?: ComponentType<GanttHeaderCellProps>;
/**
* **Deprecated**. Use `filterCell` prop instead.
*/
filter?: ComponentType<GanttFilterCellProps>;
/**
* Defines the component that will be rendered as a filter cell.
*/
filterCell?: ComponentType<GanttFilterCellProps>;
/**
* A collection of child columns.
*/
children?: GanttColumnProps[];
}
/**
* Represents the object of the `onColumnReorder` Gantt event.
*/
export declare interface GanttColumnReorderEvent extends ColumnDragEvent {
}
/**
* Represents the object of the `onColumnResize` Gantt event.
*/
export declare interface GanttColumnResizeEvent extends ColumnDragEvent {
/**
* The index of the column.
*/
index: number;
/**
* The new width of the column.
*/
newWidth: number;
/**
* The actual width of the column prior to resizing.
*/
oldWidth: number;
/**
* Indicates that resizing is complete and the user has dropped the resize handler.
*/
end: boolean;
/**
* The total width of the columns after the resizing.
*/
totalWidth: number;
}
/**
* Represents the object of the `onDataStateChange` Gantt event.
*/
export declare interface GanttDataStateChangeEvent extends GanttEvent {
/**
* The state of the Gantt based on the user action.
*/
dataState: {
/**
* The descriptors that are used for sorting.
*/
sort?: Array<SortDescriptor>;
/**
* The descriptors that are used for filtering.
*/
filter?: Array<FilterDescriptor>;
/**
* The field of the column which triggers the event.
*/
field?: string;
};
}
export declare const GanttDateFilter: React_2.FunctionComponent<GanttDateFilterProps>;
export declare interface GanttDateFilterProps extends FilterComponentProps {
/**
* The list of the operators.
*/
operators?: GanttFilterOperator[];
}
/**
* Represents the KendoReact DayView Component.
*/
export declare const GanttDayView: React_2.ForwardRefExoticComponent<GanttDayViewProps & React_2.RefAttributes<GanttViewHandle | null>>;
/**
* @hidden
*/
declare interface GanttDayViewProps extends GanttViewProps {
/**
* The span of an hour slot. Defaults to 1.
*/
slotDuration?: number;
}
/**
* Represents an instance of a Gantt dependency.
*/
export declare interface GanttDependency {
/**
* The `id` of the origin task of this dependency.
*/
fromId: string | number;
/**
* The unique identifier of the dependency.
*/
id: string | number;
/**
* @hidden
*/
uid?: string | number;
/**
* The `id` of the destination task of this dependency.
*/
toId: string | number;
/**
* The type of the dependency.
*/
type: DependencyType;
}
/**
* Represents the object of the `onDependencyCreateEvent` Gantt event.
*/
export declare interface GanttDependencyCreateEvent extends GanttEvent {
/**
* The id of the source task.
*/
fromId: any;
/**
* The id of the destination task.
*/
toId: any;
/**
* The type of the dependency.
*/
type: number;
}
/**
* Defines the model fields that will be used for creating `GanttDependency` instances.
*/
export declare interface GanttDependencyModelFields {
/**
* The name of the `ID` model field.
* Defaults to `"id"`.
*/
id?: string;
/**
* The name of the from task id model field.
* Defaults to `"fromId"`.
*/
fromId?: string;
/**
* The name of the to task id model field.
* Defaults to `"toId"`.
*/
toId?: string;
/**
* The name of the type model field.
* Defaults to `"type"`.
*/
type?: string;
}
declare interface GanttEditorDependenciesHandler {
/**
* Lists the new dependencies that were created.
*/
createdDependencies: GanttDependency[];
/**
* Lists the existing dependencies that were changed.
*/
updatedDependencies: GanttDependency[];
/**
* Lists the dependencies that were removed.
*/
deletedDependencies: GanttDependency[];
}
/**
* Represents the base event object of the Gantt.
*/
declare interface GanttEvent extends BaseEvent<GanttHandle> {
}
/**
* Represents the object of the `onExpandChange` Gantt event.
*/
export declare interface GanttExpandChangeEvent extends GanttEvent {
/**
* The data item which is expanded or collapsed.
*/
dataItem: any;
/**
* An array of indexes of each parent and current item in the data tree.
*/
level: number[];
/**
* The available values are:
* - `true`—If the data item is expanded.
* - `false`—If the data item is collapsed.
*/
value: boolean;
}
/**
* @hidden
*/
declare interface GanttFilterCellProps extends FilterCellProps {
}
/**
* Represents the object of the `onFilterChange` Gantt event.
*/
export declare interface GanttFilterChangeEvent extends GanttEvent {
/**
* The new `FilterDescriptor` based on the user action.
*/
filter: FilterDescriptor[];
/**
* The field of the column which triggers the event.
*/
field: string;
}
/**
* The filter operator for the Gantt filters.
*/
declare interface GanttFilterOperator extends FilterOperator {
}
/**
* Represents the default `form` component rendered when editing a task in the Gantt component.
*/
export declare const GanttForm: (props: GanttFormProps) => React_2.ReactPortal | null;
/**
* Represents the props of the KendoReact [GanttForm]({% slug api_gantt_ganttform %}) component.
*/
declare interface GanttFormProps {
/**
* Specifies the `DataItem` to be visualized inside the form.
*/
dataItem: DataItem;
/**
* The task data passed to the form.
*/
taskData?: DataItem[];
/**
* The dependancy data passed to the form.
*/
dependencyData?: GanttDependency[];
/**
* Called when the `cancel` button is clicked.
*/
onCancel?: (event: GanttFormStateChangeEvent) => void;
/**
* Called when the `delete` button is clicked.
*/
onDelete?: (event: GanttFormStateChangeEvent) => void;
/**
* Called when the `close` button is clicked.
*/
onClose?: (event: GanttFormStateChangeEvent) => void;
/**
* Called when the `submit` button is clicked.
*/
onSubmit: (event: GanttFormStateChangeEvent) => void;
}
/**
* Represents the event arguments of Gantt form.
*/
export declare interface GanttFormStateChangeEvent {
/**
* The initial data item.
*/
initialDataItem?: DataItem;
/**
* The updated data item.
*/
dataItem: DataItem | null;
/**
* A React Synthetic Event.
*/
syntheticEvent: React_2.SyntheticEvent<any>;
/**
* A native DOM event.
*/
nativeEvent: any;
/**
* Passes the updated dependencies.
*/
dependencies?: GanttEditorDependenciesHandler;
}
/**
* Represents the Object which is passed to the [`ref`](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) callback of the Gantt component.
*/
declare interface GanttHandle {
/**
* The current element or `null` if there is no one.
*/
element: HTMLDivElement | null;
/**
* Method to allow the scroll to be set to a specific row index.
*/
scrollIntoView: (options: {
rowIndex?: number;
}) => void;
/**
* The props of the Gantt.
*/
props: GanttProps;
}
/**
* The props of the GanttHeaderCell component.
*/
declare interface GanttHeaderCellProps extends HeaderCellProps {
}
/**
* Represents the object of the `onHeaderSelectionChange` Gantt event.
*/
export declare interface GanttHeaderSelectionChangeEvent extends GanttEvent {
/**
* The field of the column in which the cell is located.
*/
field?: string;
}
/**
* Represents the object of the `onKeyDownEvent` Gantt event.
*/
export declare interface GanttKeyDownEvent extends GanttEvent, TableKeyDownEvent<GanttHandle> {
}
/**
* Represents the KendoReact MonthView Component.
*/
export declare const GanttMonthView: React_2.ForwardRefExoticComponent<GanttMonthViewProps & React_2.RefAttributes<GanttViewHandle | null>>;
/**
* @hidden
*/
declare interface GanttMonthViewProps extends GanttViewProps {
}
/**
* The props of the GanttNoRecords component.
*/
declare interface GanttNoRecordsProps {
/**
* The React elements which will be rendered inside the Gantt when no records are available.
*/
children?: React.ReactNode;
}
export declare const GanttNumericFilter: React_2.FunctionComponent<GanttNumericFilterProps>;
export declare interface GanttNumericFilterProps extends FilterComponentProps {
/**
* The list of the operators.
*/
operators?: GanttFilterOperator[];
}
/**
* Represents the props of the [KendoReact Gantt component]({% slug overview_gantt %}).
*/
declare interface GanttProps extends GanttBaseProps {
/**
* Adds custom CSS classes to the Gantt component.
*
* @example
* ```jsx
* <Gantt className="custom-class" />
* ```
*/
className?: string;
/**
* Sets custom styles for the Gantt component.
*
* @example
* ```jsx
* <Gantt style={{ height: '500px' }} />
* ```
*/
style?: React.CSSProperties;
/**
* 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} />
* ```
*
* @slug task_data_gantt
*/
taskData?: DataItem[];
/**
* 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} />
* ```
*
* @slug dependency_data_gantt
*/
dependencyData?: GanttDependency[];
/**
* 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} />
* ```
*/
taskModelFields?: GanttTaskModelFields;
/**
* Maps field names for reading dependency data from your data source.
*
* @example
* ```jsx
* const dependencyModelFields = { id: 'id', from: 'from', to: 'to' };
* <Gantt dependencyModelFields={dependencyModelFields} />
* ```
*/
dependencyModelFields?: GanttDependencyModelFields;
/**
* Provides view components as children. The Gantt renders the currently selected view.
*
* @example
* ```jsx
* <Gantt>
* <GanttWeekView title="Day" />
* <GanttDayView title="Week" />
* </Gantt>
* ```
*/
children?: GanttView[] | GanttView;
/**
* 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" />
* ```
*/
defaultView?: string;
/**
* Controls which view is currently shown. The value must match the `title` property of a view.
*
* @example
* ```jsx
* <Gantt view="day" />
* ```
*/
view?: string;
/**
* Sets the timezone for displaying dates and times in the Gantt chart.
* For example, `Europe/Sofia`.
*
* @example
* ```jsx
* <Gantt timezone="Europe/Sofia" />
* ```
*/
timezone?: string;
/**
* Sets the height of all rows in pixels. All rows have the same height.
*
* @default 50
*
* @example
* ```jsx
* <Gantt rowHeight={40} />
* ```
*/
rowHeight?: number;
/**
* Configures the toolbar options. You can enable the add task button.
*
* @example
* ```jsx
* <Gantt toolbar={{ addTaskButton: true }} />
* ```
*/
toolbar?: {
addTaskButton: boolean;
};
/**
* Fires when the user selects a different view. Use this to control which view is shown.
*
* @example
* ```jsx
* const handleViewChange = (args) => console.log(args.view);
* <Gantt onViewChange={handleViewChange} />
* ```
*/
onViewChange?: (args: GanttViewChangeEvent) => void;
/**
* Fires when the user changes the column menu filter.
*/
onColumnMenuFilterChange?: (event: GanttColumnMenuFilterChangeEvent) => void;
/**
* Fires when the data state changes.
*/
onDataStateChange?: (event: GanttDataStateChangeEvent) => void;
/**
* Fires when the sorting of the Gantt is changed ([see example]({% slug sorting_gantt %})).
* You need to handle the event yourself and sort the data.
*/
onSortChange?: (event: GanttSortChangeEvent) => void;
/**
* Fires when the Gantt filter is modified through the UI
* ([more information and examples]({% slug filtering_gantt %})).
* You need to handle the event yourself and filter the data.
*/
onFilterChange?: (event: GanttFilterChangeEvent) => void;
/**
* Fires when the user clicks the expand or collapse icon on a row.
*/
onExpandChange?: (event: GanttExpandChangeEvent) => void;
/**
* Fires when the user clicks the add task button.
*/
onAddClick?: (event: GanttAddClickEvent) => void;
/**
* Fires when the user resizes a column.
*/
onColumnResize?: (event: GanttColumnResizeEvent) => void;
/**
* Fires when the user reorders columns.
*/
onColumnReorder?: (event: GanttColumnReorderEvent) => void;
/**
* Fires when the user clicks a row.
*/
onRowClick?: (event: GanttRowClickEvent) => void;
/**
* Fires when the user double-clicks a row.
*/
onRowDoubleClick?: (event: GanttRowDoubleClickEvent) => void;
/**
* Fires when the user right-clicks on a row.
*/
onRowContextMenu?: (event: GanttRowContextMenuEvent) => void;
/**
* Fires when the user clicks a task.
*/
onTaskClick?: (event: GanttTaskClickEvent) => void;
/**
* Fires when the user double-clicks a task.
*/
onTaskDoubleClick?: (event: GanttTaskDoubleClickEvent) => void;
/**
* Fires when the user right-clicks on a task.
*/
onTaskContextMenu?: (event: GanttTaskContextMenuEvent) => void;
/**
* Fires when the user clicks the remove button on a task.
*/
onTaskRemoveClick?: (event: GanttTaskRemoveClickEvent) => void;
/**
* Fires when the user creates a dependency by connecting two tasks.
*/
onDependencyCreate?: (event: GanttDependencyCreateEvent) => void;
/**
* Fires when the user presses any keyboard key.
*/
onKeyDown?: (event: GanttKeyDownEvent) => void;
/**
* Fires when the user selects or deselects rows or cells.
*/
onSelectionChange?: (event: GanttSelectionChangeEvent) => void;
/**
* Fires when the user clicks the checkbox in a column header.
*/
onHeaderSelectionChange?: (event: GanttHeaderSelectionChangeEvent) => void;
}
/**
* Represents the `removeDialog` component rendered when removing a task from the Gantt component.
*/
export declare const GanttRemoveDialog: (props: GanttRemoveDialogProps) => React_2.ReactPortal | null;
/**
* Represents the props of the KendoReact [GanttRemoveDialog]({% slug api_gantt_ganttremovedialog %}) component.
*/
declare interface GanttRemoveDialogProps {
/**
* Specifies the `DataItem` currently being deleted.
*/
dataItem: DataItem;
/**
* Called when the `close` button is clicked.
*/
onClose?: (event: GanttRemoveDialogStateChangeEvent) => void;
/**
* Called when the `cancel` button is clicked.
*/
onCancel?: (event: GanttRemoveDialogStateChangeEvent) => void;
/**
* Called when the `confirm` button is clicked.
*/
onConfirm?: (event: GanttRemoveDialogStateChangeEvent) => void;
}
/**
* Represents the event arguments of Gantt remove dialog.
*/
export declare interface GanttRemoveDialogStateChangeEvent {
/**
* The updated data item.
*/
dataItem: DataItem | null;
/**
* A React Synthetic Event.
*/
syntheticEvent: React_2.SyntheticEvent<any>;
/**
* A native DOM event.
*/
nativeEvent: any;
}
/**
* The default row component of the Gantt.
*/
export declare const GanttRow: ForwardRefExoticComponent<TreeListRowProps & RefAttributes<HTMLTableRowElement>>;
/**
* Represents the object of the `onRowClick` Gantt event.
*/
export declare interface GanttRowClickEvent extends GanttEvent {
/**
* The data item which corresponds to the clicked row.
*/
dataItem: any;
/**
* An array of indexes of each parent and current item in the data tree.
*/
level: number[];
}
/**
* Represents the object of the `onRowContextMenu` Gantt event.
*/
export declare interface GanttRowContextMenuEvent extends GanttEvent {
/**
* The data item which corresponds to the clicked row.
*/
dataItem: any;
/**
* An array of indexes of each parent and current item in the data tree.
*/
level: number[];
}
/**
* Represents the object of the `onRowDoubleClick` Gantt event.
*/
export declare interface GanttRowDoubleClickEvent extends GanttEvent {
/**
* The data item which corresponds to the clicked row.
*/
dataItem: any;
/**
* An array of indexes of each parent and current item in the data tree.
*/
level: number[];
}
/**
* The props that the Gantt passes to the GanttRow component when creating it.
*/
export declare interface GanttRowProps {
/**
* The `data` object that represents the current row.
*/
dataItem: any;
/**
* The event that is fired when the row is clicked.
*/
onClick?: any;
/**
* The event that is fired when the row is double clicked.
*/
onDoubleClick?: any;
/**
* The event that is fired when the row context menu is triggered.
*/
onContextMenu?: any;
/**
* The name of the field which will provide a Boolean representation of the selected state of the item.
*/
selectedField?: string;
/**
* Sets the height of the row.
*/
rowHeight?: number;
/**
* A function for overriding the default rendering of the row.
*/
render?: (row: React.ReactElement<HTMLTableRowElement>, props: GanttRowProps) => React.ReactNode;
/**
* An array of indexes of each parent and current item in the data tree.
*/
level: number[];
/**
* Fires when a row is dragged.
*/
onDrag?: (event: {
nativeEvent: any;
dragged: number[];
draggedOver: number[] | null;
draggedItem: any;
}) => void;
/**
* Fires when a row is dragged and dropped.
*/
onDrop?: (event: {
nativeEvent: any;
dragged: number[];
draggedOver: number[] | null;
draggedItem: any;
}) => void;
/**
* The expanded state of the row. Useful for applying `aria-expanded` accessibility attribute.
*/
expanded: boolean;
/**
* The index of the row. Useful for applying `aria-rowindex` accessibility attribute.
*/
rowIndex: number;
/**
* @hidden
*/
children: React.ReactNode;
/**
* @hidden
*/
levels: number[][];
/**
* @hidden
*/
isAltRow?: boolean;
/**
* The index to be applied to the `aria-rowindex` attribute.
*/
ariaRowIndex?: number;
/**
* The count of items on current level, applied to the `aria-setsize` attribute.
*/
ariaSetSize?: number;
/**
* The index of the item on current level, applied to the `aria-posinset` attribute.
*/
ariaPosInSet?: number;
/**
* Indicates if the row is selected.
*/
isSelected: boolean;
}
/**
* Represents the available selection modes.
*/
export declare type GanttSelectableMode = TableSelectableMode;
/**
* Represents the Gantt selectable settings.
*/
export declare interface GanttSelectableSettings extends TableSelectableSettings {
/**
* The available values are:
* * `single`
* * `multiple`
*
* @default "multiple"
*/
mode?: GanttSelectableMode;
}
/**
* Represents the object of the `onSelectionChange` Gantt event.
*/
export declare interface GanttSelectionChangeEvent extends GanttEvent, TableSelectionChangeEvent<GanttHandle> {
/**
* An array of indexes of each parent and current item in the data tree.
*/
level: number[];
}
/**
* The types of Gantt slot.
*/
export declare type GanttSlotType = 'time' | 'day' | 'week' | 'month' | 'year';
/**
* Represents the object of the `onSortChange` Gantt event.
*/
export declare interface GanttSortChangeEvent extends GanttEvent {
/**
* The new `SortDescriptor` according to the user action.
*/
sort: SortDescriptor[];
/**
* The field of the column which triggers the event.
*/
field: string;
}
/**
* The settings for sorting the Gantt data.
*/
declare type GanttSortSettings = SortSettings;
/**
* Represents the object of the `onTaskClick` Gantt event.
*/
export declare interface GanttTaskClickEvent extends GanttEvent {
/**
* The data item which corresponds to the clicked task.
*/
dataItem: any;
/**
* An array of indexes of each parent and current item in the data tree.
*/
level: number[];
}
/**
* Represents the object of the `onTaskContextMenu` Gantt event.
*/
export declare interface GanttTaskContextMenuEvent extends GanttEvent {
/**
* The data item which corresponds to the clicked task.
*/
dataItem: any;
/**
* An array of indexes of each parent and current item in the data tree.
*/
level: number[];
}
/**
* Represents the object of the `onTaskDoubleClick` Gantt event.
*/
export declare interface GanttTaskDoubleClickEvent extends GanttEvent {
/**
* The data item which corresponds to the double clicked task.
*/
dataItem: any;
/**
* An array of indexes of each parent and current item in the data tree.
*/
level: number[];
}
/**
* Defines the model fields that will be used for creating `GanttTask` instances.
*/
export declare interface GanttTaskModelFields {
/**
* The name of the `ID` model field.
* Defaults to `"id"`.
*/
id?: string;
/**
* The name of the start date model field.
* Defaults to `"start"`.
*/
start?: string;
/**
* The name of the end date model field.
* Defaults to `"end"`.
*/
end?: string;
/**
* The name of the title model field.
* Defaults to `"title"`.
*/
title?: string;
/**
* The name of the percent complete model field.
* Defaults to `"percentComplete"`.
*/
percentComplete?: string;
/**
* The name of the percent complete model field.
* Defaults to `"parentId"`.
*/
parentId?: string;
/**
* The name of the is rollup model field.
* Defaults to `"isRollup"`.
*/
isRollup?: string;
/**
* The name of the is expanded model field. It will provide a Boolean representation of the expanded state of the item.
* Defaults to `"isExpanded"`.
*/
isExpanded?: string;
/**
* The name of the children model field. It will provide an array representation of the item subitems.
* Defaults to `"children"`.
*/
children?: string;
/**
* The name of the is in edit model field. It will provide a Boolean representation of the edit state of the current item.
* Defaults to `"isInEdit"`.
*/
isInEdit?: string;
/**
* The name of the selected model field. It will provide a Boolean representation of the selected state of the current item.
* Defaults to `"isSelected"`.
*/
isSelected?: string;
}
/**
* Represents the object of the `onTaskRemoveClick` Gantt event.
*/
export declare interface GanttTaskRemoveClickEvent extends GanttEvent {
/**
* The data item which corresponds to the clicked task.
*/
dataItem: any;
/**
* An array of indexes of each parent and current item in the data tree.
*/
level: number[];
}
export declare const GanttTextFilter: React_2.FunctionComponent<GanttTextFilterProps>;
export declare interface GanttTextFilterProps extends FilterComponentProps {
/**
* The list of the operators.
*/
operators?: GanttFilterOperator[];
}
/**
* Represents a single Gantt view.
*/
declare type GanttView = React.ReactElement<GanttViewProps>;
/**
* Called every time the user changes the active `view`.
*/
export declare interface GanttViewChangeEvent extends GanttEvent {
/**
* The value of the selected view.
*/
value: string;
}
/**
* Represents the arguments which are passed to the [dateRange]({% slug api_gantt_ganttviewprops %}#toc-daterange) function.
*/
declare interface GanttViewDateRangeArgs {
/**
* The earliest start date among all tasks.
*/
tasksStart: Date;
/**
* The latest end date among all tasks.
*/
tasksEnd: Date;
/**
* The internationalization service for date formatting and localization.
*/
intl: IntlService;
/**
* The timezone identifier for date calculations.
*/
timezone?: string;
/**
* The number of days to include in the date range calculation.
*/
numberOfDays?: number;
}
/**
* Represents the Object which is passed to the [`ref`](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) callback of the GanttView component.
*/
declare interface GanttViewHandle {
/**
* Method to allow the scroll to be set to a specific row index.
*/
scrollIntoView: (options: {
rowIndex?: number;
}) => void;
}
/**
* Represents the required props which every [GanttView]({% slug api_gantt_ganttview %}) must accept.
*/
export declare interface GanttViewProps {
/**
* The name property is used by the Gantt to match which view is selected. Every view has a default name.
*
* @example
* ```jsx
* <GanttView name="dayView" />
* ```
*/
name?: string;
/**
* The title to be displayed in the view selection list in the Toolbar.
* If a function is passed, it will receive a [LocalizationService]({ slug api_intl_localizationservice }) as an argument.
*
* @example
* ```jsx
* <GanttView title="Day View" />
* <GanttView title={(localization) => localization.toLanguageString('custom.title', 'Custom Title')} />
* ```
*/
title?: string | ((localization: LocalizationService) => string);
/**
* The width of a single time slot in pixels. Default is 100px.
*
* @default 100
*
* @example
* ```jsx
* <GanttView slotWidth={120} />
* ```
*/
slotWidth?: number;
/**
* Overrides the `dateRange` calculated by the `Gantt` component.
*
* If a function is passed, an object of type [GanttViewDateRangeArgs]({% slug api_gantt_ganttviewdaterangeargs %}) will be passed.
*
* @example
* ```jsx
* <GanttView dateRange={{ start: new Date(2023, 0, 1), end: new Date(2023, 0, 31) }} />
* <GanttView dateRange={(args) => ({ start: args.tasksStart, end: args.tasksEnd })} />
* ```
*/
dateRange?: DateRange | ((args: GanttViewDateRangeArgs) => DateRange);
/**
* Sets the start of the work day.
*
* @example
* ```jsx
* <GanttView workDayStart="08:00" />
* ```
*/
workDayStart?: string;
/**
* Sets the end of the work day.
*
* @example
* ```jsx
* <GanttView workDayEnd="17:00" />
* ```
*/
workDayEnd?: string;
/**
* The start of the work week.
*
* @example
* ```jsx
* <GanttView workWeekStart={Day.Monday} />
* ```
*/
workWeekStart?: Day;
/**
* The end of the work week.
*
* @example
* ```jsx
* <GanttView workWeekEnd={Day.Friday} />
* ```
*/
workWeekEnd?: Day;
/**
* The component to be rendered in header cells of the timeline part of the Gantt.
*
* @example
* ```jsx
* <GanttView timelineHeaderCell={CustomHeaderCell} />
* ```
*/
timelineHeaderCell?: React.ComponentType<GanttViewTimelineHeaderCellProps>;
/** @hidden */
firstSlotRangeRef?: React.MutableRefObject<DateRange | null>;
}
/**
* The props of the Gantt view timeline header cell component.
*/
export declare interface GanttViewTimelineHeaderCellProps {
/**
* The date range of the cell.
*/
range: DateRange;
/**
* Indicates if the cell is in work time.
*/
isWork: boolean;
/**
* The default cell text value.
*/
text: string;
/**
* The type of the cell slot.
*/
type: GanttSlotType;
/**
* The header cell row index.
*/
rowIndex: number;
/**
* The header cell index.
*/
index: number;
}
/**
* Represents the KendoReact WeekView Component.
*/
export declare const GanttWeekView: React_2.ForwardRefExoticComponent<GanttWeekViewProps & React_2.RefAttributes<GanttViewHandle | null>>;
/**
* @hidden
*/
declare interface GanttWeekViewProps extends GanttViewProps {
}
/**
* Represents the KendoReact YearView Component.
*/
export declare const GanttYearView: React_2.ForwardRefExoticComponent<GanttYearViewProps & React_2.RefAttributes<GanttViewHandle | null>>;
/**
* @hidden
*/
declare interface GanttYearViewProps extends GanttViewProps {
}
export { getSelectedState }
export { getSelectedStateFromKeyDown }
/**
* Creates a new array with the results of calling the provided callback function
* on every element in the provided data tree.
*
* @param {any[]} tree - The data tree.
* @param {string} subItemsField - The field which points to the subitems collection of each data item.
* @param {(value: any) => any} callback - The callback function.
* @returns {any[]} - The new data tree.
*/
export declare const mapTree: (tree: any[], subItemsField: string, callback: (value: any) => any) => any[];
/**
* Orders the specified tree according to the provided sort descriptors.
*
* @param {T[]} data - The data that will be sorted.
* @param {SortDescriptor[]} descriptors - The descriptors by which the data will be sorted.
* @param {string} subItemsField - The field which points to the subitems collection of each data item.
* @returns {T[]} - The sorted data.
*/
export declare const orderBy: typeof orderBy_2;
/**
* @hidden
*/
export declare const removeTask: (options: {
removedDataItem: DataItem;
taskModelFields: TaskModelFields;
dataTree: DataItem[];
}) => DataItem[];
export { setSelectedState }
/**
* Maps field names from your task data to the fields that the Gantt component expects.
*/
export declare interface TaskModelFields {
/**
* Maps to the field that contains the unique ID for each task.
*/
id: string;
/**
* Maps to the field that contains the task start date.
*/
start: string;
/**
* Maps to the field that contains the task end date.
*/
end: string;
/**
* Maps to the field that contains the task title or name.
*/
title: string;
/**
* Maps to the field that contains the task completion percentage.
*/
percentComplete: string;
/**
* Maps to the field that contains the parent task ID for child tasks.
*/
parentId?: string;
/**
* Maps to the field that indicates if a task is a summary of child tasks.
*/
isRollup: string;
/**
* Maps to the field that indicates if a task is expanded to show child tasks.
*/
isExpanded: string;
/**
* Maps to the field that contains child tasks.
*/
children: string;
/**
* Maps to the field that indicates if a task is currently being edited.
*/
isInEdit: string;
/**
* Maps to the field that indicates if a task is selected.
*/
isSelected: string;
}
/**
* @hidden
*/
export declare const updateTask: (options: {
updatedDataItem: DataItem;
taskModelFields: TaskModelFields;
dataTree: DataItem[];
}) => DataItem[];
export { }