JavaScript (ES5)
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Migration from Essential JS 1 in JavaScript (ES5) DropDownList control

08 May 2023 / 10 minutes to read

This article describes the API migration process of DropDownList component from Essential JS 1 to Essential JS 2.

DataBinding

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: dataSource
$('#dropdown1').ejDropDownList({dataSource: List});		 Property: dataSource
var dropDownListObject = new ej.dropdowns.DropDownList({dataSource: sportsData,});dropDownListObject.appendTo('#ddlelement');
Fields for mapping Property: fields
$('#dropdown1').ejDropDownList({fields: {text: "text",value: "country",},});		 Property: fields
var dropDownListObject = new ej.dropdowns.DropDownList({fields: { text: 'Game', value: 'Id' },});dropDownListObject.appendTo('#ddlelement');
Query Property: query
$('#dropdown1').ejDropDownList({query: ej.Query().requiresCount();});		 Property: query
var dropDownListObject = new ej.dropdowns.DropDownList({query: new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6),});dropDownListObject.appendTo('#ddlelement');
Begin event Event :actionBegin
$('#dropdown1').ejDropDownList({actionBegin : function (args) {/*Do your changes */}});		 Event : actionBegin
var dropDownListObject = new ej.dropdowns.DropDownList({actionBegin: "actionBegin"});dropDownListObject.appendTo('#ddlelement');
Complete event Event: actionComplete
$('#dropdown1').ejDropDownList({actionComplete : function (args) {/*Do your changes */}});		 Event: actionComplete
var dropDownListObject = new ej.dropdowns.DropDownList({actionComplete: "actionComplete"});dropDownListObject.appendTo('#ddlelement');
Failure event Event: actionFailure
$('#dropdown1').ejDropDownList({actionFailure : function (args) {/*Do your changes */}});		 Event: actionFailure
var dropDownListObject = new ej.dropdowns.DropDownList({actionFailure: "actionFailure"});dropDownListObject.appendTo('#ddlelement');
Success event Event: actionSuccess
$('#dropdown1').ejDropDownList({actionSuccess : function (args) {/*Do your changes */}});		 Not Applicable
Data binding event Event: dataBound
$('#dropdown1').ejDropDownList({dataBound : function (args) {/*Do your changes */}});		 Event: dataBind
var dropDownListObject = new ej.dropdowns.DropDownList({dataBind: "dataBind"});dropDownListObject.appendTo('#ddlelement');

Filtering

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: enableFilterSearch
$('#dropdown1').ejDropDownList({enableFilterSearch : true,});		 Property: allowFiltering
var dropDownListObject = new ej.dropdowns.DropDownList({allowFiltering: true});dropDownListObject.appendTo('#ddlelement');
Server filtering Property: enableServerFiltering
$('#dropdown1').ejDropDownList({enableServerFiltering : true,});		 Property: allowFiltering
var dropDownListObject = new ej.dropdowns.DropDownList({allowFiltering: true});dropDownListObject.appendTo('#ddlelement');
Filter type Property: filterType
$('#dropdown1').ejDropDownList({fiterType : ej.FilterType.Contains,});		 https://ej2.syncfusion.com/javascript/demos/#/material/drop-down-list/filtering.html
No Records Template Not Applicable Property: noRecordsTemplate
var dropDownListObject = new ej.dropdowns.DropDownList({noRecordsTemplate: "<span class='norecord'> NO DATA AVAILABLE</span>"});dropDownListObject.appendTo('#ddlelement');
Filter Bar watermark text Not Applicable Property: filterBarPlaceholder
var dropDownListObject = new ej.dropdowns.DropDownList({filterBarPlaceholder: "search"});dropDownListObject.appendTo('#ddlelement');
Ignore casing and diacritics Not Applicable Property: ignoreAccent
var dropDownListObject = new ej.dropdowns.DropDownList({ignoreAccent: true});dropDownListObject.appendTo('#ddlelement');
Incremental search Property: enableIncrementalSearch
$('#dropdown1').ejDropDownList({enableIncrementalSearch : true,});		 By default it is true
Case sensitivity Property: caseSensitiveSearch
$('#dropdown1').ejDropDownList({caseSensitiveSearch : true,});		 https://ej2.syncfusion.com/javascript/demos/#/material/drop-down-list/filtering.html
Search event Event: search
$('#dropdown1').ejDropDownList({search : function (args) {/*Do your changes */}});		 Event: filtering
var dropDownListObject = new ej.dropdowns.DropDownList({filtering: "search"});dropDownListObject.appendTo('#ddlelement');

