All Components

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 Vue is a client-side wrapper for the Kendo UI Gantt widget.

Basic Usage

The following example demonstrates how to initialize the Gantt.

<div id="vueapp" class="vue-app">
    <kendo-gantt id="gantt"
                :height="'500'"
                :editable-create="'false'"
                :data-source="datasource"
                :dependencies="dependencydatasource">
        <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>
</div>
Vue.use(GanttInstaller);
new Vue({
    el: '#vueapp',
    data: {
        datasource: [{
            id: 0,
            orderId: 0,
            parentId: null,
            title: "Main Project",
            summary: true,
            expanded: true,
            percentComplete: 0.3,
            start: new Date("2014/6/17 9:00"),
            end: new Date("2014/7/01 11:00")
        },
        {
            id: 1,
            orderId: 1,
            parentId: 0,
            title: "Task1",
            percentComplete: 0.47,
            start: new Date("2014/6/17 11:00"),
            end: new Date("2014/6/20 14:00")
        },
            {
            id: 2,
            orderId: 2,
            parentId: 0,
            title: "Task2",
            percentComplete: 0.5,
            start: new Date("2014/6/19 11:00"),
            end: new Date("2014/6/22 14:00")
        },
        {
            id: 3,
            orderId: 3,
            parentId: null,
            title: "Second Project",
            summary: true,
            expanded: true,
            percentComplete: 0.2,
            start: new Date("2014/6/19 11:00"),
            end: new Date("2014/6/22 14:00")
        },
        {
            id: 4,
            orderId: 4,
            parentId: 3,
            title: "Task1",
            percentComplete: 0.5,
            start: new Date("2014/6/19 11:00"),
            end: new Date("2014/6/22 14:00")
        }],
        dependencydatasource: [{
            predecessorId: 1,
            successorId: 2,
            type: 1
        }]
      }

    })

Installation

To initialize the Gantt, either:

Initializing with Webpack

  1. Install Kendo UI and add a theme.

    npm install --save @progress/kendo-ui
    npm install --save @progress/kendo-theme-default
  2. Install the Kendo UI Gantt package for Vue.

    npm install --save @progress/kendo-gantt-vue-wrapper
  3. Import the Kendo UI packages to the App component. If you use the Kendo UI components more than once in your application, add all Kendo UI-related files to the main.js file. If you use the Kendo UI components once in your application, add the Kendo UI-related files the component where they will be referred.

    import '@progress/kendo-ui'
    import '@progress/kendo-theme-default/dist/all.css'
    
    import { Gantt, GanttInstaller} from '@progress/kendo-gantt-vue-wrapper'
    
    Vue.use(GanttInstaller)
    
    new Vue({
       el: '#app',
       components: {
           Gantt
       }
    })

Functionality and Features

Events

The following example demonstrates basic Gantt events. You can subscribe to all Gantt events by the handler name.

<div id="vueapp" style="vue-app">
    <kendo-gantt id="gantt"
                :height= 500
                v-on:databinding="onDataBinding"
                v-on:databound="onDataBound"
                :editable-create='false'
                :data-source="localdatasource">
    </kendo-gantt>
</div>
Vue.use(GanttInstaller);

new Vue({
    el: '#vueapp',
    methods: {
        onDataBinding: function (ev) {
            console.log("Gantt is about to be bound!");
        },
        onDataBound: function (ev) {
            console.log("Gantt is now bound!");
        }
    },
    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")
            }]
    }
})
In this article