Row template in React TreeGrid

8 Oct 202520 minutes to read

The rowTemplate option customizes the look and behavior of TreeGrid rows. The rowTemplate property accepts either a template string or an HTML element ID.

app.jsx
app.tsx
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 must return a single tr element.

Row template with formatting

When using rowTemplate, values cannot be formatted inside the template using columns.format property. In such cases, define a global formatting function and invoke it within the template.

app.jsx
app.tsx
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 the TreeGrid, and it has limited features support. The features that are incompatible with the row template feature are listed below.

Filtering
Paging
Sorting
Scrolling
Searching
RTL
Context menu
State persistence

Search docs

Ask HelpBot

Search docs

Ask HelpBot

Row template in React TreeGrid

Row template with formatting

Limitations