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

Migration from Essential JS 1 in JavaScript DropDownList control

08 May 2023 / 11 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
var sample = new ej.DropDownList($('#dropdown1'),{dataSource: List});		 Property: dataSource
let dropDownListObject = new DropDownList({dataSource: sportsData,});dropDownListObject.appendTo('#ddlelement');
Fields for mapping Property: fields
var sample = new ej.DropDownList($('#dropdown1'),{fields: {text: "text",value: "country",},});		 Property: fields
let dropDownListObject = new DropDownList({fields: { text: 'Game', value: 'Id' },});dropDownListObject.appendTo('#ddlelement');
Query Property: query
var sample = new ej.DropDownList($('#dropdown1'),{query: ej.Query().requiresCount();});		 Property: query
let dropDownListObject = new DropDownList({query: new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6),});dropDownListObject.appendTo('#ddlelement');
Begin event Event :actionBegin
var sample = new ej.DropDownList($('#dropdown1'),{actionBegin : function (args) {/*Do your changes */}});		 Event : actionBegin
let dropDownListObject = new DropDownList({actionBegin: "actionBegin"});dropDownListObject.appendTo('#ddlelement');
Complete event Event: actionComplete
var sample = new ej.DropDownList($('#dropdown1'),{actionComplete : function (args) {/*Do your changes */}});		 Event: actionComplete
let dropDownListObject = new DropDownList({actionComplete: "actionComplete"});dropDownListObject.appendTo('#ddlelement');
Failure event Event: actionFailure
var sample = new ej.DropDownList($('#dropdown1'),{actionFailure : function (args) {/*Do your changes */}});		 Event: actionFailure
let dropDownListObject = new DropDownList({actionFailure: "actionFailure"});dropDownListObject.appendTo('#ddlelement');
Success event Event: actionSuccess
var sample = new ej.DropDownList($('#dropdown1'),{actionSuccess : function (args) {/*Do your changes */}});		 Not Applicable
Data binding event Event: dataBound
var sample = new ej.DropDownList($('#dropdown1'),{dataBound : function (args) {/*Do your changes */}});		 Event: dataBind
let dropDownListObject = new DropDownList({dataBind: "dataBind"});dropDownListObject.appendTo('#ddlelement');

Filtering

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

Template

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

Applying CSS

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

Sorting

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

Placeholder

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

Grouping

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

Accessibility

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

Miscellaneous

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

Selection

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

Common

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

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