Search results

Column Template in React TreeGrid component

25 Jan 2023 / 2 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.

Source
Preview
App.jsx
App.tsx
Copied to clipboard
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 './App.css';
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;
Copied to clipboard
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 './App.css';
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;

Using condition template

You can render the template elements based on condition.

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

Source
Preview
App.jsx
App.tsx
Copied to clipboard
import { getObject } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, Inject, Page, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
function App() {
    const treegridTemplate = (props) => {
        if (getObject('approved', props)) {
            return (<div className="template_checkbox">
                     <input type="checkbox" checked={true}/>
                 </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;
Copied to clipboard
import { getObject } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective,  Inject, Page, TreeGridComponent  } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';

function App() {
    const treegridTemplate = (props: object) => {
        if(getObject('approved', props)){
            return (<div className="template_checkbox">
                     <input type="checkbox" checked={true}/>
                 </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;