Getting Started with KendoReact Gantt
The KendoReact Gantt component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-gantt package.
Overview
The Gantt displays a set of tasks and dependencies which are used to visualize project-planning data.
It provides a tree-list section where the user can sort and filter the tasks in a grid-like fashion, and a time-line section where the tasks and dependencies are visualized under an adjustable time ruler. The Gantt also supports the display of the time-line section in the day, week and month views.
The following example demonstrates the KendoReact Gantt component in action.
Basic Configuration
The KendoReact Gantt provides interface for configuration of the task models fields - GanttTaskModelFields
, and interface for the dependency models fields - GanttDependencyModelFields
.
Installation
Download and install the package. Use Node.js v5.0.0 or later.
npm install --save @progress/kendo-react-gantt @progress/kendo-date-math @progress/kendo-drawing @progress/kendo-data-query @progress/kendo-react-intl @progress/kendo-react-treelist @progress/kendo-react-data-tools @progress/kendo-react-dateinputs @progress/kendo-react-inputs @progress/kendo-react-dropdowns @progress/kendo-react-buttons @progress/kendo-licensing
Once installed, import the package module.
// ES2015 module syntax import { Gantt } from '@progress/kendo-react-gantt';
// CommonJS format const { Gantt } = require('@progress/kendo-react-gantt');
You are required to install one of the Kendo UI themes to style your components. For more information on how to add the styles, refer to the article on getting started.
Follow the instructions on the KendoReact My License page to activate your license. You can skip this step if your application already contains a KendoReact license file.
Dependencies
The Gantt package requires the following peer dependencies that have to be installed by your application:
- react 16.8.2*
- react-dom
- @progress/kendo-data-query
- @progress/kendo-date-math
- @progress/kendo-drawing
- @progress/kendo-licensing
- @progress/kendo-react-buttons
- @progress/kendo-react-data-tools
- @progress/kendo-react-dateinputs
- @progress/kendo-react-dropdowns
- @progress/kendo-react-inputs
- @progress/kendo-react-intl
- @progress/kendo-react-treelist
Functionality and Features
- Sorting
- Filtering
- Task types
- Dependency types
- Row resize
- Flat Data
- Slots customization
- Timezones
- Globalization