EJ1 API Migration in Angular DropDownList Component
27 Sep 202518 minutes to read
This article describes the API migration process of the 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 <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. The success result is returned within the actionComplete event argument. |
| Data binding event |
Event: dataBound <input type="text" id="dropdown1" ej-dropdownlist (dataBound)="databinding($event)">
|
Event: dataBound <ejs-dropdownlist id="state" (dataBound)="dataBound($event)"></ejs-dropdownlist>
|
Filtering
| 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]="true"></ejs-dropdownlist>
|
| Server filtering |
Property: enableServerFiltering <input type="text" id="dropdown1" ej-dropdownlist [enableServerFiltering]="enableServerFiltering">
|
Property: allowFiltering. Server filtering is handled within the filtering event. <ejs-dropdownlist id="state" [allowFiltering]="true" (filtering)="onFiltering($event)"></ejs-dropdownlist>
|
| Filter type |
Property: filterType <input type="text" id="dropdown1" ej-dropdownlist [filterType]="filtertype">
|
Property: filterType. <ejs-dropdownlist id="state" filterType="Contains"></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]="true"></ejs-dropdownlist>
|
| Incremental search |
Property: enableIncrementalSearch<input type="text" id="dropdown1" ej-dropdownlist [enableIncrementalSearch]="enableIncrementalSearch">
|
Incremental search is enabled by default. |
| Case sensitivity |
Property: caseSensitiveSearch<input type="text" id="dropdown1" ej-dropdownlist [caseSensitiveSearch]="caseSensitiveSearch">
|
Property: ignoreCase (set to false). <ejs-dropdownlist id="state" [ignoreCase]="false"></ejs-dropdownlist>
|
| 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>
|
Template
| 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>
|
| Value Template | 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>
|
| Footer Template | 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>
|
Virtual Scrolling
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
|---|---|---|
| Default |
Property: allowVirtualScrolling <input type="text" id="dropdown1" ej-dropdownlist [allowVirtualScrolling]="true">
|
Property: enableVirtualization <ejs-dropdownlist id="state" [enableVirtualization]="true"></ejs-dropdownlist>
|
Applying CSS
| 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">
|
Assign the e-corner class to the cssClass property. <ejs-dropdownlist id="state" cssClass="e-corner"></ejs-dropdownlist>
|
Sorting
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
|---|---|---|
| Default |
Property: enableSorting <input type="text" id="dropdown1" ej-dropdownlist [enableSorting]="enableSorting">
|
In EJ2, sorting is enabled when the sortOrder property is set. |
| Order of sorting |
Property: sortOrder <input type="text" id="dropdown1" ej-dropdownlist [sortOrder]="sortOrder">
|
Property: sortOrder <ejs-dropdownlist id="state" [sortOrder]="sortOrder"></ejs-dropdownlist>
|
Popup
| 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" [popupHeight]="'200px'"></ejs-dropdownlist>
|
| Popup width |
Property: popupWidth <input type="text" id="dropdown1" ej-dropdownlist [popupWidth]="popupWidth">
|
Property: popupWidth <ejs-dropdownlist id="state" [popupWidth]="'250px'"></ejs-dropdownlist>
|
| Popup show on load |
Property: showPopupOnLoad <input type="text" id="dropdown1" ej-dropdownlist [showPopupOnLoad]="showPopupOnLoad">
|
Call the showPopup() method in the created event. |
| enableAnimation |
Property: enableAnimation <input type="text" id="dropdown1" ej-dropdownlist [enableAnimation]="enableAnimation">
|
Not applicable. Animation is enabled by default. |
| 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">
|
Data is loaded on demand by default. |
| Popup showing manually |
Method: showPopup $('#dropdown1').ejDropDownList('showPopup')
|
Method: showPopup @ViewChild('sample') public ddlObj: DropDownListComponent;this.ddlObj.showPopup();
|
| Popup hiding manually |
Method: hidePopup $('#dropdown1').ejDropDownList('hidePopup')
|
Method: hidePopup@ViewChild('sample') public ddlObj: DropDownListComponent;this.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 <ejs-dropdownlist (beforeOpen)="beforeOpen($event)"></ejs-dropdownlist>
|
| Popup hide event |
Event: popupHide<input type="text" id="dropdown1" ej-dropdownlist (popupHide)="popupHide($event)">
|
Event: close <ejs-dropdownlist (close)="close($event)"></ejs-dropdownlist>
|
| 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<ejs-dropdownlist (open)="open($event)"></ejs-dropdownlist>
|
Placeholder
| 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>
|
Grouping
| 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<ejs-dropdownlist id="games" [fields]="{ groupBy: 'Category' }"></ejs-dropdownlist>
|
| Group Template | Not applicable |
Property: groupTemplate<ejs-dropdownlist id="state" [groupTemplate]="groupTemplate"></ejs-dropdownlist>
|
Accessibility
| 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>
|
Miscellaneous
| 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$('#dropdown1').ejDropDownList('disable')
|
Set the enabled property to false.<ejs-dropdownlist id="state" [enabled]="false"></ejs-dropdownlist>
|
| Enable |
Method: enable$('#dropdown').ejDropDownList('enable')
|
Set the enabled property to true.<ejs-dropdownlist id="state" [enabled]="true"></ejs-dropdownlist>
|
| Height |
Property: height <input type="text" id="dropdown1" ej-dropdownlist [height]="height">
|
Not Applicable. Set the height via CSS. |
| Width |
Property: width <input type="text" id="dropdown1" ej-dropdownlist [width]="width">
|
Property: width <ejs-dropdownlist id="state" [width]="width"></ejs-dropdownlist>
|
Selection
| 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]="value"></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 $('#dropdown1').ejDropDownList('selectItemByText','car')
|
Not applicable. Set the text property directly. |
| Unselect item using text |
Method: unselectItemByText$('#dropdown1').ejDropDownList('unselectItemByText','car')
|
Not applicable. Set the value or index to null. |
| Selecting item using value |
Method: selectItemByValue$('#dropdown').ejDropDownList('selectItemByValue','car')
|
Not applicable. Set the value property directly. |
| Getting data by using value |
Method: getItemDataByValue$('#dropdown').ejDropDownList('getItemDataByValue','car')
|
Method: getDataByValue@ViewChild('sample') public ddlObj: DropDownListComponent;this.ddlObj.getDataByValue("val");
|
| Get selected value |
Method: getSelectedItem$('#dropdown').ejDropDownList('getSelectedItem')
|
Not applicable. Use the value property directly. |
| Get selected text |
Method: getSelectedText$('#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>
|
Common
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
|---|---|---|
| Adding new item |
Method: addItem$('#dropdown1').ejDropDownList("addItem", {text:"India"});
|
Method: addItem@ViewChild('sample') public ddlObj: DropDownListComponent;this.ddlObj.addItem({Id: 'game4', Game: 'Golf'}, 2);
|
| Clearing the text |
Method: clearText$('#dropdown').ejDropDownList('clearText')
|
Method: clear@ViewChild('sample') public ddlObj: DropDownListComponent;this.ddlObj.clear();
|
| Destroy the component |
Method: destroy$('#dropdown1').ejDropDownList('destroy')
|
Method: destroy@ViewChild('sample') public ddlObj: DropDownListComponent;this.ddlObj.destroy();
|
| Getting the data |
Method: getListData$('#dropdown1').ejDropDownList('getListData')
|
Method : getItems@ViewChild('sample') public ddlObj: DropDownListComponent;let items = this.ddlObj.getItems();
|
| Create event |
Event: create<input type="text" id="dropdown1" ej-dropdownlist (create)="created($event)">
|
Event: created<ejs-dropdownlist (created)="created($event)"></ejs-dropdownlist>
|
| Destroy event |
Event: destroy<input type="text" id="dropdown1" ej-dropdownlist (destroy)="destroy($event)">
|
Event: destroyed<ejs-dropdownlist (destroyed)="destroy($event)"></ejs-dropdownlist>
|
| Cascade event |
Event: cascade<input type="text" id="dropdown1" ej-dropdownlist (cascade)="cascade($event)">
|
Use the change event of the parent DropDownList to update the child DropDownList’s data source. |
| Change event |
Event: change<input type="text" id="dropdown1" ej-dropdownlist (change)="change($event)">
|
Event: change<ejs-dropdownlist (change)="change($event)"></ejs-dropdownlist>
|
| Focus out event |
Event: focusOut<input type="text" id="dropdown1" ej-dropdownlist (focusOut)="focusOut($event)">
|
Event: blur<ejs-dropdownlist (blur)="blur($event)"></ejs-dropdownlist>
|
| Focus in event |
Event: focusIn<input type="text" id="dropdown1" ej-dropdownlist (focusIn)="focusIn($event)">
|
Event: focus<ejs-dropdownlist (focus)="onfocus($event)"></ejs-dropdownlist>
|