@progress/kendo-gantt-react-wrapper/docs/index.md

Kendo UI Gantt wrapper for React

---
title: Overview
page_title: Gantt Overview - Components - Kendo UI for React
description: "Get an overview of the features the Kendo UI Gantt wrapper for React delivers and use the component in React projects."
slug: overview_gantt
position: 0
---

# 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](https://docs.telerik.com/kendo-ui/api/javascript/ui/gantt) widget.

## Basic Usage

The following example demonstrates the Gantt in action.

{% meta height:660 %}
```jsx-preview

    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')
    );
```
{% endmeta %}

## Installation

1. Download and install the package.

    ```sh
        npm install --save @progress/kendo-gantt-react-wrapper
    ```

2. Once installed, import the desired component from the package.

    ```sh
        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](https://nodejs.org/en/blog/npm/peer-dependencies/) in your application:

* @progress/kendo-ui

## Features and Functionalities

The Gantt delivers [data binding]({% slug databinding_gantt %}) functionalities. 

## Events

The following example demonstrates basic Gantt events. You can subscribe to [all Gantt events](https://docs.telerik.com/kendo-ui/api/javascript/ui/gantt#events) by the handler name.

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

## Suggested Links

* [Kendo UI Gantt for jQuery](https://docs.telerik.com/kendo-ui/controls/scheduling/gantt/overview)
* [API Reference of the Gantt Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/gantt)