Search results

Column Template in React Gantt component

02 Dec 2022 / 2 minutes to read

A column template is used to customize the column’s look. The following code example explains how to define the custom template in Gantt using the template property.

You can check this video to learn about how to use templates for column(based on conditions) and headers in Gantt.

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
let ProjectResources = [
    { resourceId: 1, resourceName: 'Martin Tamer' },
    { resourceId: 2, resourceName: 'Rose Fuller' },
    { resourceId: 3, resourceName: 'Margaret Buchanan' },
    { resourceId: 4, resourceName: 'Fuller King' },
    { resourceId: 5, resourceName: 'Davolio Fuller' },
    { resourceId: 6, resourceName: 'Van Jack' },
    { resourceId: 7, resourceName: 'Fuller Buchanan' },
    { resourceId: 8, resourceName: 'Jack Davolio' },
    { resourceId: 9, resourceName: 'Tamer Vinet' },
    { resourceId: 10, resourceName: 'Vinet Fuller' },
    { resourceId: 11, resourceName: 'Bergs Anton' },
    { resourceId: 12, resourceName: 'Construction Supervisor' }
];
let data = [
    {
        TaskID: 1,
        TaskName: 'Project initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, resources: [1] },
            { TaskID: 3, TaskName: 'Perform soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, resources: [2] },
            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, resources: [3] },
        ]
    },
    {
        TaskID: 5,
        TaskName: 'Project estimation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50, resources: [4] },
            { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, resources: [3], Progress: 50 },
            { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50
            }
        ]
    }
];
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks',
            resourceInfo: 'resources'
        };
        this.splitterSettings = {
            columnIndex: 7
        };
        this.resourceFields = {
            id: 'resourceId',
            name: 'resourceName',
        };
        this.template = this.ganttTemplate;
    }
    ganttTemplate(props) {
        var src = props.TaskID + '.png';
        return (<div className='image'>
              <img src={src} style={{ height: '42px' }}/>
          </div>);
    }
    ;
    render() {
        return <GanttComponent dataSource={data} rowHeight={60} taskFields={this.taskFields} splitterSettings={this.splitterSettings} resourceFields={this.resourceFields} resources={ProjectResources} height='450px'>
              <ColumnsDirective>
                  <ColumnDirective field='TaskID'></ColumnDirective>
                  <ColumnDirective field='resources' headerText='Resources' width='250' template={this.template} textAlign='Center'></ColumnDirective>
                  <ColumnDirective field='TaskName'></ColumnDirective>
                  <ColumnDirective field='StartDate'></ColumnDirective>
                  <ColumnDirective field='Duration'></ColumnDirective>
                  <ColumnDirective field='Progress'></ColumnDirective>
              </ColumnsDirective>
          </GanttComponent>;
    }
}
;
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
let ProjectResources: Object[]  = [
  { resourceId: 1, resourceName: 'Martin Tamer' },
  { resourceId: 2, resourceName: 'Rose Fuller' },
  { resourceId: 3, resourceName: 'Margaret Buchanan' },
  { resourceId: 4, resourceName: 'Fuller King' },
  { resourceId: 5, resourceName: 'Davolio Fuller' },
  { resourceId: 6, resourceName: 'Van Jack' },
  { resourceId: 7, resourceName: 'Fuller Buchanan' },
  { resourceId: 8, resourceName: 'Jack Davolio' },
  { resourceId: 9, resourceName: 'Tamer Vinet' },
  { resourceId: 10, resourceName: 'Vinet Fuller' },
  { resourceId: 11, resourceName: 'Bergs Anton' },
  { resourceId: 12, resourceName: 'Construction Supervisor' }
];

let data: Object[]  = [
  {
      TaskID: 1,
      TaskName: 'Project initiation',
      StartDate: new Date('04/02/2019'),
      EndDate: new Date('04/21/2019'),
      subtasks: [
          {TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('04/02/2019'), Duration: 4,Progress: 50, resources: [1]},
          {TaskID: 3, TaskName: 'Perform soil test', StartDate: new Date('04/02/2019'), Duration: 4,Progress: 50, resources: [2]},
          {TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 ,resources: [3]},
      ]
  },
  {
      TaskID: 5,
      TaskName: 'Project estimation',
      StartDate: new Date('04/02/2019'),
      EndDate: new Date('04/21/2019'),
      subtasks: [
          {TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'),Duration: 3, Progress: 50, resources: [4]},
          {TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'),Duration: 3, resources: [3],Progress: 50},
          {TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'),Duration: 3,Progress: 50
          }
      ]
  }];

  import * as React from 'react';
  import * as ReactDOM from 'react-dom';
  import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
  
  class App extends React.Component<{}, {}>{
      public taskFields: any = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      child: 'subtasks',
      resourceInfo: 'resources'
    };
    public splitterSettings: any = {
        columnIndex: 7
    };
    public resourceFields: any = {
        id: 'resourceId',
        name: 'resourceName',
    };
    public ganttTemplate(props:any) {
      var src = props.TaskID + '.png';
          return (<div className='image' >
              <img src={src} style={{height:'42px'}}/>
          </div>);
    };
      public template: any = this.ganttTemplate;
      render() {
          return <GanttComponent dataSource={data} rowHeight={60} taskFields={this.taskFields}
          splitterSettings={this.splitterSettings} resourceFields={this.resourceFields} resources={ProjectResources} height = '450px'>
              <ColumnsDirective>
                  <ColumnDirective field='TaskID'></ColumnDirective>
                  <ColumnDirective field='resources' headerText='Resources' width='250' template={this.template} textAlign='Center'></ColumnDirective>
                  <ColumnDirective field='TaskName'></ColumnDirective>
                  <ColumnDirective field='StartDate'></ColumnDirective>
                  <ColumnDirective field='Duration'></ColumnDirective>
                  <ColumnDirective field='Progress'></ColumnDirective>
              </ColumnsDirective>
          </GanttComponent>
      }
  };
  ReactDOM.render(<App />, document.getElementById('root'));