Template in React Treeview component
29 Aug 20237 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.
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';
function App() {
let 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' },
];
let fields = { dataSource: employees, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' };
let cssClass = "custom";
function nodeTemplate(data) {
return (<div>
<img
className="eimage"
src={`https://ej2.syncfusion.com/demos/src/treeview/images/employees/${data.eimg}.png`}
alt="${data.eimg}"
/>
<div className='ename'>{data.name}</div>
<div className='ejob'>{data.job}</div>
</div>);
}
return (
// specifies the tag for render the TreeView component
<TreeViewComponent fields={fields} cssClass={cssClass} nodeTemplate={nodeTemplate}/>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));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';
function App() {
let 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' },
];
let fields: Object = { dataSource: employees, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' };
let cssClass:string = "custom";
function nodeTemplate(data:any): JSX.Element {
return (
<div>
<img className='eimage' src={`https://ej2.syncfusion.com/demos/src/treeview/images/employees/${data.eimg}.png`} alt='${data.eimg}'/>
<div className='ename'>{data.name}</div>
<div className='ejob'>{data.job}</div>
</div>
)
}
return (
// specifies the tag for render the TreeView component
<TreeViewComponent fields={fields} cssClass={cssClass} nodeTemplate={nodeTemplate}/>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));