All Components

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:

Locally defined values are best for small, fixed sets of data. For larger datasets, use remote data services.

Local Data Arrays

To provide the Gantt with local data:

  1. Define the array in the data object of the Vue application.
  2. Refer it during the initialization of the Gantt through the :data-source property.
<div id="vueapp" class="vue-app">
    <kendo-gantt id="gantt"
                :height= 500
                :data-source="localdatasource">
    </kendo-gantt>
</div>
Vue.use(GanttInstaller);

new Vue({
    el: '#vueapp',
        data: {
            localdatasource: [{
                    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")
                }]
      }
})

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.
  2. Refer the ganttdatasource and ganttdependencydatasource objects during the initialization of the Gantt through the :data-source-ref and dependencies-data-source-ref properties.

The ganttdatasource object contains the configuration for the necessary data operation actions such as Read, Update, Create, or Destroy. To refer the remote data services, use the Transport object properties of the ganttdatasource—for example, :transport-read-url, :transport-update-url, and so on.

The ganttdependencydatasource object is responsible for the relations between the tasks that are visualized in the widget. The object contains the configurations for the services references for the read, update, create, destroy etc operations for the dependencies.

<div id="vueapp" class="vue-app">
    <kendo-ganttdatasource ref="ganttdatasource1"
                           :transport-read-url="serviceRoot + '/GanttTasks'"
                           transport-read-data-type="jsonp"
                           :transport-update-url="serviceRoot + '/GanttTasks/update'"
                           transport-update-data-type="jsonp"
                           :transport-create-url="serviceRoot + '/GanttTasks/create'"
                           transport-create-data-type="jsonp"
                           :transport-destroy-url="serviceRoot + '/GanttTasks/destroy'"
                           transport-destroy-data-type="jsonp"
                           :transport-parameter-map="parameterMap"
                           schema-model-id="id"
                           :schema-model-fields="fields">
    </kendo-ganttdatasource>

    <kendo-ganttdependencydatasource ref="ganttdependencydatasource1"
                                     :transport-read-url="serviceRoot + '/GanttDependencies'"
                                     transport-read-data-type="jsonp"
                                     :transport-update-url="serviceRoot + '/GanttDependencies/update'"
                                     transport-update-data-type="jsonp"
                                     :transport-create-url="serviceRoot + '/GanttDependencies/create'"
                                     transport-create-data-type="jsonp"
                                     :transport-destroy-url="serviceRoot + '/GanttDependencies/destroy'"
                                     transport-destroy-data-type="jsonp"
                                     :transport-parameter-map="parameterMap"
                                     schema-model-id="id"
                                     :schema-model-fields="dependencyfields">
    </kendo-ganttdependencydatasource>

    <kendo-gantt id="gantt"
                 data-source-ref="ganttdatasource1"
                 dependencies-data-source-ref="ganttdependencydatasource1"
                 :show-work-hours="false"
                 :show-work-days="false"
                 :snap="false"
                 :height="500">
        <kendo-gantt-view :type="'day'"></kendo-gantt-view>
        <kendo-gantt-view :type="'week'" :selected="true"></kendo-gantt-view>
        <kendo-gantt-view :type="'month'"></kendo-gantt-view>
        <kendo-gantt-column :field="'id'" :title="'ID'" :width="60"></kendo-gantt-column>
        <kendo-gantt-column :field="'title'" :title="'Title'" :editable="true" :sortable="true"></kendo-gantt-column>
        <kendo-gantt-column :field="'start'" :title="'Start Time'" :format="'{0:MM/dd/yyyy}'" :width="100" :editable="true" :sortable="true"></kendo-gantt-column>
        <kendo-gantt-column :field="'end'" :title="'End Time'" :format="'{0:MM/dd/yyyy}'" :width="100" :editable="true" :sortable="true"></kendo-gantt-column>
    </kendo-gantt>
</div>
Vue.use(DataSourceInstaller);
Vue.use(GanttInstaller);

new Vue({
    el: '#vueapp',
    data: {
        serviceRoot: "https://demos.telerik.com/kendo-ui/service",
        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 }
        },
        dependencyfields: {
            id: { from: 'ID', type: 'number' },
            predecessorId: { from: 'PredecessorID', type: 'number' },
            successorId: { from: 'SuccessorID', type: 'number' },
            type: { from: 'Type', type: 'number' }
        }
    },
    methods: {
        parameterMap: function(options, operation) {
           if (operation !== 'read') {
               return {models: kendo.stringify(options.models || [options])}
           }
        }
    }
})
In this article