All Components

This website hosts Kendo UI wrappers of Kendo UI for jQuery widgets intended to be used in the React ecosystem.

Go to the native Kendo UI implementations for React

Gantt Overview

The Gantt displays a set of tasks and dependencies for visualizing project planning data.

The component provides a tree-list section for the user to edit, sort, and reorder the tasks in a grid-like manner, and a timeline section, where the tasks and dependencies are visualized under an adjustable time ruler and can be resized, moved, edited, and removed by the user. The Gantt provides options for displaying its timeline in the day, week, or month views.

The Gantt wrapper for React is a client-side wrapper for the Kendo UI Gantt widget.

Basic Usage

The following example demonstrates the Gantt in action.

class GanttContainer extends React.Component {

     constructor(props) {
       super(props);

       this.widgetRef = this.widgetRef.bind(this);

       this.tasksDataSource  = this.toKendoGanttDataSource();

       this.dependencyDataSource = this.toKendoDependencyDataSource();

       this.options = {
           views: [
               'day',
               { type: 'week', selected: true },
               'month'
           ],
           widgetRef: this.widgetRef,
           columns: [
               { field: 'id', title: 'ID', width: 60 },
               { field: 'title', title: 'Title', editable: true, sortable: true, width:150 },
               {
                   field: 'start', title: 'Start Time',
                   format: '{0:MM/dd/yyyy}', width: 100,
                   editable: true, sortable: true
               },
               {
                   field: 'end', title: 'End Time',
                   format: '{0:MM/dd/yyyy}', width: 100,
                   editable: true, sortable: true
               }
           ],
           height: 600,
           showWorkHours: false,
           showWorkDays: false,
           snap: false
       };
   }

   widgetRef(widget) {
       this.widgetInstance = widget;
   }

   render() {
       return (
           <div>
               <Gantt dataSource={this.tasksDataSource} dependencies={this.dependencyDataSource} {...this.options} />
               <br />
           </div>
       );
   }

   toKendoGanttDataSource() {
       return new kendo.data.GanttDataSource({
           transport: {
               read: {
                   url: 'https://demos.telerik.com/kendo-ui/service/GanttTasks',
                   dataType: 'jsonp'
               },
               update: {
                   url: 'https://demos.telerik.com/kendo-ui/service/GanttTasks/Update',
                   dataType: 'jsonp'
               },
               destroy: {
                   url: 'https://demos.telerik.com/kendo-ui/service/GanttTasks/Destroy',
                   dataType: 'jsonp'
               },
               create: {
                   url: 'https://demos.telerik.com/kendo-ui/service/GanttTasks/Create',
                   dataType: 'jsonp'
               },
               /* tslint:disable */
               parameterMap: function(options, operation) {
                   if (operation !== 'read') {
                       return { models: kendo.stringify(options.models || [options]) };
                   }
               }
               /* tslint:enable */
           },
           schema: {
               model: {
                   id: 'id',
                   fields: {
                       id: { from: 'ID', type: 'number' },
                       orderId: { from: 'OrderID', type: 'number', validation: { required: true } },
                       parentId: {
                           from: 'ParentID', type: 'number',
                           defaultValue: null, validation: { required: true }
                       },
                       start: { from: 'Start', type: 'date' },
                       end: { from: 'End', type: 'date' },
                       title: { from: 'Title', defaultValue: '', type: 'string' },
                       percentComplete: { from: 'PercentComplete', type: 'number' },
                       summary: { from: 'Summary', type: 'boolean' },
                       expanded: { from: 'Expanded', type: 'boolean', defaultValue: true }
                   }
               }
           }
       });
   }

   toKendoDependencyDataSource() {
       return new kendo.data.GanttDependencyDataSource({
           transport: {
               read: {
                   url: 'https://demos.telerik.com/kendo-ui/service/GanttDependencies',
                   dataType: 'jsonp'
               },
               update: {
                   url: 'https://demos.telerik.com/kendo-ui/service/GanttDependencies/Update',
                   dataType: 'jsonp'
               },
               destroy: {
                   url: 'https://demos.telerik.com/kendo-ui/service/GanttDependencies/Destroy',
                   dataType: 'jsonp'
               },
               create: {
                   url: 'https://demos.telerik.com/kendo-ui/service/GanttDependencies/Create',
                   dataType: 'jsonp'
               },
               /* tslint:disable */
               parameterMap: function(options, operation) {
                   if (operation !== 'read') {
                       return { models: kendo.stringify(options.models || [options]) };
                   }
               }
               /* tslint:enable */
           },
           schema: {
               model: {
                   id: 'id',
                   fields: {
                       id: { from: 'ID', type: 'number' },
                       predecessorId: { from: 'PredecessorID', type: 'number' },
                       successorId: { from: 'SuccessorID', type: 'number' },
                       type: { from: 'Type', type: 'number' }
                   }
               }
           }
       });
   }
   }

   ReactDOM.render(
     <GanttContainer />,
     document.querySelector('my-app')
   );

Installation

  1. Download and install the package.

    npm install --save @progress/kendo-gantt-react-wrapper
  2. Once installed, import the desired component from the package.

    import { Gantt } from '@progress/kendo-gantt-react-wrapper';
  3. You are required to install one of the Kendo UI themes to style your components.

Dependencies

The Gantt package requires you to install the following peer dependencies in your application:

  • @progress/kendo-ui

Features and Functionalities

The Gantt delivers data binding functionalities.

Events

The following example demonstrates basic Gantt events. You can subscribe to all Gantt events by the handler name.

<Gantt dataBound={(e=> console.log("The data is bound"))} // Other configuration.
/>
In this article