This article describes the API migration process of DropDownList component from Essential JS 1 to Essential JS 2.
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: dataSource <input type="text" id="dropdown1" ej-dropdownlist [dataSource]="empList"> |
Property: dataSource <ejs-dropdownlist id="state" [dataSource]="stateData"></ejs-dropdownlist> |
| Fields for mapping | Property: fields <input type="text" id="dropdown1" ej-dropdownlist [fields]="fieldsvalues"> |
Property: fields <ejs-dropdownlist id="state" [fields]="stateFields"></ejs-dropdownlist> |
| Query | Property: query <input type="text" id="dropdown1" ej-dropdownlist [query]="query"> |
Property: Query<ejs-dropdownlist id="state" [query]='query'></ejs-dropdownlist> |
| Begin event | Event :actionBegin <input type="text" id="dropdown1" ej-dropdownlist (actionBegin)="begin($event)"> |
Event : actionBegin <ejs-dropdownlist id="state" (actionBegin)="begin($event)"></ejs-dropdownlist> |
| Complete event | Event: actionComplete <input type="text" id="dropdown1" ej-dropdownlist (actionComplete)="empList($event)"> |
Event: actionComplete <ejs-dropdownlist id="state" (actionComplete)="complete($event)"></ejs-dropdownlist> |
| Failure event | Event: actionFailure <input type="text" id="dropdown1" ej-dropdownlist (actionFailure)="empList($event)"> |
Event: actionFailure <ejs-dropdownlist id="state" (actionFailure)="failure($event)"></ejs-dropdownlist> |
| Success event | Event: actionSuccess <input type="text" id="dropdown1" ej-dropdownlist (actionSuccess)="success($event)"> |
Not Applicable |
| Data binding event | Event: dataBound <input type="text" id="dropdown1" ej-dropdownlist (dataBound)="databinding($event)"> |
Event: dataBind <ejs-dropdownlist id="state" (dataBind)="dataBind($event)"></ejs-dropdownlist> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: enableFilterSearch <input type="text" id="dropdown1" ej-dropdownlist [enableFilterSearch]="enableFilterSearch"> |
Property: allowFiltering <ejs-dropdownlist id="state" [allowFiltering]="allowFiltering"></ejs-dropdownlist> |
| Server filtering | Property: enableServerFiltering <input type="text" id="dropdown1" ej-dropdownlist [enableServerFiltering]="enableServerFiltering"> |
Property: allowFiltering <ejs-dropdownlist id="state" [allowFiltering]="allowFiltering"></ejs-dropdownlist> |
| Filter type | Property: filterType <input type="text" id="dropdown1" ej-dropdownlist [filterType]="filtertype"> |
https://ej2.syncfusion.com/angular/demos/#/material/drop-down-list/filtering |
| No Records Template | Not Applicable | Property: noRecordsTemplate <ejs-dropdownlist id="state" [noRecordsTemplate]="noRecordsTemplate"></ejs-dropdownlist> |
| Filter Bar watermark text | Not Applicable | Property: filterBarPlaceholder <ejs-dropdownlist id="state" [filterBarPlaceholder]="filterBarPlace"></ejs-dropdownlist> |
| Ignore casing and diacritics | Not Applicable | Property: ignoreAccent<ejs-dropdownlist id="state" [ignoreAccent]="ignoreAccent"></ejs-dropdownlist> |
| Incremental search | Property: enableIncrementalSearch<input type="text" id="dropdown1" ej-dropdownlist [enableIncrementatSearch]="enableIncrementalSearch"> |
By default it is true |
| Case sensitivity | Property: caseSensitiveSearch<input type="text" id="dropdown1" ej-dropdownlist [caseSensitiveSearch]="caseSensitiveSearch"> |
https://ej2.syncfusion.com/angular/demos/#/material/drop-down-list/filtering |
| Search event | Event: search <input type="text" id="dropdown1" ej-dropdownlist (search)="search($event)"> |
Event: filtering <ejs-dropdownlist id="state" (filtering)="filtering($event)"></ejs-dropdownlist> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: template <input type="text" id="dropdown1" ej-dropdownlist [template]="template"> |
Property: itemTemplate<ejs-dropdownlist id="state" [itemTemplate]="itemTemplate"></ejs-dropdownlist> |
| Group Template | Not Applicable | Property: groupTemplate <ejs-dropdownlist id="state" [groupTemplate]="groupTemplate"></ejs-dropdownlist> |
| ValueTemplate | Not Applicable | Property: valueTemplate <ejs-dropdownlist id="state" [valueTemplate]="valueTemplate"></ejs-dropdownlist> |
| Header Template | Property: headerTemplate <input type="text" id="dropdown1" ej-dropdownlist [headerTemplate]="headertemplate"> |
Property: headerTemplate <ejs-dropdownlist id="state" [headerTemplate]="headerTemplate"></ejs-dropdownlist> |
| FooterTemplate | Not applicable | Property: footerTemplate <ejs-dropdownlist id="state" [footerTemplate]="footerTemplate"></ejs-dropdownlist> |
| No records Template | Not applicable | Property: noRecordsTemplate <ejs-dropdownlist id="state" [noRecordsTemplate]="noRecordsTemplate"></ejs-dropdownlist> |
| Action failure Template | Not applicable | Property: actionFailureTemplate <ejs-dropdownlist id="state" [actionFailureTemplate]="actionFailureTemplate"></ejs-dropdownlist> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: allowVirtualScrolling <input type="text" id="dropdown1" ej-dropdownlist [allowVirtualScrolling]="caseSensitiveSearch"> |
Not applicable |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: cssClass <input type="text" id="dropdown1" ej-dropdownlist [cssClass]="customClass"> |
Property: cssClass <ejs-dropdownlist id="state" [cssClass]="cssClass"></ejs-dropdownlist> |
| showRoundedCorner | Property: showRoundedCorner <input type="text" id="dropdown1" ej-dropdownlist [showRoundedCorner]="showRoundedCorner"> |
Property: cssClass <ejs-dropdownlist id="state" [cssClass]="cssClass"></ejs-dropdownlist> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: enableSorting <input type="text" id="dropdown1" ej-dropdownlist [enableSorting]="enableSorting"> |
Enabled only on using sortorder Property |
| Order of sorting | Property: sortOrder <input type="text" id="dropdown1" ej-dropdownlist [sortOrder]="sortOrder"> |
Property: sortOrder <ejs-dropdownlist id="state" [sortOrder]="sortOrder"></ejs-dropdownlist> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Popup height | Property: popupHeight <input type="text" id="dropdown1" ej-dropdownlist [popupHeight]="popupHeight"> |
Property: popupHeight <ejs-dropdownlist id="state" [floatLabelType]="floatLabelType"></ejs-dropdownlist> |
| Popup width | Property: popupWidth <input type="text" id="dropdown1" ej-dropdownlist [popupWidth]="popupWidth"> |
Property: popupWidth <ejs-dropdownlist id="state" [floatLabelType]="floatLabelType"></ejs-dropdownlist> |
| Popup show on load | Property: showPopupOnLoad <input type="text" id="dropdown1" ej-dropdownlist [showPopupOnLoad]="showPopupOnLoad"> |
By default, the data load on demand. |
| enableAnimation | Property: enableAnimation <input type="text" id="dropdown1" ej-dropdownlist [enableAnimation]="enableAnimation"> |
Not applicable |
| Popup resizing | Property: enablePopupResize <input type="text" id="dropdown1" ej-dropdownlist [enablePopupResize]="enablePopupResize"> |
Not applicable |
| Maximum Popup height | Property: maxPopupHeight <input type="text" id="dropdown1" ej-dropdownlist [maxPopupHeight]="maxPopupHeight"> |
Not applicable |
| Minimum Popup height | Property: minPopupHeight<input type="text" id="dropdown1" ej-dropdownlist [minPopupHeight]="minPopupHeight">}); |
Not applicable |
| Maximum Popup width | Property: maxPopupWidth <input type="text" id="dropdown1" ej-dropdownlist [maxPopupWidth]="maxPopupWidth"> |
Not applicable |
| Minimum Popup width | Property: minPopupWidth <input type="text" id="dropdown1" ej-dropdownlist [minPopupWidth]="minPopupWidth"> |
Not applicable |
| Loading data | Property: loadOnDemand <input type="text" id="dropdown1" ej-dropdownlist [loadOnDemand]="loadOnDemand"> |
By default, it is true |
| Popup showing manually | Method: showPopup <input type="text" id="dropdown1" ej-dropdownlist>$('#dropdown1').ejDropDownList('showPopup') |
Method: showPopup <ejs-dropdownlist id="state" #sample></ejs-dropdownlist>@ViewChild('sample') public ddlObj: DropDownListComponent;ddlObj.showPopup(); |
| Popup hiding manually | Method: hidePopup <input type="text" id="dropdown1" ej-dropdownlist>$('#dropdown1').ejDropDownList('hidePopup') |
Method: hidePopup<ejs-dropdownlist id="state" #sample></ejs-dropdownlist>@ViewChild('sample') public ddlObj: DropDownListComponent;ddlObj.hidePopup(); |
| Before Popup hide event | Event: beforePopupHide <input type="text" id="dropdown1" ej-dropdownlist (beforePopupHide)="beforePopupHide($event)"> |
Not applicable |
| Before Popup shown event | Event: beforePopupShown<input type="text" id="dropdown1" ej-dropdownlist (beforePopupShown)="beforePopupShown($event)"> |
Event: beforeOpen <input type="text" id="dropdown1" ej-dropdownlist (beforeOpen)="beforeOpen($event)"> |
| Popup hide event | Event: popupHide<input type="text" id="dropdown1" ej-dropdownlist (popupHide)="popupHide($event)"> |
Event: close <input type="text" id="dropdown1" ej-dropdownlist (close)="close($event)"> |
| Popup resize event | Event: popupResize<input type="text" id="dropdown1" ej-dropdownlist [popupResize]="popupResize($event)"> |
Not applicable |
| Popup resize start event | Event: popupResizeStart<input type="text" id="dropdown1" ej-dropdownlist (popupResizeStart)="popupResizeStart($event)"> |
Not applicable |
| Popup resize stop event | Event: popupResizeStop<input type="text" id="dropdown1" ej-dropdownlist (popupResizeStop)="popupResizeStop($event)"> |
Not applicable |
| Popup shown event | Event: popupShown<input type="text" id="dropdown1" ej-dropdownlist (popupShown)="popupShown($event)"> |
Event: open<input type="text" id="dropdown1" ej-dropdownlist (open)="open($event)"> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Watermark text | Property: watermarkText <input type="text" id="dropdown1" ej-dropdownlist [watermarkText]="watermarkText"> |
Property: placeholder <ejs-dropdownlist id="state" [placeholder]="placeholder"></ejs-dropdownlist> |
| Floating of watermark text | Not applicable | Property: floatLabelType <ejs-dropdownlist id="state" [floatLabelType]="floatLabelType"></ejs-dropdownlist> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: fields.groupBy <input type="text" id="dropdown1" ej-dropdownlist [fields]="fields"> |
Property: fields.groupBy@Html.EJS().DropDownList("games").Fields(new DropDownListFieldSettings { GroupBy = "Game" }).Render() |
| Group Template | Not applicable | Property: groupTemplate<ejs-dropdownlist id="state" [groupTemplate]="groupTemplate"></ejs-dropdownlist> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Globalization | Property: locale<input type="text" id="dropdown1" ej-dropdownlist [locale]="locale"> |
Property: locale<ejs-dropdownlist id="state" [locale]="locale"></ejs-dropdownlist> |
| Rtl support | Property: enableRtl<input type="text" id="dropdown1" ej-dropdownlist [enableRtl]="enableRtl"> |
Property: enableRtl<ejs-dropdownlist id="state" [enableRtl]="enableRtl"></ejs-dropdownlist> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enable/disable | Property: enabled<input type="text" id="dropdown1" ej-dropdownlist [enabled]="enabled"> |
Property: enabled <ejs-dropdownlist id="state" [enabled]="enabled"></ejs-dropdownlist> |
| Read only | Property: readOnly <input type="text" id="dropdown1" ej-dropdownlist [readOnly]="readOnly"> |
Property: readOnly <ejs-dropdownlist id="state" [readOnly]="readOnly"></ejs-dropdownlist> |
| Persistence of data | Property: enablePersistence<input type="text" id="dropdown1" ej-dropdownlist [enablePersistence]="enablePersistence"> |
Property: enablePersistence<ejs-dropdownlist id="state" [enablePersistence]="enablePersistence"></ejs-dropdownlist> |
| Disable | Method: disable<input type="text" id="dropdown1" ej-dropdownlist >$('#dropdown1').ejDropDownList('disable') |
Property: enabled<ejs-dropdownlist id="state" [enabled]="enabled"></ejs-dropdownlist> |
| Enable | Method: enable<input type="text" id="dropdown1" ej-dropdownlist >$('#dropdown').ejDropDownList('enable') |
Property: enabled<ejs-dropdownlist id="state" [enabled]="enabled"></ejs-dropdownlist> |
| Height | Property: height <input type="text" id="dropdown1" ej-dropdownlist [height]="height"> |
Property: height <ejs-dropdownlist id="state" [height]="height"></ejs-dropdownlist> |
| Width | Property: width <input type="text" id="dropdown1" ej-dropdownlist [width]="width"> |
Property: width <ejs-dropdownlist id="state" [width]="width"></ejs-dropdownlist> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Selecting particular index | Property: selectedIndex<input type="text" id="dropdown1" ej-dropdownlist [selectedIndex]="selectedIndex"> |
Property: index<ejs-dropdownlist id="state" [index]="index"></ejs-dropdownlist> |
| Selecting particular value | Property: value<input type="text" id="dropdown1" ej-dropdownlist [value]="value"> |
Property: value<ejs-dropdownlist id="state" [value]="text"></ejs-dropdownlist> |
| Selecting particular text | Property: text <input type="text" id="dropdown1" ej-dropdownlist [text]="text"> |
Property: text<ejs-dropdownlist id="state" [text]="text"></ejs-dropdownlist> |
| Target id | Property: targetId <input type="text" id="dropdown1" ej-dropdownlist [targetId]="targetid"> |
Not applicable |
| Selecting item using text | Method: selectItemByText <input type="text" id="dropdown1" ej-dropdownlist >$('#dropdown1').ejDropDownList('selectItemByText','car') |
Not applicable |
| Unselect item using text | Method: unselectItemByText<input type="text" id="dropdown1" ej-dropdownlist >$('#dropdown1').ejDropDownList('unselectItemByText','car') |
Not applicable |
| Selecting item using value | Method: selectItemByValue<input type="text" id="dropdown1" ej-dropdownlist >$('#dropdown').ejDropDownList('selectItemByValue','car') |
Not applicable |
| Getting data by using value | Method: getItemDataByValue<input type="text" id="dropdown1" ej-dropdownlist >$('#dropdown').ejDropDownList('unselectItemByValue','car') |
Method: getDataByValue<ejs-dropdownlist #sample id="state" ></ejs-dropdownlist>@ViewChild('sample') public ddlObj: DropDownListComponent;ddlObj.getItemDataByValue("data"); |
| Get selected value | Method: getSelectedItem<input type="text" id="dropdown1" ej-dropdownlist >$('#dropdown').ejDropDownList('getSelectedItem') |
Not applicable |
| Get selected text | Method: getSelectedText<input type="text" id="dropdown1" ej-dropdownlist >$('#dropdown').ejDropDownList('getSelectedText') |
Property: text<ejs-dropdownlist id="state" [text]="text"></ejs-dropdownlist> |
| Select event | Event: select<input type="text" id="dropdown1" ej-dropdownlist select="onSelect"> |
Event: select<ejs-dropdownlist id="state" (select)="select($event)"></ejs-dropdownlist> |
| Addition of Html attributes | Property: htmlAttributes<input type="text" id="dropdown1" ej-dropdownlist [htmlAttribute]="attribute"> |
Property: htmlAttributes<ejs-dropdownlist id="state" [htmlAttributes]="htmlAttributes"></ejs-dropdownlist> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Adding new item | Method : addItem<input type="text" id="dropdown1" ej-dropdownlist >$('#dropdown1').ejDropDownList("addItem", {text:"India"}); |
Method: addItem<ejs-dropdownlist #sample/>@ViewChild('sample') public ddlObj: DropDownListComponent;ddlObj.addItem({Id: 'game4', Game: 'Golf'}, 2); |
| Clearing the text | Method : clearText<input type="text" id="dropdown1" ej-dropdownlist >$('#dropdown').ejDropDownList('clearText') |
Property: value<ejs-dropdownlist id="state" [value]=""></ejs-dropdownlist> |
| Destroy the component | Method : destroy<input type="text" id="dropdown1" ej-dropdownlist >$('#dropdown1').ejDropDownList('destroy') |
Method: destroy<ejs-dropdownlist #sample/>@ViewChild('sample') public ddlObj: DropDownListComponent;ddlObj.destroy; |
| Getting the data | Method : getListData<input type="text" id="dropdown1" ej-dropdownlist >$('#dropdown1').ejDropDownList('getListData') |
Method : getItems<ejs-dropdownlist #sample/>@ViewChild('sample') public ddlObj: DropDownListComponent;ddlObj.getItems; |
| Create event | Event: create<input type="text" id="dropdown1" ej-dropdownlist (create)="created($event)"> |
Event: created<ejs-dropdownlist (created) ="created($event)" /> |
| Destroy event | Event: destroy<input type="text" id="dropdown1" ej-dropdownlist (destroy)="destroy($event)"> |
Event: destroyed<ejs-dropdownlist (destroyed) ="destroy($event)" /> |
| Cascade event | Event: cascade<input type="text" id="dropdown1" ej-dropdownlist (cascade)="cascade($event)"> |
https://ej2.syncfusion.com/angular/demos/#/material/drop-down-list/cascading |
| Change event | Event: change<input type="text" id="dropdown1" ej-dropdownlist (change)="change($event)"> |
Event: change<ejs-dropdownlist (change) ="change($event)" /> |
| Focus out event | Event: focusOut<input type="text" id="dropdown1" ej-dropdownlist (focusOut)="focusOut($event)"> |
Event: blur<ejs-dropdownlist (blur) ="blur($event)" /> |
| Focus in event | Event: focusIn<input type="text" id="dropdown1" ej-dropdownlist (focusIn)="focusIn($event)"> |
Event: focus<ejs-dropdownlist (focus) ="onfofus($event)" /> |