Check box columns in Vue Gantt component
5 Jan 20243 minutes to read
To render boolean values as checkbox in columns, you need to set displayAsCheckBox
property as true.
<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>