All Components

GanttDataSource Overview

The GanttDataSource extends the DataSource component.

It contains instances of the custom kendo.data.GanttTask model, which represents the task data items of the Gantt.

The following example demonstrates how to bind the Gantt to the GanttDataSource.

<div id="vueapp" class="vue-app">
    <kendo-ganttdatasource ref="ganttdatasource1"
                           transport-read-url="https://demos.telerik.com/kendo-ui/service/GanttTasks"
                           transport-read-data-type="jsonp"
                           transport-update-url="https://demos.telerik.com/kendo-ui/service/GanttTasks/update"
                           transport-update-data-type="jsonp"
                           transport-create-url="https://demos.telerik.com/kendo-ui/service/GanttTasks/create"
                           transport-create-data-type="jsonp"
                           transport-destroy-url="https://demos.telerik.com/kendo-ui/service/GanttTasks/destroy"
                           transport-destroy-data-type="jsonp"
                           :transport-parameter-map="parameterMap"
                           schema-model-id="id"
                           :schema-model-fields="fields">
    </kendo-ganttdatasource>

    <kendo-gantt id="gantt"
                 data-source-ref="ganttdatasource1"
                 :show-work-hours="false"
                 :show-work-days="false"
                 :snap="false"
                 :height="600">
        <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: {
        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 }
        }
    },
    methods: {
        parameterMap: function (options, operation) {
            if (operation !== 'read') {
                return {models: kendo.stringify(options.models || [options])}
            }
        }
    }
})
In this article