@progress/kendo-gantt-react-wrapper/docs/data-binding.md

Kendo UI Gantt wrapper for React

---
title: Data Binding
page_title: Data Binding - Gantt - Kendo UI for React
description: "Bind the Kendo UI Gantt wrapper for React to local data arrays or remote data services."
slug: databinding_gantt
position: 1
---

# Data Binding

The Gantt enables you to bind it to a list of possible values.

To populate the Gantt with data, bind the component to either:
* [Local data arrays](#toc-binding-to-local-data-arrays), or
* [Remote data services](#toc-binding-to-remote-data-services).

## Binding to Local Data Arrays

To provide the Gantt with local data:

1. Define the array in the `data` object of the React application.
1. Refer it during the initialization of the Gantt through the `dataSource` property.

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

     class GanttContainer extends React.Component {

      constructor(props) {
        super(props);

        this.state = {
            data: [{
                    id: 0,
                    orderId: 0,
                    parentId: null,
                    title: "Main Project",
                    summary: true,
                    expanded: true,
                    start: new Date("2014/6/17 9:00"),
                    end: new Date("2014/6/17 15:00")
                },
                {
                    id: 1,
                    orderId: 1,
                    parentId: 0,
                    title: "Task1",
                    percentComplete: 0.47,
                    start: new Date("2014/6/17 09:00"),
                    end: new Date("2014/6/17 12:00")
                },
                {
                    id: 2,
                    orderId: 2,
                    parentId: 0,
                    title: "Task2",
                    percentComplete: 0.5,
                    start: new Date("2014/6/17 09:30"),
                    end: new Date("2014/6/17 12:30")
                }],
            dependency: [{
                predecessorId: 1,
                successorId: 2,
                type: 1
                }]
            }

        this.dataSource = new kendo.data.GanttDataSource({
            data: this.state.data
        }),
        this.dependencyDataSource = new kendo.data.GanttDependencyDataSource({
            data: this.state.dependency
        })
    }

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

    ReactDOM.render(
      <GanttContainer />,
      document.querySelector('my-app')
    );
```
{% endmeta %}

## Binding to Remote Data Services

To provide the Gantt with data by using remote data services:

1. Create a new `ganttdatasource` object and, optionally, a `ganttdependencydatasource` object.
1. Refer the `ganttdatasource` and `dependencydatasource` objects during the initialization of the Gantt through the `dataSource` and `dependencies` properties.

```jsx

    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', sortable: true, width: 150 },
                {
                    field: 'start', title: 'Start Time',
                    format: '{0:MM/dd/yyyy}', width: 100, sortable: true
                },
                {
                    field: 'end', title: 'End Time',
                    format: '{0:MM/dd/yyyy}', width: 100,
                    sortable: true
                }
            ],
            height: 700,
            editable:false,
            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'
                },
                /* 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'
                },
                /* 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')
    );
```

## Suggested Links

* [Kendo UI Data Source Component](http://docs.telerik.com/kendo-ui/framework/datasource/overview)
* [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)