Row template in React Treegrid component
27 Jan 202320 minutes to read
The rowTemplate has an option to customise the look and behavior of the treegrid rows. The rowTemplate property accepts either the template string or HTML element ID.
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { textdata } from './datasource';
export default class App extends React.Component {
treegridTemplate(props) {
var src = './' + props.FullName + '.png';
return (<tr>
<td className="border" style={{ paddingLeft: '18px' }}>
<div>{props.EmpID}</div>
</td>
<td className="border" style={{ padding: '10px 0px 0px 20px' }}>
<div style={{ fontSize: '14px' }}>
{props.Name}
<p style={{ fontSize: '9px' }}>{props.Designation}</p>
</div>
</td>
<td className="border">
<div>
<div style={{ position: 'relative', display: 'inline-block' }}>
<img src={src}/>
</div>
<div style={{ display: 'inline-block' }}>
<div style={{ padding: '5px' }}>{props.Address}</div>
<div style={{ padding: '5px' }}>{props.Country}</div>
<div style={{ padding: '5px', fontSize: '12px' }}>{props.Contact}</div>
</div>
</div>
</td>
</tr>);
}
template = this.treegridTemplate;
render() {
return <TreeGridComponent dataSource={textdata} childMapping='Children' rowTemplate={this.template.bind(this)} treeColumnIndex={0} rowHeight='83' height='291'>
<ColumnsDirective>
<ColumnDirective headerText='Employee ID' width='180' field='EmpID'></ColumnDirective>
<ColumnDirective headerText='Employee Name' width='150' field='Name'></ColumnDirective>
<ColumnDirective headerText='Employee Details' width='350' field='Address'></ColumnDirective>
</ColumnsDirective>
</TreeGridComponent>;
}
}import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { textdata } from './datasource';
export default class App extends React.Component<{}, {}>{
public treegridTemplate(props): any {
var src = './' + props.FullName + '.png';
return (<tr>
<td className="border" style={{paddingLeft:'18px'}}>
<div>{props.EmpID}</div>
</td>
<td className="border" style={{padding: '10px 0px 0px 20px'}}>
<div style={{fontSize:'14px'}}>
{props.Name}
<p style={{fontSize:'9px'}}>{props.Designation}</p>
</div>
</td>
<td className="border">
<div>
<div style={{position:'relative' , display:'inline-block'}}>
<img src ={src} />
</div>
<div style={{display:'inline-block'}}>
<div style={{padding:'5px'}}>{props.Address}</div>
<div style={{padding:'5px'}}>{props.Country}</div>
<div style={{padding:'5px' ,fontSize: '12px'}}>{props.Contact}</div>
</div>
</div>
</td>
</tr>);
}
public template: any = this.treegridTemplate;
public render() {
return <TreeGridComponent dataSource={textdata} childMapping = 'Children' rowTemplate={this.template.bind(this)} treeColumnIndex={0} rowHeight = '83' height='291'>
<ColumnsDirective>
<ColumnDirective headerText = 'Employee ID' width = '180' field = 'EmpID'></ColumnDirective>
<ColumnDirective headerText = 'Employee Name' width = '150' field = 'Name'></ColumnDirective>
<ColumnDirective headerText = 'Employee Details' width = '350' field = 'Address'></ColumnDirective>
</ColumnsDirective>
</TreeGridComponent>
}
}The rowTemplate property accepts only the TR element.
Row template with formatting
If the rowTemplate is used, the value cannot be formatted inside the template using the columns.format property. In that case, a function should be defined globally to format the value and invoke it inside the template.
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { textdata } from './datasource';
import { Internationalization } from '@syncfusion/ej2-base';
let instance = new Internationalization();
export default class App extends React.Component {
format = (value) => {
return instance.formatDate(value, { skeleton: 'yMd', type: 'date' });
};
treegridTemplate(props) {
var src = './' + props.FullName + '.png';
return (<tr>
<td className="border" style={{ paddingLeft: '18px' }}>
<div>{props.EmpID}</div>
</td>
<td className="border">
<div>
<div style={{ position: 'relative', display: 'inline-block' }}>
<img src={src}/>
</div>
<div style={{ display: 'inline-block' }}>
<div style={{ padding: '5px' }}>{props.Address}</div>
<div style={{ padding: '5px' }}>{props.Country}</div>
<div style={{ padding: '5px', fontSize: '12px' }}>{props.Contact}</div>
</div>
</div>
</td>
<td className="border" style={{ paddingLeft: '20px' }}>
<div>{this.format(props.DOB)}</div>
</td>
</tr>);
}
template = this.treegridTemplate;
render() {
return <TreeGridComponent dataSource={textdata} childMapping='Children' rowTemplate={this.template.bind(this)} treeColumnIndex={0} rowHeight='83' height='291'>
<ColumnsDirective>
<ColumnDirective headerText='Employee ID' width='180' field='EmpID'></ColumnDirective>
<ColumnDirective headerText='Employee Details' width='350' field='Address'></ColumnDirective>
<ColumnDirective headerText='DOB' width='150' field='DOB'></ColumnDirective>
</ColumnsDirective>
</TreeGridComponent>;
}
}import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { textdata } from './datasource';
import { Internationalization } from '@syncfusion/ej2-base';
let instance: Internationalization = new Internationalization();
interface DateFormat extends Window {
format?: Function;
}
export default class App extends React.Component<{}, {}>{
public format = (value: Date) => {
return instance.formatDate(value, { skeleton: 'yMd', type: 'date' });
}
public treegridTemplate(props): any {
var src = './' + props.FullName + '.png';
return (<tr>
<td className="border" style={{paddingLeft:'18px'}}>
<div>{props.EmpID}</div>
</td>
<td className="border">
<div>
<div style={{position:'relative' , display:'inline-block'}}>
<img src ={src} />
</div>
<div style={{display:'inline-block'}}>
<div style={{padding:'5px'}}>{props.Address}</div>
<div style={{padding:'5px'}}>{props.Country}</div>
<div style={{padding:'5px' ,fontSize: '12px'}}>{props.Contact}</div>
</div>
</div>
</td>
<td className="border" style={{paddingLeft:'20px'}}>
<div>{this.format(props.DOB)}</div>
</td>
</tr>);
}
public template: any = this.treegridTemplate;
public render() {
return <TreeGridComponent dataSource={textdata} childMapping = 'Children' rowTemplate={this.template.bind(this)} treeColumnIndex={0} rowHeight = '83' height='291'>
<ColumnsDirective>
<ColumnDirective headerText = 'Employee ID' width = '180' field = 'EmpID'></ColumnDirective>
<ColumnDirective headerText = 'Employee Details' width = '350' field = 'Address'></ColumnDirective>
<ColumnDirective headerText = 'DOB' width = '150' field = 'DOB'></ColumnDirective>
</ColumnsDirective>
</TreeGridComponent>
}
}Limitations
Row template feature is not compatible with all the features which are available in treegrid and it has limited features support. Here we have listed out the features which are compatible with row template feature.
- Filtering
- Paging
- Sorting
- Scrolling
- Searching
- Rtl
- Context Menu
- State Persistence