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:

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.

    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
  2. 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');
  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

In this article

Not finding the help you need?