Templates in React Dropdown Tree component

7 Oct 202524 minutes to read

The Dropdown Tree provides support for customizing each list item, header, and footer elements.

Item template

Customize the content of each list item within the Dropdown Tree using the itemTemplate property. This allows you to display complex data structures with custom formatting and styling.

In the following sample, the Dropdown Tree list items display employee information including name and job details using the itemTemplate property.

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

import { DropDownTreeComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    let data = [
        { "id": 1, "name": "Steven Buchanan", "job": "General Manager", "hasChild": true, "expanded": true },
        { "id": 2, "pid": 1, "name": "Laura Callahan", "job": "Product Manager", "hasChild": true },
        { "id": 3, "pid": 2, "name": "Andrew Fuller", "job": "Team Lead", "hasChild": true },
        { "id": 4, "pid": 3, "name": "Anne Dodsworth", "job": "Developer" },
        { "id": 10, "pid": 3, "name": "Lilly", "job": "Developer", "status": "online" },
        { "id": 5, "pid": 1, "name": "Nancy Davolio", "job": "Product Manager", "hasChild": true },
        { "id": 6, "pid": 5, "name": "Michael Suyama", "job": "Team Lead", "hasChild": true },
        { "id": 7, "pid": 6, "name": "Robert King", "job": "Developer " },
        { "id": 11, "pid": 6, "name": "Mary", "job": "Developer " },
        { "id": 9, "pid": 1, "name": "Janet Leverling", "job": "HR" }
    ];
    let fields = { dataSource: data, value: 'id', text: 'name', parentValue: "pid", hasChildren: 'hasChild' };
    function itemTemplate(data) {
        return (<div><span className="ename"> {data.name} - </span><span className="ejob"> {data.job} </span></div>);
    }
    return (<DropDownTreeComponent fields={fields} placeholder="Select an employee" itemTemplate={itemTemplate} popupHeight="270px" cssClass="custom" width="100%" />);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
import { DropDownTreeComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
  let data: { [key: string]: Object }[] = [
    { "id": 1, "name": "Steven Buchanan", "job": "General Manager", "hasChild": true, "expanded": true },
    { "id": 2, "pid": 1, "name": "Laura Callahan", "job": "Product Manager", "hasChild": true },
    { "id": 3, "pid": 2, "name": "Andrew Fuller", "job": "Team Lead", "hasChild": true },
    { "id": 4, "pid": 3, "name": "Anne Dodsworth", "job": "Developer" },
    { "id": 10, "pid": 3, "name": "Lilly", "job": "Developer", "status": "online" },
    { "id": 5, "pid": 1, "name": "Nancy Davolio", "job": "Product Manager", "hasChild": true },
    { "id": 6, "pid": 5, "name": "Michael Suyama", "job": "Team Lead", "hasChild": true },
    { "id": 7, "pid": 6, "name": "Robert King", "job": "Developer " },
    { "id": 11, "pid": 6, "name": "Mary", "job": "Developer " },
    { "id": 9, "pid": 1, "name": "Janet Leverling", "job": "HR" }
  ];
  let fields: Object = { dataSource: data, value: 'id', text: 'name', parentValue: "pid", hasChildren: 'hasChild' };
  function itemTemplate(data: any): JSX.Element {
    return (<div><span className="ename"> {data.name} - </span><span className="ejob"> {data.job} </span></div>);
  }
  return (<DropDownTreeComponent fields={fields} placeholder="Select an employee" itemTemplate={itemTemplate} popupHeight="270px" cssClass="custom" width="100%" />);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
.custom .ejob {
    opacity: .60;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Dropdown Tree</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="./styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='sample' style="margin: 20px auto 0; width:250px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Value template

The currently selected value displayed in the Dropdown Tree input element can be customized using the valueTemplate property. This template controls how selected items appear in the input field.

In the following sample, the selected value displays as combined text showing both Name and Job separated by a hyphen.

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

import { DropDownTreeComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    let data = [
        { "id": 1, "name": "Steven Buchanan", "job": "General Manager", "hasChild": true, "expanded": true },
        { "id": 2, "pid": 1, "name": "Laura Callahan", "job": "Product Manager", "hasChild": true },
        { "id": 3, "pid": 2, "name": "Andrew Fuller", "job": "Team Lead", "hasChild": true },
        { "id": 4, "pid": 3, "name": "Anne Dodsworth", "job": "Developer" },
        { "id": 10, "pid": 3, "name": "Lilly", "job": "Developer", "status": "online" },
        { "id": 5, "pid": 1, "name": "Nancy Davolio", "job": "Product Manager", "hasChild": true },
        { "id": 6, "pid": 5, "name": "Michael Suyama", "job": "Team Lead", "hasChild": true },
        { "id": 7, "pid": 6, "name": "Robert King", "job": "Developer " },
        { "id": 11, "pid": 6, "name": "Mary", "job": "Developer " },
        { "id": 9, "pid": 1, "name": "Janet Leverling", "job": "HR" }
    ];
    let fields = { dataSource: data, value: 'id', text: 'name', parentValue: "pid", hasChildren: 'hasChild' };
    function valueTemplate(data) {
        return (<div><span className="ename"> {data.name} - </span><span className="ejob"> {data.job} </span></div>);
    }
    return (<DropDownTreeComponent fields={fields} placeholder="Select an employee" valueTemplate={valueTemplate} popupHeight="270px" cssClass="custom" width="100%" />);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
import { DropDownTreeComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
  let data: { [key: string]: Object }[] = [
    { "id": 1, "name": "Steven Buchanan", "job": "General Manager", "hasChild": true, "expanded": true },
    { "id": 2, "pid": 1, "name": "Laura Callahan", "job": "Product Manager", "hasChild": true },
    { "id": 3, "pid": 2, "name": "Andrew Fuller", "job": "Team Lead", "hasChild": true },
    { "id": 4, "pid": 3, "name": "Anne Dodsworth", "job": "Developer" },
    { "id": 10, "pid": 3, "name": "Lilly", "job": "Developer", "status": "online" },
    { "id": 5, "pid": 1, "name": "Nancy Davolio", "job": "Product Manager", "hasChild": true },
    { "id": 6, "pid": 5, "name": "Michael Suyama", "job": "Team Lead", "hasChild": true },
    { "id": 7, "pid": 6, "name": "Robert King", "job": "Developer " },
    { "id": 11, "pid": 6, "name": "Mary", "job": "Developer " },
    { "id": 9, "pid": 1, "name": "Janet Leverling", "job": "HR" }
  ];
  let fields: Object = { dataSource: data, value: 'id', text: 'name', parentValue: "pid", hasChildren: 'hasChild' };
  function valueTemplate(data: any): JSX.Element {
    return (<div><span className="ename"> {data.name} - </span><span className="ejob"> {data.job} </span></div>);
  }
  return (<DropDownTreeComponent fields={fields} placeholder="Select an employee" valueTemplate={valueTemplate} popupHeight="270px" cssClass="custom" width="100%" />);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
.custom .ejob {
    opacity: .60;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Dropdown Tree</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="./styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='sample' style="margin: 20px auto 0; width:250px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Header template

The header element appears statically at the top of the popup list items within the Dropdown Tree. Use the headerTemplate property to place custom elements as header content.

In the following sample, the header is customized with a custom element that provides context for the dropdown content.

import { DropDownTreeComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    let data = [
        { "id": 1, "name": "Steven Buchanan", "job": "General Manager", "hasChild": true, "expanded": true },
        { "id": 2, "pid": 1, "name": "Laura Callahan", "job": "Product Manager", "hasChild": true },
        { "id": 3, "pid": 2, "name": "Andrew Fuller", "job": "Team Lead", "hasChild": true },
        { "id": 4, "pid": 3, "name": "Anne Dodsworth", "job": "Developer" },
        { "id": 10, "pid": 3, "name": "Lilly", "job": "Developer", "status": "online" },
        { "id": 5, "pid": 1, "name": "Nancy Davolio", "job": "Product Manager", "hasChild": true },
        { "id": 6, "pid": 5, "name": "Michael Suyama", "job": "Team Lead", "hasChild": true },
        { "id": 7, "pid": 6, "name": "Robert King", "job": "Developer " },
        { "id": 11, "pid": 6, "name": "Mary", "job": "Developer " },
        { "id": 9, "pid": 1, "name": "Janet Leverling", "job": "HR" }
    ];
    let fields = { dataSource: data, value: 'id', text: 'name', parentValue: "pid", hasChildren: 'hasChild' };
    function headerTemplate() {
        return (<div className="head"> Employee List </div>);
    }
    return (<DropDownTreeComponent fields={fields} placeholder="Select an employee" headerTemplate={headerTemplate} popupHeight="270px" cssClass="custom" />);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
import { DropDownTreeComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
  let data: { [key: string]: Object }[] = [
    { "id": 1, "name": "Steven Buchanan", "job": "General Manager", "hasChild": true, "expanded": true },
    { "id": 2, "pid": 1, "name": "Laura Callahan", "job": "Product Manager", "hasChild": true },
    { "id": 3, "pid": 2, "name": "Andrew Fuller", "job": "Team Lead", "hasChild": true },
    { "id": 4, "pid": 3, "name": "Anne Dodsworth", "job": "Developer" },
    { "id": 10, "pid": 3, "name": "Lilly", "job": "Developer", "status": "online" },
    { "id": 5, "pid": 1, "name": "Nancy Davolio", "job": "Product Manager", "hasChild": true },
    { "id": 6, "pid": 5, "name": "Michael Suyama", "job": "Team Lead", "hasChild": true },
    { "id": 7, "pid": 6, "name": "Robert King", "job": "Developer " },
    { "id": 11, "pid": 6, "name": "Mary", "job": "Developer " },
    { "id": 9, "pid": 1, "name": "Janet Leverling", "job": "HR" }
  ];
  let fields: Object = { dataSource: data, value: 'id', text: 'name', parentValue: "pid", hasChildren: 'hasChild' };
  function headerTemplate(): JSX.Element {
    return (<div className="head"> Employee List </div>);
  }
  return (<DropDownTreeComponent fields={fields} placeholder="Select an employee" headerTemplate={headerTemplate} popupHeight="270px" cssClass="custom" />);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
.custom .head {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    margin: 0 auto;
    width: 200px;
    padding: 0 20px;
    font-weight: bold;
    border-bottom: 1px solid #e0e0e0;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Dropdown Tree</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="./styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='sample' style="margin: 20px auto 0; width:250px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

The Dropdown Tree supports displaying a footer element at the bottom of the popup list items. Use the footerTemplate property to place custom elements as footer content.

In the following sample, the footer element displays the total number of employees available in the Dropdown Tree.

import { DropDownTreeComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    let data = [
        { "id": 1, "name": "Steven Buchanan", "job": "General Manager", "hasChild": true, "expanded": true },
        { "id": 2, "pid": 1, "name": "Laura Callahan", "job": "Product Manager", "hasChild": true },
        { "id": 3, "pid": 2, "name": "Andrew Fuller", "job": "Team Lead", "hasChild": true },
        { "id": 4, "pid": 3, "name": "Anne Dodsworth", "job": "Developer" },
        { "id": 10, "pid": 3, "name": "Lilly", "job": "Developer", "status": "online" },
        { "id": 5, "pid": 1, "name": "Nancy Davolio", "job": "Product Manager", "hasChild": true },
        { "id": 6, "pid": 5, "name": "Michael Suyama", "job": "Team Lead", "hasChild": true },
        { "id": 7, "pid": 6, "name": "Robert King", "job": "Developer " },
        { "id": 11, "pid": 6, "name": "Mary", "job": "Developer " },
        { "id": 9, "pid": 1, "name": "Janet Leverling", "job": "HR" }
    ];
    let fields = { dataSource: data, value: 'id', text: 'name', parentValue: "pid", hasChildren: 'hasChild' };
    function footerTemplate() {
        return (<div className='foot'> Total number of employees: 10 </div>);
    }
    return (<DropDownTreeComponent fields={fields} placeholder="Select an employee" footerTemplate={footerTemplate} popupHeight="270px" cssClass="custom" />);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
import { DropDownTreeComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
  let data: { [key: string]: Object }[] = [
    { "id": 1, "name": "Steven Buchanan", "job": "General Manager", "hasChild": true, "expanded": true },
    { "id": 2, "pid": 1, "name": "Laura Callahan", "job": "Product Manager", "hasChild": true },
    { "id": 3, "pid": 2, "name": "Andrew Fuller", "job": "Team Lead", "hasChild": true },
    { "id": 4, "pid": 3, "name": "Anne Dodsworth", "job": "Developer" },
    { "id": 10, "pid": 3, "name": "Lilly", "job": "Developer", "status": "online" },
    { "id": 5, "pid": 1, "name": "Nancy Davolio", "job": "Product Manager", "hasChild": true },
    { "id": 6, "pid": 5, "name": "Michael Suyama", "job": "Team Lead", "hasChild": true },
    { "id": 7, "pid": 6, "name": "Robert King", "job": "Developer " },
    { "id": 11, "pid": 6, "name": "Mary", "job": "Developer " },
    { "id": 9, "pid": 1, "name": "Janet Leverling", "job": "HR" }
  ];
  let fields: object = { dataSource: data, value: 'id', text: 'name', parentValue: "pid", hasChildren: 'hasChild' };
  function footerTemplate(): JSX.Element {
    return (<div className='foot'> Total number of employees: 10 </div>);
  }
  return (<DropDownTreeComponent fields={fields} placeholder="Select an employee" footerTemplate={footerTemplate} popupHeight="270px" cssClass="custom" />);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
.custom .foot {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    font-weight: bold;
}

.custom .e-ddt-footer {
    border-top: 1px solid #e0e0e0;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Dropdown Tree</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="./styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='sample' style="margin: 20px auto 0; width:250px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

No records template

The Dropdown Tree supports displaying custom content when no matches are found during search operations. Use the noRecordsTemplate property to customize the no data message.

In the following sample, the popup list displays a custom notification when no data is available.

import { DropDownTreeComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    let data = [];
    let fields = { dataSource: data, value: 'id', text: 'name', parentValue: "pid", hasChildren: 'hasChild' };
    function noRecordsTemplate() {
        return (<div className='norecord'> NO DATA AVAILABLE </div>);
    }
    return (<DropDownTreeComponent fields={fields} placeholder="Select an employee" noRecordsTemplate={noRecordsTemplate} popupHeight="270px" />);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
import { DropDownTreeComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
  let data: { [key: string]: Object }[] = [];
  let fields: object = { dataSource: data, value: 'id', text: 'name', parentValue: "pid", hasChildren: 'hasChild' };
  function noRecordsTemplate(): JSX.Element {
    return (<div className='norecord'> NO DATA AVAILABLE </div>)
  }
  return (<DropDownTreeComponent fields={fields} placeholder="Select an employee" noRecordsTemplate={noRecordsTemplate} popupHeight="270px" />);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Dropdown Tree</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='sample' style="margin: 20px auto 0; width:250px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Action failure template

The Dropdown Tree provides options to customize the popup list content when data fetch requests fail at the remote server. Use the actionFailureTemplate property to display custom error messages.

In the following sample, when the data fetch request fails, the Dropdown Tree displays the notification.

import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { DropDownTreeComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    let data = new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svcs',
        adaptor: new ODataV4Adaptor,
        crossDomain: true,
    });
    let query = new Query().from('Employees').select('EmployeeID,FirstName,Title').take(5);
    let query1 = new Query().from('Orders').select('OrderID,EmployeeID,ShipName').take(5);
    let fields = {
        dataSource: data, query: query, value: 'EmployeeID', text: 'FirstName', hasChildren: 'EmployeeID',
        child: { dataSource: data, query: query1, value: 'OrderID', parentValue: 'EmployeeID', text: 'ShipName' }
    };
    function actionFailureTemplate() {
        return (<div className='action-failure'> Data fetch request fails </div>);
    }
    return (<DropDownTreeComponent fields={fields} actionFailureTemplate={actionFailureTemplate} placeholder="Select an employee" popupHeight="200px" />);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { DropDownTreeComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
  let data: DataManager = new DataManager({
    url: 'https://services.odata.org/V4/Northwind/Northwind.svcs',
    adaptor: new ODataV4Adaptor,
    crossDomain: true,
  });
  let query: Query = new Query().from('Employees').select('EmployeeID,FirstName,Title').take(5);
  let query1: Query = new Query().from('Orders').select('OrderID,EmployeeID,ShipName').take(5);
  let fields: object = {
    dataSource: data, query: query, value: 'EmployeeID', text: 'FirstName', hasChildren: 'EmployeeID',
    child: { dataSource: data, query: query1, value: 'OrderID', parentValue: 'EmployeeID', text: 'ShipName' }
  };
  function actionFailureTemplate(): JSX.Element {
    return (<div className='action-failure'> Data fetch request fails </div>);
  }
  return (<DropDownTreeComponent fields={fields} actionFailureTemplate={actionFailureTemplate} placeholder="Select an employee" popupHeight="200px" />);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Dropdown Tree</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='sample' style="margin: 20px auto 0; width:250px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Custom template for selected items display

When multiple items are selected via checkbox or multi-selection, the Dropdown Tree can display a custom template instead of showing all selected item text. Configure this by setting the mode property to Custom and using the customTemplate property.

When the mode property is set to Custom, the Dropdown Tree displays the default template value (${value.length} item(s) selected) such as 1 item(s) selected or 2 item(s) selected. Customize this default template using the customTemplate property.

In the following sample, the Dropdown Tree renders with the default value of the customTemplate property displaying 1 item(s) selected or 2 item(s) selected.

import { DropDownTreeComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    let data = [
        { "id": 1, "name": "Steven Buchanan", "job": "General Manager", "hasChild": true, "expanded": true },
        { "id": 2, "pid": 1, "name": "Laura Callahan", "job": "Product Manager", "hasChild": true },
        { "id": 3, "pid": 2, "name": "Andrew Fuller", "job": "Team Lead", "hasChild": true },
        { "id": 4, "pid": 3, "name": "Anne Dodsworth", "job": "Developer" },
        { "id": 10, "pid": 3, "name": "Lilly", "job": "Developer", "status": "online" },
        { "id": 5, "pid": 1, "name": "Nancy Davolio", "job": "Product Manager", "hasChild": true },
        { "id": 6, "pid": 5, "name": "Michael Suyama", "job": "Team Lead", "hasChild": true },
        { "id": 7, "pid": 6, "name": "Robert King", "job": "Developer " },
        { "id": 11, "pid": 6, "name": "Mary", "job": "Developer " },
        { "id": 9, "pid": 1, "name": "Janet Leverling", "job": "HR" }
    ];
    let fields = { dataSource: data, value: 'id', text: 'name', parentValue: "pid", hasChildren: 'hasChild' };
    let showCheckBox = true;
    let treeSettings = { autoCheck: true };
    let customTemplate = "${value.length} item(s) selected";
    return (<DropDownTreeComponent fields={fields} treeSettings={treeSettings} customTemplate={customTemplate} showCheckBox={showCheckBox} mode="Custom" placeholder="Select an employee" popupHeight="200px" />);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
import { DropDownTreeComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
  let data: { [key: string]: Object }[] = [
    { "id": 1, "name": "Steven Buchanan", "job": "General Manager", "hasChild": true, "expanded": true },
    { "id": 2, "pid": 1, "name": "Laura Callahan", "job": "Product Manager", "hasChild": true },
    { "id": 3, "pid": 2, "name": "Andrew Fuller", "job": "Team Lead", "hasChild": true },
    { "id": 4, "pid": 3, "name": "Anne Dodsworth", "job": "Developer" },
    { "id": 10, "pid": 3, "name": "Lilly", "job": "Developer", "status": "online" },
    { "id": 5, "pid": 1, "name": "Nancy Davolio", "job": "Product Manager", "hasChild": true },
    { "id": 6, "pid": 5, "name": "Michael Suyama", "job": "Team Lead", "hasChild": true },
    { "id": 7, "pid": 6, "name": "Robert King", "job": "Developer " },
    { "id": 11, "pid": 6, "name": "Mary", "job": "Developer " },
    { "id": 9, "pid": 1, "name": "Janet Leverling", "job": "HR" }
  ];
  let fields: object = { dataSource: data, value: 'id', text: 'name', parentValue: "pid", hasChildren: 'hasChild' };
  let showCheckBox: boolean = true;
  let treeSettings: Object = { autoCheck: true };
  let customTemplate: string = "${value.length} item(s) selected";
  return (<DropDownTreeComponent fields={fields} treeSettings={treeSettings} customTemplate={customTemplate} showCheckBox={showCheckBox} mode="Custom" placeholder="Select an employee" popupHeight="200px" />);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Dropdown Tree</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='sample' style="margin: 20px auto 0; width:250px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

In the following sample, the Dropdown Tree renders with a custom value for the customTemplate property displaying Selected items count: 2.

import { DropDownTreeComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    let data = [
        { "id": 1, "name": "Steven Buchanan", "job": "General Manager", "hasChild": true, "expanded": true },
        { "id": 2, "pid": 1, "name": "Laura Callahan", "job": "Product Manager", "hasChild": true },
        { "id": 3, "pid": 2, "name": "Andrew Fuller", "job": "Team Lead", "hasChild": true },
        { "id": 4, "pid": 3, "name": "Anne Dodsworth", "job": "Developer" },
        { "id": 10, "pid": 3, "name": "Lilly", "job": "Developer", "status": "online" },
        { "id": 5, "pid": 1, "name": "Nancy Davolio", "job": "Product Manager", "hasChild": true },
        { "id": 6, "pid": 5, "name": "Michael Suyama", "job": "Team Lead", "hasChild": true },
        { "id": 7, "pid": 6, "name": "Robert King", "job": "Developer " },
        { "id": 11, "pid": 6, "name": "Mary", "job": "Developer " },
        { "id": 9, "pid": 1, "name": "Janet Leverling", "job": "HR" }
    ];
    let fields = { dataSource: data, value: 'id', text: 'name', parentValue: "pid", hasChildren: 'hasChild' };
    let showCheckBox = true;
    let treeSettings = { autoCheck: true };
    let customTemplate = "Selected items count: ${value.length} item(s) ";
    return (<DropDownTreeComponent fields={fields} treeSettings={treeSettings} customTemplate={customTemplate} showCheckBox={showCheckBox} mode="Custom" placeholder="Select an employee" popupHeight="200px" />);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
import { DropDownTreeComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
  let data: { [key: string]: Object }[] = [
    { "id": 1, "name": "Steven Buchanan", "job": "General Manager", "hasChild": true, "expanded": true },
    { "id": 2, "pid": 1, "name": "Laura Callahan", "job": "Product Manager", "hasChild": true },
    { "id": 3, "pid": 2, "name": "Andrew Fuller", "job": "Team Lead", "hasChild": true },
    { "id": 4, "pid": 3, "name": "Anne Dodsworth", "job": "Developer" },
    { "id": 10, "pid": 3, "name": "Lilly", "job": "Developer", "status": "online" },
    { "id": 5, "pid": 1, "name": "Nancy Davolio", "job": "Product Manager", "hasChild": true },
    { "id": 6, "pid": 5, "name": "Michael Suyama", "job": "Team Lead", "hasChild": true },
    { "id": 7, "pid": 6, "name": "Robert King", "job": "Developer " },
    { "id": 11, "pid": 6, "name": "Mary", "job": "Developer " },
    { "id": 9, "pid": 1, "name": "Janet Leverling", "job": "HR" }
  ];
  let fields: object = { dataSource: data, value: 'id', text: 'name', parentValue: "pid", hasChildren: 'hasChild' };
  let showCheckBox: boolean = true;
  let treeSettings: Object = { autoCheck: true };
  let customTemplate: string = "Selected items count: ${value.length} item(s) ";
  return (<DropDownTreeComponent fields={fields} treeSettings={treeSettings} customTemplate={customTemplate} showCheckBox={showCheckBox} mode="Custom" placeholder="Select an employee" popupHeight="200px" />);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Dropdown Tree</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='sample' style="margin: 20px auto 0; width:250px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>