Ej1 api migration in EJ2 JavaScript Drop down list control

12 Apr 20258 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') |