Search results

Template in React TreeView component

21 Oct 2021 / 2 minutes to read

The TreeView component allows you to customize the look of TreeView nodes by using the nodeTemplate property. This property accepts either template string or HTML element ID.

In the following sample, employee information such as employee photo, name, and designation have been included using the nodeTemplate property.

The template expression should be provided inside the ${...} interpolation syntax.

Source
Preview
App.tsx
index.tsx
style.css
App.jsx
index.jsx
Copied to clipboard
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {enableRipple} from '@syncfusion/ej2-base';
enableRipple(true);
import {TreeViewComponent} from '@syncfusion/ej2-react-navigations';

export default class App extends React.Component<{}, {}> {

public employees: { [key: string]: Object }[] = [
   { id: 1, name: 'Steven Buchanan', eimg: '10', job: 'CEO', hasChild: true, expanded: true },
        { id: 2, pid: 1, name: 'Laura Callahan', eimg: '2', job: 'Product Manager', hasChild: true },
        { id: 3, pid: 2, name: 'Andrew Fuller', eimg: '7', job: 'Team Lead', hasChild: true },
        { id: 4, pid: 3, name: 'Anne Dodsworth', eimg: '1', job: 'Developer' },
        { id: 5, pid: 1, name: 'Nancy Davolio', eimg: '4', job: 'Product Manager', hasChild: true },
        { id: 6, pid: 5, name: 'Michael Suyama', eimg: '9', job: 'Team Lead', hasChild: true },
        { id: 7, pid: 6, name: 'Robert King', eimg: '8', job: 'Developer ' },
        { id: 8, pid: 7, name: 'Margaret Peacock', eimg: '6', job: 'Developer' },
        { id: 9, pid: 1, name: 'Janet Leverling', eimg: '3', job: 'HR' },
];
private fields: Object = { dataSource: this.employees,  id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' };
private cssClass:string = "custom";
private nodeTemplate(data:any): JSX.Element {
    return (
      <div>
        <img className='eimage' src={`./../template-cs1/${data.eimg}.png`} alt='${data.eimg}'/>
        <div className='ename'>{data.name}</div>
        <div className='ejob'>{data.job}</div>
      </div>
        )
    }
  render() {
    return (
        // specifies the tag for render the TreeView component
        <TreeViewComponent fields={this.fields} cssClass={this.cssClass} nodeTemplate={this.nodeTemplate}/>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('sample'));
Copied to clipboard
#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

#treeparent {
    display: block;
    max-width: 350px;
    max-height: 350px;
    margin: auto;
    overflow: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
}

.custom .e-list-item .e-fullrow {
    height: 72px;
}
.custom .e-list-item .e-list-text {
    line-height: normal;
}
.eimage {
    float: left;
    padding: 11px 16px 11px 0;
}
.ename {
    font-size: 16px;
    padding: 14px 0 0;
}
.ejob {
    font-size: 14px;
    opacity: .87;
}
Copied to clipboard
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
import { TreeViewComponent } from '@syncfusion/ej2-react-navigations';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.employees = [
            { id: 1, name: 'Steven Buchanan', eimg: '10', job: 'CEO', hasChild: true, expanded: true },
            { id: 2, pid: 1, name: 'Laura Callahan', eimg: '2', job: 'Product Manager', hasChild: true },
            { id: 3, pid: 2, name: 'Andrew Fuller', eimg: '7', job: 'Team Lead', hasChild: true },
            { id: 4, pid: 3, name: 'Anne Dodsworth', eimg: '1', job: 'Developer' },
            { id: 5, pid: 1, name: 'Nancy Davolio', eimg: '4', job: 'Product Manager', hasChild: true },
            { id: 6, pid: 5, name: 'Michael Suyama', eimg: '9', job: 'Team Lead', hasChild: true },
            { id: 7, pid: 6, name: 'Robert King', eimg: '8', job: 'Developer ' },
            { id: 8, pid: 7, name: 'Margaret Peacock', eimg: '6', job: 'Developer' },
            { id: 9, pid: 1, name: 'Janet Leverling', eimg: '3', job: 'HR' },
        ];
        this.fields = { dataSource: this.employees, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' };
        this.cssClass = "custom";
    }
    nodeTemplate(data) {
        return (<div>
        <img className='eimage' src={`./../template-cs1/${data.eimg}.png`} alt='${data.eimg}'/>
        <div className='ename'>{data.name}</div>
        <div className='ejob'>{data.job}</div>
      </div>);
    }
    render() {
        return (
        // specifies the tag for render the TreeView component
        <TreeViewComponent fields={this.fields} cssClass={this.cssClass} nodeTemplate={this.nodeTemplate}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

See Also