Check box column in React Gantt component

2 Feb 202315 minutes to read

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

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
        const taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks',
            verified: 'verified'
        };
   let ganttInstance;
   const  splitterSettings = {
        position : '80%'
    };
        return (<div>
        <GanttComponent dataSource={data} taskFields={taskFields} splitterSettings={splitterSettings} height='450px' ref={gantt => ganttInstance = gantt}>
         <ColumnsDirective>
            <ColumnDirective field='TaskID' width='100' ></ColumnDirective>
            <ColumnDirective field='TaskName' headerText='Task Name'></ColumnDirective>
            <ColumnDirective field='StartDate'></ColumnDirective>
            <ColumnDirective field='Duration'></ColumnDirective>
            <ColumnDirective field='verified' headerText= 'Verified' type= 'boolean' displayAsCheckBox= {true}></ColumnDirective>
            <ColumnDirective field='Progress'></ColumnDirective>
        </ColumnsDirective>
        </GanttComponent></div>)
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
        const taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks',
            verified: 'verified'
        };
   let ganttInstance:any;
   const  splitterSettings: any = {
        position : '80%'
    };
        return (<div>
        <GanttComponent dataSource={data} taskFields={taskFields} splitterSettings={splitterSettings} height='450px' ref={gantt => ganttInstance = gantt}>
         <ColumnsDirective>
            <ColumnDirective field='TaskID' width='100' ></ColumnDirective>
            <ColumnDirective field='TaskName' headerText='Task Name'></ColumnDirective>
            <ColumnDirective field='StartDate'></ColumnDirective>
            <ColumnDirective field='Duration'></ColumnDirective>
            <ColumnDirective field='verified' headerText= 'Verified' type= 'boolean' displayAsCheckBox= {true}></ColumnDirective>
            <ColumnDirective field='Progress'></ColumnDirective>
        </ColumnsDirective>
        </GanttComponent></div>)
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Controlling Grid Actions

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

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Resize, Sort, Filter, Edit, Reorder } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

    function App(){
        const taskFields = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        child: 'subtasks'
    };
    const splitterSettings = {
        position : '90%'
    };
    let ganttInstance;
    const editSettings = {
        allowEditing : true
    };
        return (<div>
        <GanttComponent dataSource={data} taskFields={taskFields} splitterSettings={splitterSettings} height='450px' allowSorting={true} allowFiltering={true} allowReordering={true} editSettings={editSettings}
        ref={gantt => ganttInstance = gantt}>
         <ColumnsDirective>
            <ColumnDirective field='TaskID' width='100' ></ColumnDirective>
            <ColumnDirective field='TaskName' headerText='Task Name' allowSorting= {false}></ColumnDirective>
            <ColumnDirective field='StartDate' allowEditing= {false}></ColumnDirective>
            <ColumnDirective field='Duration' allowFiltering= {false}></ColumnDirective>
            <ColumnDirective field='Progress' allowReordering= {false}></ColumnDirective>
        </ColumnsDirective>
        <Inject services={[Sort, Filter, Reorder, Edit]}/>
        </GanttComponent></div>)
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Resize, Sort, Filter, Edit, Reorder } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

    function App(){
        const taskFields: any = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        child: 'subtasks'
    };
    const splitterSettings: any = {
        position : '90%'
    };
    let ganttInstance:any;
    const editSettings: any = {
        allowEditing : true
    };
        return (<div>
        <GanttComponent dataSource={data} taskFields={taskFields} splitterSettings={splitterSettings} height='450px' allowSorting={true} allowFiltering={true} allowReordering={true} editSettings={editSettings}
        ref={gantt => ganttInstance = gantt}>
         <ColumnsDirective>
            <ColumnDirective field='TaskID' width='100' ></ColumnDirective>
            <ColumnDirective field='TaskName' headerText='Task Name' allowSorting= {false}></ColumnDirective>
            <ColumnDirective field='StartDate' allowEditing= {false}></ColumnDirective>
            <ColumnDirective field='Duration' allowFiltering= {false}></ColumnDirective>
            <ColumnDirective field='Progress' allowReordering= {false}></ColumnDirective>
        </ColumnsDirective>
        <Inject services={[Sort, Filter, Reorder, Edit]}/>
        </GanttComponent></div>)
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

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.