Template

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: template
$("#dropdown").ejDropDownList({template: '<div class="flag ${flag}"> </div>' + '<div class="txt"> ${text} </div>', width: "200px"});		 Property: itemTemplate
var dropDownListObject = new ej.dropdowns.DropDownList({itemTemplate: "<span><span class='name'>${FirstName}</span><span class ='city'>${City}</span></span>"});dropDownListObject.appendTo('#ddlelement');
Group Template Not Applicable Property: groupTemplate
var dropDownListObject = new ej.dropdowns.DropDownList({ groupTemplate: "<strong>${City}</strong>"});dropDownListObject.appendTo('#ddlelement');
ValueTemplate Not Applicable Property: valueTemplate
var dropDownListObject = new ej.dropdowns.DropDownList({valueTemplate: "<span>${FirstName} - ${City}</span>"});dropDownListObject.appendTo('#ddlelement');
Header Template Property: headerTemplate
$("#dropdown").ejDropDownList({ headerTemplate: "<div class='header'><span class='flag-head'>Flag</span> <span class='con-head'>Countries</span> </div>"});		 Property: headerTemplate
var dropDownListObject = new ej.dropdowns.DropDownList({headerTemplate: "<span class='head'><span class='name'>Name</span><span class='city'>City</span></span>",});dropDownListObject.appendTo('#ddlelement');
FooterTemplate Not applicable Property: footerTemplate
var dropDownListObject = new ej.dropdowns.DropDownList({footerTemplate: "<span class='foot'> Total list items: " + sportsData.length + "</span>"});dropDownListObject.appendTo('#ddlelement');
No records Template Not applicable Property: noRecordsTemplate
var dropDownListObject = new ej.dropdowns.DropDownList({noRecordsTemplate: "<span class='norecord'> NO DATA AVAILABLE</span>"});dropDownListObject.appendTo('#ddlelement');
Action failure Template Not applicable Property: actionFailureTemplate
var dropDownListObject = new ej.dropdowns.DropDownList({actionFailureTemplate: "<span class='action-failure'> Data fetch get fails</span>"});dropDownListObject.appendTo('#ddlelement');

Virtual Scrolling

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: allowVirtualScrolling
$('#dropdown1').ejDropDownList({allowVirtualScrolling : true,});		 Not applicable

Applying CSS

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: cssClass
$('#dropdown1').ejDropDownList({cssClass : "customClass",});		 Property: cssClass
var dropDownListObject = new ej.dropdowns.DropDownList({cssClass: "customClass"});dropDownListObject.appendTo('#ddlelement');
showRoundedCorner Property: showRoundedCorner
$('#dropdown1').ejDropDownList({showRoundedCorner : true,});		 Property: cssClass
var dropDownListObject = new ej.dropdowns.DropDownList({cssClass: "customClass"});dropDownListObject.appendTo('#ddlelement');

