Column template in React Treegrid component
27 Jan 202313 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;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;