Ej1 api migration in EJ2 TypeScript Drop down list control

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