Sorting

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: enableSorting
$('#dropdown1').ejDropDownList({enableSorting : true,});		 Acheivable through sortOrder property
Order of sorting Property: sortOrder
$('#dropdown1').ejDropDownList({sortOrder : ej.sortOrder.Descending,});		 Property: sortOrder
var dropDownListObject = new ej.dropdowns.DropDownList({sortOrder: "Ascending"});dropDownListObject.appendTo('#ddlelement');
Behavior API in Essential JS 1 API in Essential JS 2
Popup height Property: popupHeight
$('#dropdown1').ejDropDownList({popupHeight : "500px",});		 Property: popupHeight
var dropDownListObject = new ej.dropdowns.DropDownList({popupHeight: "300px"});dropDownListObject.appendTo('#ddlelement');
Popup width Property: popupWidth
$('#dropdown1').ejDropDownList({popupWidth : "500px",});		 Property: popupWidth
var dropDownListObject = new ej.dropdowns.DropDownList({popupWidth: "400px"});dropDownListObject.appendTo('#ddlelement');
Popup show on load Property: showPopupOnLoad
$('#dropdown1').ejDropDownList({showPopupOnLoad : true,});		 By default, the data load on demand.
enableAnimation Property: enableAnimation
$('#dropdown1').ejDropDownList({enableAnimation : true,});		 Not applicable
Popup resizing Property: enablePopupResize
$('#dropdown1').ejDropDownList({enablePopupResize : true,})		 Not applicable
Maximum Popup height Property: maxPopupHeight
$('#dropdown1').ejDropDownList({maxPopupHeight : "500px",});		 Not applicable
Minimum Popup height Property: minPopupHeight
$('#dropdown1').ejDropDownList({minPopupHeight : "500px",});
});		 Not applicable
Maximum Popup width Property: maxPopupWidth
$('#dropdown1').ejDropDownList({maxPopupWidth : "500px",});		 Not applicable
Minimum Popup width Property: minPopupWidth
$('#dropdown1').ejDropDownList({minPopupWidth : "500px",});		 Not applicable
Loading data Property: loadOnDemand
$('#dropdown1').ejDropDownList({loadOnDemand : true,});		 By default, it is true
Popup showing manually Method: showPopup
$('#dropdown').ejDropDownList('showPopup')		 Method: showPopup
var dropDownListObject = new ej.dropdowns.DropDownList();dropDownListObject.appendTo('#ddlelement')
dropDownListObject.showPopup();
Popup hiding manually Method: hidePopup
$('#dropdown').ejDropDownList('hidePopup')		 Method: hidePopup
var dropDownListObject = new ej.dropdowns.DropDownList();dropDownListObject.appendTo('#ddlelement')
dropDownListObject.hidePopup();
Before Popup hide event Event: beforePopupHide
$('#dropdown1').ejDropDownList({beforePopupHide : function (args) {/*Do your changes */}});		 Not applicable
Before Popup shown event Event: beforePopupShown
$('#dropdown1').ejDropDownList({beforePopupShown : function (args) {/*Do your changes */}});		 Event: beforeOpen
var dropDownListObject = new ej.dropdowns.DropDownList({beforeOpen: "open"});dropDownListObject.appendTo('#ddlelement');
Popup hide event Event: popupHide
$('#dropdown1').ejDropDownList({popupHide : function (args) {/*Do your changes */}});		 Event: close
var dropDownListObject = new ej.dropdowns.DropDownList({close: "close"});dropDownListObject.appendTo('#ddlelement');
Popup resize event Event: popupResize
$('#dropdown1').ejDropDownList({popupResize : function (args) {/*Do your changes */}});		 Not applicable
Popup resize start event Event: popupResizeStart
$('#dropdown1').ejDropDownList({popupResizeStart : function (args) {/*Do your changes */}});		 Not applicable
Popup resize stop event Event: popupResizeStop
$('#dropdown1').ejDropDownList({popupResizeStop : function (args) {/*Do your changes */}});		 Not applicable
Popup shown event Event: popupShown
$('#dropdown1').ejDropDownList({popupShown : function (args) {/*Do your changes */}});		 Event: open
var dropDownListObject = new ej.dropdowns.DropDownList({open: "open"});dropDownListObject.appendTo('#ddlelement');

Placeholder

Behavior API in Essential JS 1 API in Essential JS 2
Watermark text Property: watermarkText
$('#dropdown1').ejDropDownList({watermarkText : "Select"});		 Property: placeholder
var dropDownListObject = new ej.dropdowns.DropDownList({placeholder: "select"});dropDownListObject.appendTo('#ddlelement');
Floating of watermark text Not applicable Property: floatLabelType
var dropDownListObject = new ej.dropdowns.DropDownList({floatLabelType: "Auto"});dropDownListObject.appendTo('#ddlelement');

