Check box columns in EJ2 TypeScript Gantt control
24 Jan 20243 minutes to read
To render boolean values as checkbox in columns, you need to set displayAsCheckBox
property as true.
import { Gantt } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
let gantt: Gantt = new Gantt({
dataSource: GanttData,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
verified: 'verified'
},
splitterSettings: {
columnIndex: 5
},
height: '450px',
columns: [
{ field: 'TaskID', headerText: 'Task ID' },
{ field: 'Progress', headerText: 'Progress' },
{ field: 'TaskName', headerText: 'Task Name' },
{ field: 'StartDate', headerText: 'Start Date' },
{ field: 'verified', headerText: 'Verified', displayAsCheckBox: true, type: 'boolean' },
{ field: 'Duration', headerText: 'Duration' }
]
});
gantt.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Gantt Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Gantt'></div>
</div>
</body>
</html>