Ej1 api migration in Angular Drop down list component

4 Apr 202318 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>
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)" />