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.

Example

View Source

Edit In Stackblitz  

Change Theme:Material theme

Basic Configuration

The KendoReact Gantt provides interface for configuration of the task models fields - GanttTaskModelFields, and interface for the dependency models fields - GanttDependencyModelFields.

Installation

1. Download and install the package. Use Node.js v5.0.0 or later.

   Copy Codenpm 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

2. Once installed, import the package module.

   Copy Code// ES2015 module syntax
   import { Gantt } from '@progress/kendo-react-gantt';

   Copy Code// CommonJS format
   const { Gantt } = require('@progress/kendo-react-gantt');

3. 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.

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-react-intl
• @progress/kendo-react-treelist
• @progress/kendo-react-dateinputs
• @progress/kendo-react-data-tools
• @progress/kendo-react-dropdowns
• @progress/kendo-react-buttons
• @progress/kendo-react-inputs
• @progress/kendo-data-query
• @progress/kendo-drawing
• @progress/kendo-date-math

Functionality and Features

• Sorting
• Filtering
• Task types
• Dependency types
• Row resize
• Flat Data
• Slots customization
• Timezones
• Globalization

Suggested Links

• Getting Started with KendoReact
• KendoReact End User License Agreement
• API Reference of the KendoReact Gantt
• API Reference of the KendoReact GanttProps