Check box columns in Vue Gantt component

17 Mar 20237 minutes to read

To render boolean values as checkbox in columns, you need to set displayAsCheckBox property as true.

app.vue

<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :columns = "columns" :splitterSettings = "splitterSettings"></ejs-gantt>
    </div>
</template>
<script>
import Vue from "vue";
import { GanttPlugin } from "@syncfusion/ej2-vue-gantt";
import { checkBoxData } from './data-source.js';
Vue.use(GanttPlugin);
export default {
  data: function() {
      return{
            data: checkBoxData,
            taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks',
            },
            height:'450px',
            splitterSettings:{
            position: '80%'
          },
        columns: [
            { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
            { field: 'TaskName', headerText: 'Task Name', width: '150' },
            { field: 'StartDate', headerText: 'Start Date', width: '150' },
            { field: 'Duration', headerText: 'Duration', width: '150' },
            { field: 'verified', headerText: 'Verified', displayAsCheckBox: true, type: 'boolean' },
            { field: 'Progress', headerText: 'Progress', width: '150' },
        ]
      };
  }
};
</script>

Controlling Grid Actions

You can enable or disable gantt action for a particular column by setting the allowFiltering, allowSorting, allowReordering,and allowEditing properties.

app.vue

<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :columns = "columns" :allowFiltering = 'true' :splitterSettings = "splitterSettings" :allowSorting = 'true' :allowReordering = 'true' :editSettings = "editSettings"></ejs-gantt>
    </div>
</template>
<script>
import Vue from "vue";
import { GanttPlugin, Sort, Filter, Reorder, Edit } from "@syncfusion/ej2-vue-gantt";
import { editingData  } from './data-source.js';
Vue.use(GanttPlugin);
export default {
  data: function() {
      return{
         data: editingData,
         taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks',
            },
            height:'450px',
            splitterSettings:{
            position: '80%'
          },
        editSettings: {
            allowEditing: true
        },
        columns: [
            { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
            { field: 'TaskName', headerText: 'Task Name', width: '150', allowSorting: false },
            { field: 'StartDate', headerText: 'Start Date', width: '150', allowEditing: false },
            { field: 'Duration', headerText: 'Duration', width: '150', allowFiltering: false },
            { field: 'Progress', headerText: 'Progress', width: '150', allowReordering: false },
        ],
      };
  },
    provide: {
      gantt: [ Sort, Filter, Reorder, Edit ]
  }
};
</script>

Column type

Column type can be specified using the columns.type property. It specifies the type of data the column binds.

If the format is defined for a column, the column uses type to select the appropriate format option number or date.

Gantt column supports the following types:

• string
• number
• boolean
• date
• datetime

If the type is not defined, it will be determined from the first record of the dataSource.
In case if the first record of the dataSource is null/blank value for a column then it is necessary to define the type for that column.