Grouping

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: fields.groupBy
$('#dropdown1').ejDropDownList({fields: {groupBy: "text"},});		 Property: fields.groupBy
>var dropDownListObject = new ej.dropdowns.DropDownList({fields: { groupBy: 'ContactName',}});dropDownListObject.appendTo('#ddlelement');
Group Template Not applicable Property: groupTemplate
var dropDownListObject = new ej.dropdowns.DropDownList({ groupTemplate: "<strong>${City}</strong>"});dropDownListObject.appendTo('#ddlelement');

Accessibility

Behavior API in Essential JS 1 API in Essential JS 2
Globalization Property: locale
$('#dropdown1').ejDropDownList({locale: "fr-FE"});		 Property: locale
var dropDownListObject = new ej.dropdowns.DropDownList({ locale: "fr-FE"});dropDownListObject.appendTo('#ddlelement');
Rtl support Property: enableRTL
$('#dropdown1').ejDropDownList({enableRTL: true,});		 Property: enableRtl
var dropDownListObject = new ej.dropdowns.DropDownList({ enableRtl: true});dropDownListObject.appendTo('#ddlelement');

Miscellaneous

Behavior API in Essential JS 1 API in Essential JS 2
Enable/disable Property: enabled
$('#dropdown1').ejDropDownList({enabled: true,});		 Property: enabled
var dropDownListObject = new ej.dropdowns.DropDownList({ enabled: true});dropDownListObject.appendTo('#ddlelement');
Read only Property: readOnly
$('#dropdown1').ejDropDownList({readOnly: true,});
Property: readOnly
var dropDownListObject = new ej.dropdowns.DropDownList({ readOnly: true});dropDownListObject.appendTo('#ddlelement');
Persistence of data Property: enablePersistence
$('#dropdown1').ejDropDownList({enablePersistence: true,});		 Property: enablePersistence
var dropDownListObject = new ej.dropdowns.DropDownList({ enablePersistence: true});dropDownListObject.appendTo('#ddlelement');
Disable Method: disable
$('#dropdown').ejDropDownList('disable')		 Property: enabled
var dropDownListObject = new ej.dropdowns.DropDownList({ enabled:false});dropDownListObject.appendTo('#ddlelement');
Enable Method: enable
$('#dropdown').ejDropDownList('enable')		 Property: enabled
var dropDownListObject = new ej.dropdowns.DropDownList({ enabled: true});dropDownListObject.appendTo('#ddlelement');
Height Property: height
$('#dropdown1').ejDropDownList({height: "500px",});		 Property: height
var dropDownListObject = new ej.dropdowns.DropDownList({ height: "300px"});dropDownListObject.appendTo('#ddlelement');
Width Property: width
$('#dropdown1').ejDropDownList({width: "500px",});		 Property: width
var dropDownListObject = new ej.dropdowns.DropDownList({ width: "300px"});dropDownListObject.appendTo('#ddlelement');

Selection

