Getting Started

6 Jun 20236 minutes to read

The external script dependencies of the DropDownList widget are,

jQuery 1.7.1 and later versions.
jQuery.easing - to support the animation effects.

And the internal script dependencies of the DropDownList widget are:

File	Description / Usage
ej.core.min.js	Must be referred always before using all the JS controls.
ej.data.min.js	Used to handle data operation and should be used while binding data to JS controls.
ej.dropdownlist.min.js	The dropdownlist’s main file
ej.checkbox.min.js	Should be referred when using checkbox functionalities in DropDownList.
ej.scroller.min.js	Should be referred when using scrolling in DropDownList.
ej.draggable.min.js	Should be referred when using popup resize functionality in DropDownList.

For getting started you can use the ‘ej.web.all.min.js’ file, which encapsulates all the ‘ej’ controls and frameworks in one single file.

For themes, you can use the ‘ej.web.all.min.css’ CDN link from the snippet given. To add the themes in your application, please refer this link.

Creating DropDownList in React JS

The DropDownList can be created from a HTML ‘select’ element with the HTML ‘id’ attribute and pre-defined options set to it. Use the below given code to create a DropDownList in React JS.

You can create a React application and add necessary scripts and styles with the help of the given React Getting Started Documentation.

Define an HTML element for adding DropDownList in the application and refer the JSX file.

HTML

<div id="dropdownlist-default"></div>
<script src="app/dropdownlist/default.js"></script>

Create a JSX file for rendering DropDownList component using <EJ.DropDownList> syntax. Add required properties to it in <EJ.DropDownList> tag element

JAVASCRIPT

"use strict";
	var list = [
		{ empid: "cr1", text: "ListItem 1", value: "ListItem 1" },
        { empid: "cr2", text: "ListItem 2", value: "ListItem 2" },
    	{ empid: "cr3", text: "ListItem 3", value: "ListItem 3" },
        { empid: "cr4", text: "ListItem 4", value: "ListItem 4" },
        { empid: "cr5", text: "ListItem 5", value: "ListItem 5" },
    ];

ReactDOM.render(
   <EJ.DropDownList dataSource={list} fields-text="text" fields-value="value">
   </EJ.DropDownList>,
document.getElementById('dropdownlist-default')
);

Populating data

The DropDownList can be bounded to both local array and remote data services using ej.DataManager. You can use DataManager component to serve data from the data services based on the query provided.You can also bind local data using DataManager. To bind data to DropDownList widget, the dataSource property should be assigned with the instance of ‘ej.DataManager’.

NOTE

ODataAdaptor is the default adaptor for DataManager. On binding to other web services, proper data adaptor needs to be set on ‘adaptor’ option of DataManager.

HTML

<div id="dropdownlist-default"></div>
<script src="app/dropdownlist/default.js"></script>

JAVASCRIPT

"use strict";

var  customers= [
                 { id: "1", text: "ALFKI" }, { id: "2", text: "ANATR" }, { id: "3", text: "ANTON" },
                 { id: "4", text: "AROUT" }, { id: "5", text: "BERGS" }, { id: "6", text: "BLAUS" }
            ];
var dataManager=ej.DataManager(customers);

ReactDOM.render(
   <EJ.DropDownList dataSource={dataManager} fields-text="text" >
   </EJ.DropDownList>,
document.getElementById('dropdownlist-default')
);

Setting Dimensions

DropDownList dimensions can be set using width and height API.

HTML

<div id="dropdownlist-default"></div>
<script src="app/dropdownlist/default.js"></script>

JAVASCRIPT

"use strict";
	var list = [
		{ empid: "cr1", text: "ListItem 1", value: "ListItem 1" },
        { empid: "cr2", text: "ListItem 2", value: "ListItem 2" },
    	{ empid: "cr3", text: "ListItem 3", value: "ListItem 3" },
        { empid: "cr4", text: "ListItem 4", value: "ListItem 4" },
        { empid: "cr5", text: "ListItem 5", value: "ListItem 5" },
    ];

ReactDOM.render(
   <EJ.DropDownList dataSource={list} fields-text="text" fields-value='ListItem 1' width="300px" height="40px">
   </EJ.DropDownList>,
document.getElementById('dropdownlist-default')
);

Setting dimensions to Popup list

PopupWidth and popupHeight can be used to create a fixed size popup list.

HTML

<select id="dropdown1" ej-dropdownlist e-datasource="dataList" e-value="value" e-popupHeight="popupheight" e-popupWidth="popupwidth"/>

JAVASCRIPT

"use strict";
	var list = [
		{ empid: "cr1", text: "ListItem 1", value: "ListItem 1" },
        { empid: "cr2", text: "ListItem 2", value: "ListItem 2" },
    	{ empid: "cr3", text: "ListItem 3", value: "ListItem 3" },
        { empid: "cr4", text: "ListItem 4", value: "ListItem 4" },
        { empid: "cr5", text: "ListItem 5", value: "ListItem 5" },
    ];

ReactDOM.render(
   <EJ.DropDownList dataSource={list} fields-text="text" fields-value='ListItem 1' popupHeight="100px" popupWidth="200px">
   </EJ.DropDownList>,
document.getElementById('dropdownlist-default')
);