All Components

Columns

The Gantt supports options for configuring the behavior of its columns.

To manage the columns of the Gantt, either:

Resizing of columns could be enabled via the :resizable prop of the Gantt.

Using the data Vue Object

The following example demonstrates how to use the data object to specify the columns of the Gantt.

<div id="vueapp" class="vue-app">
    <kendo-gantt id="gantt"
                :height= 500
                :columns="columns"
                :editable-create='false'
                :data-source="localdatasource">
    </kendo-gantt>
</div>
Vue.use(GanttInstaller);

new Vue({
    el: '#vueapp',
    data: {
        columns: [
            { field: "id", title: "ID", width: "40px" },
            { field: "title", title:"Title", editable: true, sortable: true,width: "150px"},
            { field: "start", title:"Start", format:"{0:MM/dd/yyyy}", editable: true, sortable: true, width: "120px" },
            { field: "end", title:"End", format:"{0:MM/dd/yyyy}", editable: true, sortable: true, width: "120px" },
        ],
        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")
            }]
    }
})

Using the kendo-gantt-columns Component

The following example demonstrates how to set the inline initialization of the kendo-gantt-columns component.

<div id="vueapp" style="vue-app">
    <kendo-gantt id="gantt"
                :height= 500
                :data-source="localdatasource">
    <kendo-gantt-column :field="'id'" :title="'ID'" :width="60"></kendo-gantt-column>
    <kendo-gantt-column :field="'title'" :title="'Title'" :width="150"></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(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")
            }]
    }
})
In this article