How can I help you?
Templates in React Drop down list component
21 Feb 202624 minutes to read
The DropDownList provides several options to customize list items, group titles, selected values, headers, and footer elements.
To get started with React DropDownList templates, you can check on this video:
Item template
Customize the content of each list item using the itemTemplate property.
In the following example, each list item is divided into two columns to display relevant data.
[Class-component]
// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
// bind the DataManager instance to dataSource property
employeeData = new DataManager({
adaptor: new ODataV4Adaptor,
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
});
// bind the Query instance to query property
query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(6);
// maps the appropriate column to fields property
fields = { text: 'FirstName', value: 'EmployeeID' };
// sort the resulted items
sortOrder = 'Ascending';
render() {
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" query={this.query} itemTemplate={this.itemTemplate = this.itemTemplate.bind(this)} dataSource={this.employeeData} sortOrder={this.sortOrder} fields={this.fields} placeholder="Select an employee"/>);
}
// set the value to itemTemplate property
itemTemplate(data) {
return (<span><span className='name'>{data.FirstName}</span><span className='city'>{data.City}</span></span>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
// bind the DataManager instance to dataSource property
private employeeData: DataManager = new DataManager({
adaptor: new ODataV4Adaptor,
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
});
// bind the Query instance to query property
private query: Query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(6);
// maps the appropriate column to fields property
private fields: object = { text: 'FirstName', value: 'EmployeeID' };
// sort the resulted items
private sortOrder: string = 'Ascending';
public render() {
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" query={this.query} itemTemplate={this.itemTemplate = this.itemTemplate.bind(this)} dataSource={this.employeeData} sortOrder={this.sortOrder} fields={this.fields} placeholder="Select an employee" />
);
}
// set the value to itemTemplate property
private itemTemplate(data: any): JSX.Element {
return (
<span><span className='name'>{data.FirstName}</span><span className='city'>{data.City}</span></span>
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));[Functional-component]
// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// bind the DataManager instance to dataSource property
const employeeData = new DataManager({
adaptor: new ODataV4Adaptor,
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
});
// bind the Query instance to query property
const query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(6);
// maps the appropriate column to fields property
const fields = { text: 'FirstName', value: 'EmployeeID' };
// sort the resulted items
const sortOrder = 'Ascending';
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" query={query} itemTemplate={itemTemplate = itemTemplate.bind(this)} dataSource={employeeData} sortOrder={sortOrder} fields={fields} placeholder="Select an employee"/>);
// set the value to itemTemplate property
function itemTemplate(data) {
return (<span><span className='name'>{data.FirstName}</span><span className='city'>{data.City}</span></span>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App(){
// bind the DataManager instance to dataSource property
const employeeData: DataManager = new DataManager({
adaptor: new ODataV4Adaptor,
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
});
// bind the Query instance to query property
const query: Query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(6);
// maps the appropriate column to fields property
const fields: object = { text: 'FirstName', value: 'EmployeeID' };
// sort the resulted items
const sortOrder: string = 'Ascending';
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" query={query} itemTemplate={itemTemplate = itemTemplate.bind(this)} dataSource={employeeData} sortOrder={sortOrder} fields={fields} placeholder="Select an employee" />
);
// set the value to itemTemplate property
function itemTemplate(data: any): JSX.Element {
return (
<span><span className='name'>{data.FirstName}</span><span className='city'>{data.City}</span></span>
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));Value template
Customize the currently selected value displayed in the DropDownList input element using the valueTemplate property.
In the following example, the selected value displays combined text from the FirstName and City fields, separated by a hyphen.
[Class-component]
// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
// bind the DataManager instance to dataSource property
employeeData = new DataManager({
adaptor: new ODataV4Adaptor,
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
});
// bind the Query instance to query property
query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(6);
// maps the appropriate column to fields property
fields = { text: 'FirstName', value: 'EmployeeID' };
// sort the resulted items
sortOrder = 'Ascending';
// set the value to itemTemplate property
render() {
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" valueTemplate={this.valueTemplate = this.valueTemplate.bind(this)} query={this.query} itemTemplate={this.itemTemplate = this.itemTemplate.bind(this)} sortOrder={this.sortOrder} dataSource={this.employeeData} fields={this.fields} placeholder="Select an employee"/>);
}
itemTemplate(data) {
return (<span><span className='name'>{data.FirstName}</span><span className='city'>{data.City}</span></span>);
}
// set the value to valueTemplate property
valueTemplate(data) {
return (<span>{data.FirstName} - {data.City}</span>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
// bind the DataManager instance to dataSource property
private employeeData: DataManager = new DataManager({
adaptor: new ODataV4Adaptor,
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
});
// bind the Query instance to query property
private query: Query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(6);
// maps the appropriate column to fields property
private fields: object = { text: 'FirstName', value: 'EmployeeID' };
// sort the resulted items
private sortOrder: string = 'Ascending';
// set the value to itemTemplate property
public render() {
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" valueTemplate={this.valueTemplate = this.valueTemplate.bind(this)} query={this.query} itemTemplate={this.itemTemplate = this.itemTemplate.bind(this)} sortOrder={this.sortOrder} dataSource={this.employeeData} fields={this.fields} placeholder="Select an employee" />
);
}
private itemTemplate(data: any): JSX.Element {
return (
<span><span className='name'>{data.FirstName}</span><span className ='city'>{data.City}</span></span>
);
}
// set the value to valueTemplate property
private valueTemplate(data: any): JSX.Element {
return (
<span>{data.FirstName} - {data.City}</span>
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));[Functional-component]
// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// bind the DataManager instance to dataSource property
const employeeData = new DataManager({
adaptor: new ODataV4Adaptor,
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
});
// bind the Query instance to query property
const query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(6);
// maps the appropriate column to fields property
const fields = { text: 'FirstName', value: 'EmployeeID' };
// sort the resulted items
const sortOrder = 'Ascending';
// set the value to itemTemplate property
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" valueTemplate={valueTemplate = valueTemplate.bind(this)} query={query} itemTemplate={itemTemplate = itemTemplate.bind(this)} sortOrder={sortOrder} dataSource={employeeData} fields={fields} placeholder="Select an employee"/>);
function itemTemplate(data) {
return (<span><span className='name'>{data.FirstName}</span><span className='city'>{data.City}</span></span>);
}
// set the value to valueTemplate property
function valueTemplate(data) {
return (<span>{data.FirstName} - {data.City}</span>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// bind the DataManager instance to dataSource property
const employeeData: DataManager = new DataManager({
adaptor: new ODataV4Adaptor,
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
});
// bind the Query instance to query property
const query: Query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(6);
// maps the appropriate column to fields property
const fields: object = { text: 'FirstName', value: 'EmployeeID' };
// sort the resulted items
const sortOrder: string = 'Ascending';
// set the value to itemTemplate property
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" valueTemplate={valueTemplate = valueTemplate.bind(this)} query={query} itemTemplate={itemTemplate = itemTemplate.bind(this)} sortOrder={sortOrder} dataSource={employeeData} fields={fields} placeholder="Select an employee" />
);
function itemTemplate(data: any): JSX.Element {
return (
<span><span className='name'>{data.FirstName}</span><span className ='city'>{data.City}</span></span>
);
}
// set the value to valueTemplate property
function valueTemplate(data: any): JSX.Element {
return (
<span>{data.FirstName} - {data.City}</span>
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));Group template
Customize group header titles using the groupTemplate property. This template applies to both inline and floating group header modes.
In the following example, employees are grouped by their city.
[Class-component]
// import DataManager related classes
import { DataManager, ODataV4Adaptor, Predicate, Query } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
// bind the DataManager instance to dataSource property
employeeData = new DataManager({
adaptor: new ODataV4Adaptor,
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
});
// form predicate to fetch the grouped data
groupPredicate = new Predicate('City', 'equal', 'london').or('City', 'equal', 'seattle');
// bind the Query instance to query property
query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(6).where(this.groupPredicate);
// maps the appropriate column to fields property
fields = { text: 'FirstName', value: 'EmployeeID', groupBy: 'City' };
// sort the resulted items
sortOrder = 'Ascending';
render() {
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" query={this.query} groupTemplate={this.groupTemplate = this.groupTemplate.bind(this)} dataSource={this.employeeData} sortOrder={this.sortOrder} fields={this.fields} placeholder="Select an employee"/>);
}
// set the value to groupTemplate
groupTemplate(data) {
return (<strong>{data.City}</strong>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));// import DataManager related classes
import { DataManager, ODataV4Adaptor, Predicate, Query } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
// bind the DataManager instance to dataSource property
private employeeData: DataManager = new DataManager({
adaptor: new ODataV4Adaptor,
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
});
// form predicate to fetch the grouped data
private groupPredicate = new Predicate('City', 'equal', 'london').or('City', 'equal', 'seattle');
// bind the Query instance to query property
private query: Query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(6).where(this.groupPredicate);
// maps the appropriate column to fields property
private fields: object = { text: 'FirstName', value: 'EmployeeID', groupBy: 'City' };
// sort the resulted items
private sortOrder: string = 'Ascending';
public render() {
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" query={this.query} groupTemplate={this.groupTemplate = this.groupTemplate.bind(this)} dataSource={this.employeeData} sortOrder={this.sortOrder} fields={this.fields} placeholder="Select an employee" />
);
}
// set the value to groupTemplate
private groupTemplate(data: any): JSX.Element {
return (
<strong>{data.City}</strong>
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));[Functional-component]
// import DataManager related classes
import { DataManager, ODataV4Adaptor, Predicate, Query } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// bind the DataManager instance to dataSource property
const employeeData = new DataManager({
adaptor: new ODataV4Adaptor,
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
});
// form predicate to fetch the grouped data
const groupPredicate = new Predicate('City', 'equal', 'london').or('City', 'equal', 'seattle');
// bind the Query instance to query property
const query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(6).where(groupPredicate);
// maps the appropriate column to fields property
const fields = { text: 'FirstName', value: 'EmployeeID', groupBy: 'City' };
// sort the resulted items
const sortOrder = 'Ascending';
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" query={query} groupTemplate={groupTemplate = groupTemplate.bind(this)} dataSource={employeeData} sortOrder={sortOrder} fields={fields} placeholder="Select an employee"/>);
// set the value to groupTemplate
function groupTemplate(data) {
return (<strong>{data.City}</strong>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));// import DataManager related classes
import { DataManager, ODataV4Adaptor, Predicate, Query } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// bind the DataManager instance to dataSource property
const employeeData: DataManager = new DataManager({
adaptor: new ODataV4Adaptor,
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
});
// form predicate to fetch the grouped data
const groupPredicate = new Predicate('City', 'equal', 'london').or('City', 'equal', 'seattle');
// bind the Query instance to query property
const query: Query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(6).where(groupPredicate);
// maps the appropriate column to fields property
const fields: object = { text: 'FirstName', value: 'EmployeeID', groupBy: 'City' };
// sort the resulted items
const sortOrder: string = 'Ascending';
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" query={query} groupTemplate={groupTemplate = groupTemplate.bind(this)} dataSource={employeeData} sortOrder={sortOrder} fields={fields} placeholder="Select an employee" />
);
// set the value to groupTemplate
function groupTemplate(data: any): JSX.Element {
return (
<strong>{data.City}</strong>
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));Header template
Display a static header element at the top of the popup list using the headerTemplate property to place custom elements.
In the following example, list items and headers are displayed as two columns similar to a data grid.
[Class-component]
// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
// bind the DataManager instance to dataSource property
employeeData = new DataManager({
adaptor: new ODataV4Adaptor,
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
});
// bind the Query instance to query property
query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(6);
// maps the appropriate column to fields property
fields = { text: 'FirstName', value: 'EmployeeID' };
// sort the resulted items
sortOrder = 'Ascending';
render() {
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" query={this.query} headerTemplate={this.headerTemplate = this.headerTemplate.bind(this)} dataSource={this.employeeData} sortOrder={this.sortOrder} itemTemplate={this.itemTemplate = this.itemTemplate.bind(this)} fields={this.fields} placeholder="Select an employee"/>);
}
// set the value to header template
headerTemplate(data) {
return (<span className='head'><span className='name'>Name</span><span className='city'>City</span></span>);
}
// set the value to item template
itemTemplate(data) {
return (<span className='item'><span className='name'>{data.FirstName}</span><span className='city'>{data.City}</span></span>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
// bind the DataManager instance to dataSource property
private employeeData: DataManager = new DataManager({
adaptor: new ODataV4Adaptor,
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
});
// bind the Query instance to query property
private query: Query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(6);
// maps the appropriate column to fields property
private fields: object = { text: 'FirstName', value: 'EmployeeID' };
// sort the resulted items
private sortOrder: string = 'Ascending';
public render() {
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" query={this.query} headerTemplate={this.headerTemplate = this.headerTemplate.bind(this)} dataSource={this.employeeData} sortOrder={this.sortOrder} itemTemplate={this.itemTemplate = this.itemTemplate.bind(this)} fields={this.fields} placeholder="Select an employee" />
);
}
// set the value to header template
private headerTemplate(data: any): JSX.Element {
return (
<span className='head'><span className='name'>Name</span><span className='city'>City</span></span>
);
}
// set the value to item template
private itemTemplate(data: any): JSX.Element {
return (
<span className='item' ><span className='name'>{data.FirstName}</span><span className='city'>{data.City}</span></span>
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));[Functional-component]
// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// bind the DataManager instance to dataSource property
const employeeData = new DataManager({
adaptor: new ODataV4Adaptor,
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
});
// bind the Query instance to query property
const query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(6);
// maps the appropriate column to fields property
const fields = { text: 'FirstName', value: 'EmployeeID' };
// sort the resulted items
const sortOrder = 'Ascending';
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" query={query} headerTemplate={headerTemplate = headerTemplate.bind(this)} dataSource={employeeData} sortOrder={sortOrder} itemTemplate={itemTemplate = itemTemplate.bind(this)} fields={fields} placeholder="Select an employee"/>);
// set the value to header template
function headerTemplate(data) {
return (<span className='head'><span className='name'>Name</span><span className='city'>City</span></span>);
}
// set the value to item template
function itemTemplate(data) {
return (<span className='item'><span className='name'>{data.FirstName}</span><span className='city'>{data.City}</span></span>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// bind the DataManager instance to dataSource property
const employeeData: DataManager = new DataManager({
adaptor: new ODataV4Adaptor,
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
});
// bind the Query instance to query property
const query: Query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(6);
// maps the appropriate column to fields property
const fields: object = { text: 'FirstName', value: 'EmployeeID' };
// sort the resulted items
const sortOrder: string = 'Ascending';
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" query={query} headerTemplate={headerTemplate = headerTemplate.bind(this)} dataSource={employeeData} sortOrder={sortOrder} itemTemplate={itemTemplate = itemTemplate.bind(this)} fields={fields} placeholder="Select an employee" />
);
// set the value to header template
function headerTemplate(data: any): JSX.Element {
return (
<span className='head'><span className='name'>Name</span><span className='city'>City</span></span>
);
}
// set the value to item template
function itemTemplate(data: any): JSX.Element {
return (
<span className='item' ><span className='name'>{data.FirstName}</span><span className='city'>{data.City}</span></span>
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));Footer template
Display a footer element at the bottom of the popup list using the footerTemplate property to place custom content.
In the following example, the footer displays the total number of list items in the DropDownList.
[Class-component]
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
// define the array of data
sportsData = ["BasketBall", "Cricket", "Football", "Golf"];
render() {
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" footerTemplate={this.footerTemplate = this.footerTemplate.bind(this)} dataSource={this.sportsData} placeholder="Select a game"/>);
}
// set the value to footer template
footerTemplate(data) {
return (<span className='foot'/>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
// define the array of data
private sportsData: string[] = ["BasketBall", "Cricket", "Football", "Golf"];
public render() {
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" footerTemplate={this.footerTemplate = this.footerTemplate.bind(this)} dataSource={this.sportsData} placeholder="Select a game" />
);
}
// set the value to footer template
private footerTemplate(data: any): JSX.Element {
return (
<span className='foot'/>
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));[Functional-component]
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// define the array of data
const sportsData = ["BasketBall", "Cricket", "Football", "Golf"];
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" footerTemplate={footerTemplate = footerTemplate.bind(this)} dataSource={sportsData} placeholder="Select a game"/>);
// set the value to footer template
function footerTemplate(data) {
return (<span className='foot'/>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// define the array of data
const sportsData: string[] = ["BasketBall", "Cricket", "Football", "Golf"];
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" footerTemplate={footerTemplate = footerTemplate.bind(this)} dataSource={sportsData} placeholder="Select a game" />
);
// set the value to footer template
function footerTemplate(data: any): JSX.Element {
return (
<span className='foot'/>
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));No records template
Customize the popup list content when no data is found or no search matches exist using the noRecordsTemplate property.
In the following example, the popup displays a notification when no data is available.
[Class-component]
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
// define the array of data
data = [];
render() {
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" noRecordsTemplate={this.noRecordsTemplate = this.noRecordsTemplate.bind(this)} dataSource={this.data} placeholder="Select an item"/>);
}
// set the value to noRecords template
noRecordsTemplate(data) {
return (<span className='norecord'> NO DATA AVAILABLE</span>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
// define the array of data
private data: { [key: string]: Object }[] = [];
public render() {
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" noRecordsTemplate={this.noRecordsTemplate = this.noRecordsTemplate.bind(this)} dataSource={this.data} placeholder="Select an item" />
);
}
// set the value to noRecords template
private noRecordsTemplate(data: any): JSX.Element {
return (
<span className='norecord'> NO DATA AVAILABLE</span>
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));[Functional-component]
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// define the array of data
const data = [];
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" noRecordsTemplate={noRecordsTemplate = noRecordsTemplate.bind(this)} dataSource={data} placeholder="Select an item"/>);
// set the value to noRecords template
function noRecordsTemplate(data) {
return (<span className='norecord'> NO DATA AVAILABLE</span>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// define the array of data
const data: { [key: string]: Object }[] = [];
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" noRecordsTemplate={noRecordsTemplate = noRecordsTemplate.bind(this)} dataSource={data} placeholder="Select an item" />
);
// set the value to noRecords template
function noRecordsTemplate(data: any): JSX.Element {
return (
<span className='norecord'> NO DATA AVAILABLE</span>
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));Action failure template
Customize the popup list content when a data fetch request fails at the remote server using the actionFailureTemplate property.
In the following example, the DropDownList displays a notification when the data fetch request fails.
[Class-component]
// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
// bind the DataManager instance to dataSource property
customerData = new DataManager({
adaptor: new ODataV4Adaptor,
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svcs/'
});
// bind the Query instance to query property
query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6);
// maps the appropriate column to fields property
fields = { text: 'ContactName', value: 'CustomerID' };
render() {
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" query={this.query} actionFailureTemplate={this.failureTemplate = this.failureTemplate.bind(this)} dataSource={this.customerData} fields={this.fields} placeholder="Select a customer"/>);
}
// set the value to action failure template
failureTemplate(data) {
return (<span className='action-failure'> Data fetch get fails</span>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
// bind the DataManager instance to dataSource property
private customerData: DataManager = new DataManager({
adaptor: new ODataV4Adaptor,
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svcs/'
});
// bind the Query instance to query property
private query: Query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6);
// maps the appropriate column to fields property
private fields: object = { text: 'ContactName', value: 'CustomerID' };
public render() {
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" query={this.query} actionFailureTemplate={this.failureTemplate = this.failureTemplate.bind(this)} dataSource={this.customerData} fields={this.fields} placeholder="Select a customer" />
);
}
// set the value to action failure template
private failureTemplate(data: any): JSX.Element {
return (
<span className='action-failure'> Data fetch get fails</span>
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));[Functional-component]
// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// bind the DataManager instance to dataSource property
const customerData = new DataManager({
adaptor: new ODataV4Adaptor,
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svcs/'
});
// bind the Query instance to query property
const query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6);
// maps the appropriate column to fields property
const fields = { text: 'ContactName', value: 'CustomerID' };
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" query={query} actionFailureTemplate={failureTemplate = failureTemplate.bind(this)} dataSource={customerData} fields={fields} placeholder="Select a customer"/>);
}
// set the value to action failure template
function failureTemplate(data) {
return (<span className='action-failure'> Data fetch get fails</span>);
}
ReactDOM.render(<App />, document.getElementById('sample'));// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App(){
// bind the DataManager instance to dataSource property
const customerData: DataManager = new DataManager({
adaptor: new ODataV4Adaptor,
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svcs/'
});
// bind the Query instance to query property
const query: Query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6);
// maps the appropriate column to fields property
const fields: object = { text: 'ContactName', value: 'CustomerID' };
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" query={query} actionFailureTemplate={failureTemplate = failureTemplate.bind(this)} dataSource={customerData} fields={fields} placeholder="Select a customer" />
);
}
// set the value to action failure template
function failureTemplate(data: any): JSX.Element {
return (
<span className='action-failure'> Data fetch get fails</span>
);
}
ReactDOM.render(<App />, document.getElementById('sample'));