Search results

Column Spanning in React Gantt component

08 Dec 2022 / 2 minutes to read

The gantt has option to span the adjacent cells. You need to define the colSpan attribute to span cells in the QueryCellInfo event. In the following demo, Work 1 cells have been spanned.

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.queryCellInfoEvent = (args) => {
            switch (args.data.TaskID) {
                case 1:
                    if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
                        args.colSpan = 2;
                    }
                    break;
                case 2:
                    if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
                        args.colSpan = 2;
                    }
                    break;
                case 3:
                    if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
                        args.colSpan = 2;
                    }
                    break;
                case 4:
                    if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
                        args.colSpan = 2;
                    }
                    break;
                case 5:
                    if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
                        args.colSpan = 2;
                    }
                    break;
                case 7:
                    if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
                        args.colSpan = 2;
                    }
                    break;
            }
        };
        this.taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks',
            work1: 'work1',
            work2: 'work2',
        };
        this.splitterSettings = {
            position: '75%'
        };
    }
    render() {
        return (<div>
        <GanttComponent dataSource={data} taskFields={this.taskFields} queryCellInfo={this.queryCellInfoEvent} splitterSettings={this.splitterSettings} gridLines='Both' height='450px' ref={gantt => this.ganttInstance = gantt}>
         <ColumnsDirective>
            <ColumnDirective field='TaskID' width='100'></ColumnDirective>
            <ColumnDirective field='TaskName' headerText='Task Name'></ColumnDirective>
            <ColumnDirective field='work1' headerText='Work 1'></ColumnDirective>
            <ColumnDirective field='work2' headerText='Work 2'></ColumnDirective>
            <ColumnDirective field='StartDate'></ColumnDirective>
            <ColumnDirective field='Duration'></ColumnDirective>
            <ColumnDirective field='Progress'></ColumnDirective>
        </ColumnsDirective>
        </GanttComponent></div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('root'));
Copied to clipboard
<!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/20.3.56/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>
</head>

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

</html>
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import { QueryCellInfoEventArgs } from '@syncfusion/ej2-react-gantt';

class App extends React.Component<{}, {}>{
    public queryCellInfoEvent = (args: QueryCellInfoEventArgs) => {
        switch(args.data.TaskID) {
            case 1:
            if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
                args.colSpan= 2;
            }
            break;
            case 2:
            if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
                args.colSpan= 2;
            }
            break;
            case 3:
            if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
                args.colSpan = 2;
            }
            break;
            case 4:
            if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
                args.colSpan = 2;
            }
            break;
            case 5  :
            if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
                args.colSpan = 2;
            }
            break;
            case 7:
            if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
                args.colSpan = 2;
            }
            break;
        }
    }
    public taskFields: any = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        child: 'subtasks',
        work1: 'work1',
        work2: 'work2',
    };
    public splitterSettings: any = {
        position : '75%'
    };
    render() {
        return (<div>
        <GanttComponent dataSource={data} taskFields={this.taskFields} queryCellInfo={this.queryCellInfoEvent} splitterSettings={this.splitterSettings} gridLines='Both' height='450px' ref={gantt => this.ganttInstance = gantt}>
         <ColumnsDirective>
            <ColumnDirective field='TaskID' width='100' ></ColumnDirective>
            <ColumnDirective field='TaskName' headerText='Task Name'></ColumnDirective>
            <ColumnDirective field='work1' headerText='Work 1'></ColumnDirective>
            <ColumnDirective field='work2' headerText='Work 2'></ColumnDirective>
            <ColumnDirective field='StartDate'></ColumnDirective>
            <ColumnDirective field='Duration'></ColumnDirective>
            <ColumnDirective field='Progress'></ColumnDirective>
        </ColumnsDirective>
        </GanttComponent></div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('root'));