All Components

GanttDependencyDataSource Overview

The GanttDependencyDataSource extends the DataSource component.

It contains instances of the custom kendo.data.GanttDependency model, which represents the dependency data items of the Gantt.

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

<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-ganttdependencydatasource ref="ganttdependencydatasource1"
                                     transport-read-url="https://demos.telerik.com/kendo-ui/service/GanttDependencies"
                                     transport-read-data-type="jsonp"
                                     transport-update-url="https://demos.telerik.com/kendo-ui/service/GanttDependencies/update"
                                     transport-update-data-type="jsonp"
                                     transport-create-url="https://demos.telerik.com/kendo-ui/service/GanttDependencies/create"
                                     transport-create-data-type="jsonp"
                                     transport-destroy-url="https://demos.telerik.com/kendo-ui/service/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="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 }
        },
        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