Behavior API in Essential JS 1 API in Essential JS 2
Selecting particular index Property: selectedIndex
$('#dropdown1').ejDropDownList({selectedIndex: 3,});		 Property: index
var dropDownListObject = new ej.dropdowns.DropDownList({ index: 3});dropDownListObject.appendTo('#ddlelement');
Selecting particular value Property: value
$('#dropdown1').ejDropDownList({value: "data",});		 Property: value
var dropDownListObject = new ej.dropdowns.DropDownList({ value: "data"});dropDownListObject.appendTo('#ddlelement');
Selecting particular text Property: text
$('#dropdown1').ejDropDownList({text: "data",});		 Property: text
var dropDownListObject = new ej.dropdowns.DropDownList({ text: "data"});dropDownListObject.appendTo('#ddlelement');
Target id Property: targetId
$('#dropdown1').ejDropDownList({targetId: "Id",});		 Not applicable
Selecting item using text Method: selectItemByText
$('#dropdown').ejDropDownList('selectItemByText','car')		 Not applicable
Unselect item using text Method: unselectItemByText
$('#dropdown').ejDropDownList('unselectItemByText','car')		 Not applicable
Selecting item using value Method: selectItemByValue
$('#dropdown').ejDropDownList('selectItemByValue','car')		 Not applicable
Getting data by using value Method: getItemDataByValue
$('#dropdown').ejDropDownList('unselectItemByValue','car')		 Method: getDataByValue
var dropDownListObject = new ej.dropdowns.DropDownList();dropDownListObject.appendTo('#ddlelement')
dropDownListObject.getDataByValue();
Get selected value Method: getSelectedItem
$('#dropdown').ejDropDownList('getSelectedItem')		 Not applicable
Get selected text Method: getSelectedText
$('#dropdown').ejDropDownList('getSelectedText')		 Property: text
var dropDownListObject = new ej.dropdowns.DropDownList({text="data"});dropDownListObject.appendTo('#ddlelement')
Select event Event: select
$('#dropdown1').ejDropDownList({select : function (args) {/*Do your changes */}});		 Event: select
var dropDownListObject = new ej.dropdowns.DropDownList({select: "onSelect"});dropDownListObject.appendTo('#ddlelement')
Addition of Html attributes Property: htmlAttributes
$('#dropdown1').ejDropDownList({htmlAttributes: { disabled: "disabled"},});		 Property: htmlAttributes
var dropDownListObject = new ej.dropdowns.DropDownList({htmlAttributes:"attrib"});dropDownListObject.appendTo('#ddlelement')

Common

Behavior API in Essential JS 1 API in Essential JS 2
Adding new item Method : addItem
$('#dropdown').ejDropDownList("addItem", {text:"India"});		 Method: addItem
var dropDownListObject = new ej.dropdowns.DropDownList();dropDownListObject.appendTo('#ddlelement')
dropDownListObject.addItem("data");
Clearing the text Method : clearText
$('#dropdown').ejDropDownList('clearText')		 Property: value
var dropDownListObject = new ej.dropdowns.DropDownList({value:""});dropDownListObject.appendTo('#ddlelement')
Destroy the component Method : destroy
$('#dropdown').ejDropDownList('destroy')		 Method: destroy
var dropDownListObject = new ej.dropdowns.DropDownList();dropDownListObject.appendTo('#ddlelement')
dropDownListObject.destroy();
Getting the data Method : getListData
$('#dropdown').ejDropDownList('getListData')		 Method : getItems
var dropDownListObject = new ej.dropdowns.DropDownList();dropDownListObject.appendTo('#ddlelement')
dropDownListObject.getItems();
Create event Event: create
$('#dropdown1').ejDropDownList({create : function (args) {/*Do your changes */}});		 Event: created
var dropDownListObject = new ej.dropdowns.DropDownList({created:"create"});dropDownListObject.appendTo('#ddlelement')
Destroy event Event: destroy
$('#dropdown1').ejDropDownList({destroy : function (args) {/*Do your changes */}});		 Event: destroyed
var dropDownListObject = new ej.dropdowns.DropDownList({destroyed:"create"});dropDownListObject.appendTo('#ddlelement')
Cascade event Event: cascade
$('#dropdown1').ejDropDownList({cascade : function (args) {/*Do your changes */}});		 https://ej2.syncfusion.com/javascript/demos/#/material/drop-down-list/cascading.html
Change event Event: change
$('#dropdown1').ejDropDownList({change : function (args) {/*Do your changes */}});		 Event: change
var dropDownListObject = new ej.dropdowns.DropDownList({change:"create"});dropDownListObject.appendTo('#ddlelement')
Focus out event Event: focusOut
$('#dropdown1').ejDropDownList({focusOut : function (args) {/*Do your changes */}});		 Event: blur
var dropDownListObject = new ej.dropdowns.DropDownList({blur:"create"});dropDownListObject.appendTo('#ddlelement')
Focus in event Event: focusIn

$('#dropdown1').ejDropDownList({focusIn : function (args) {/*Do your changes */}});		 Event: focus
var dropDownListObject = new ej.dropdowns.DropDownList({focus:"create"});dropDownListObject.appendTo('#ddlelement')
Previous
Next