Column template in React Treegrid component

15 Oct 202413 minutes to read

The column template has options to display custom element instead of a field value in the column.

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

import { getObject } from '@syncfusion/ej2-grids';
import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import { ColumnDirective, ColumnsDirective, Inject, Page, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { getSparkData, textdata } from './datasource';
function App() {
    const load = (args) => {
        let theme = location.hash.split('/')[1];
        theme = theme ? theme : 'Material';
        args.sparkline.theme = (theme.charAt(0).toUpperCase() + theme.slice(1));
    };
    const taxColTemplate = (props) => {
        return (<SparklineComponent id={"spkline" + getObject('EmployeeID', props)} fill='#3C78EF' height='50px' load={load} lineWidth={2} valueType='Numeric' width='150px' dataSource={getSparkData('line', +getObject('EmployeeID', props))}/>);
    };
    const dayColTemplate = (props) => {
        return (<SparklineComponent id={"spkarea" + getObject('EmployeeID', props)} fill='#3C78EF' height='50px' load={load} negativePointColor='#f7a816' type='Column' valueType='Numeric' width='150px' dataSource={getSparkData('column', +getObject('EmployeeID', props))}/>);
    };
    const yearColTemplate = (props) => {
        return (<SparklineComponent id={"spkwl" + getObject('EmployeeID', props)} fill='#3C78EF' height='50px' load={load} negativePointColor='#f7a816' type='WinLoss' tiePointColor='darkgray' valueType='Numeric' width='150px' dataSource={getSparkData('column', +getObject('EmployeeID', props))}/>);
    };
    return <TreeGridComponent dataSource={textdata} treeColumnIndex={0} childMapping='Children' allowPaging={true} height='410'>
      <ColumnsDirective>
          <ColumnDirective field='EmpID' headerText='Employee ID' width='95'/>
          <ColumnDirective field='Name' headerText='Name' width='90'/>
          <ColumnDirective field='DOB' headerText='DOB' width='90' format='yMd' textAlign='Right'/>
          <ColumnDirective headerText='Tax per annum' width='90' template={taxColTemplate} textAlign='Center'/>
          <ColumnDirective headerText='One Day Index' template={dayColTemplate} textAlign='Center' width='100'/>
          <ColumnDirective headerText='Year GR' template={yearColTemplate} textAlign='Center' width='100'/>
      </ColumnsDirective>
      <Inject services={[Page]}/>
      </TreeGridComponent>;
}
;
export default App;
import { getObject } from '@syncfusion/ej2-grids';
import { ISparklineLoadedEventArgs, SparklineComponent, SparklineTheme } from '@syncfusion/ej2-react-charts';
import { ColumnDirective, ColumnsDirective, Inject, Page, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { getSparkData, textdata } from './datasource';

function App() {

  const load = (args: ISparklineLoadedEventArgs): void => {
    let theme: string = location.hash.split('/')[1];
    theme = theme ? theme : 'Material';
    args.sparkline.theme = (theme.charAt(0).toUpperCase() + theme.slice(1)) as SparklineTheme;
  }
  
  const taxColTemplate = (props: object) => {
    return (<SparklineComponent id={"spkline" + getObject('EmployeeID', props)}
        fill='#3C78EF'
        height='50px'
        load={load}
        lineWidth= {2}
        valueType='Numeric'
        width='150px'
        dataSource={getSparkData('line', +getObject('EmployeeID', props))}/>);
  }
  const dayColTemplate = (props: object) => {
    return (<SparklineComponent id={"spkarea" + getObject('EmployeeID', props)}
    fill='#3C78EF'
    height='50px'
    load={load}
    negativePointColor='#f7a816'
    type='Column'
    valueType='Numeric'
    width='150px'
    dataSource={getSparkData('column', +getObject('EmployeeID', props))}/>);
  }
  const yearColTemplate = (props: object) => {
    return (<SparklineComponent id={"spkwl" + getObject('EmployeeID', props)}
    fill='#3C78EF'
    height='50px'
    load={load}
    negativePointColor='#f7a816'
    type='WinLoss'
    tiePointColor= 'darkgray'
    valueType='Numeric'
    width='150px'
    dataSource={getSparkData('column', +getObject('EmployeeID', props))}/>);
  }
  return <TreeGridComponent dataSource={textdata} treeColumnIndex={0} childMapping='Children'
          allowPaging={true} height='410'>
      <ColumnsDirective>
          <ColumnDirective field='EmpID' headerText='Employee ID' width='95'/>
          <ColumnDirective field='Name' headerText='Name' width='90'/>
          <ColumnDirective field='DOB' headerText='DOB' width='90' format='yMd' textAlign='Right'/>
          <ColumnDirective headerText='Tax per annum' width='90' template={taxColTemplate} textAlign='Center'/>
          <ColumnDirective headerText='One Day Index' template={dayColTemplate} textAlign='Center' width='100'/>
          <ColumnDirective headerText='Year GR' template={yearColTemplate} textAlign='Center' width='100'/>
      </ColumnsDirective>
      <Inject services={[Page]} />
      </TreeGridComponent>
};
export default App;

The queryCellInfo event is not supported for template columns. Instead, use template function as described in the documentation (https://ej2.syncfusion.com/react/documentation/treegrid/columns/column-template#using-condition-template).

Using condition template

You can render the template elements based on condition.

In the following code, checkbox is rendered based on Approved field value.

import { getObject } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, Inject, Page, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
    const treegridTemplate = (props) => {
        if (getObject('approved', props)) {
            return (<div className="template_checkbox">
                     <input type="checkbox" defaultChecked/>
                 </div>);
        }
        else {
            return (<div className="template_checkbox">
                <input type="checkbox"/>
            </div>);
        }
    };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='315'>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
          <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
          <ColumnDirective headerText='approved' width='120' template={treegridTemplate} textAlign='Center'/>
          <ColumnDirective field='progress' headerText='Progress' width='80' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[Page]}/>
    </TreeGridComponent>;
}
;
export default App;
import { getObject } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective,  Inject, Page, TreeGridComponent  } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

function App() {
    const treegridTemplate = (props: object) => {
        if(getObject('approved', props)){
            return (<div className="template_checkbox">
                     <input type="checkbox" defaultChecked/>
                 </div>);
        } else {
            return (<div className="template_checkbox">
                <input type="checkbox"/>
            </div>);
        }
    }
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='315'>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
          <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
          <ColumnDirective headerText='approved' width='120' template={treegridTemplate} textAlign='Center' />
          <ColumnDirective field='progress' headerText='Progress' width='80' textAlign='Right' />
        </ColumnsDirective>
        <Inject services={[Page]}/>
    </TreeGridComponent>
};
export default App;