Contents
- DataBinding
- Filtering
- Template
- Virtual Scrolling
- Applying CSS
- Sorting
- Popup
- Placeholder
- Grouping
- Accessibility
- Miscellaneous
- Selection
- Common
Having trouble getting help?
Contact Support
Contact Support
Ej1 api migration in Angular Drop down list component
5 Apr 202518 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 <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>
|
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]="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>
|
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>
|
| 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>
|
Virtual Scrolling
| 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 |
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">
|
Property: cssClass <ejs-dropdownlist id="state" [cssClass]="cssClass"></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">
|
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>
|
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" [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)">
|
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@Html.EJS().DropDownList("games").Fields(new DropDownListFieldSettings { GroupBy = "Game" }).Render()
|
| 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<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>
|
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]="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>
|
Common
| 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)" />
|