Search results

Migration from Essential JS 1

This article describes the API migration process of ComboBox 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 id="dropdown1" ej-combobox [dataSource]="data" />
Property: dataSource
<ejs-combobox [dataSource]="dataSource"></ejs-combobox>
Fields for mapping Property: fields
<input id="dropdown1" ej-combobox [fields]="fieldsvalues"/>
Property: fields
<ejs-combobox [fields]="fields"></ejs-combobox>
Query Property: query
<input id="dropdown1" ej-combobox [query]="query"/>
Property: query
<ejs-combobox [query]="query"></ejs-combobox>
Begin event Event:actionBegin
<input id="dropdown1" ej-combobox (actionBegin)="actionBegin($event)"/>
Event: actionBegin
<ejs-combobox (actionBegin)="actionBegin($event)"></ejs-combobox>
Complete event Event:actionComplete
<input id="dropdown1" ej-combobox (actionComplete)="actionComplete($event)"/>
Event: actionComplete
<ejs-combobox (actionComplete)="actionComplete($event)"></ejs-combobox>
Failure event Event:actionFailure
<input id="dropdown1" ej-combobox (actionFailure)="actionFailure($event)"/>
Event: actionFailure
<ejs-combobox (actionFailure)="actionFailure($event)"></ejs-combobox>

Filtering

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: allowFiltering
<input id="dropdown1" ej-combobox [allowFiltering]="allowFiltering"/>
Property: allowFiltering
<ejs-combobox [allowFiltering]="true"></ejs-combobox>
No records template Property: noRecordsTemplate
<input id="dropdown1" ej-combobox [noRecordsTemplate]="noRecordsTemplate"/>
Property: noRecordsTemplate
<ejs-combobox [noRecordsTemplate]="template"></ejs-combobox>
Ignore casing and diacritics Not Applicable Property: ignoreAccent
<ejs-combobox [ignoreAccent] = "true"/>
Custom value addition Property: allowCustom
<input id="dropdown1" ej-combobox [allowCustom]="allowCustom"/>
https://ej2.syncfusion.com/angular/demos/#/material/combo-box/custom-value
Search event Event: filtering
<input id="dropdown1" ej-combobox (filtering) = "onFiltering($event)"/>
Event: filtering
<ejs-combobox (filtering) = "onFiltering($event)"/>

Template

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: itemTemplate
<input id="dropdown1" ej-combobox [itemTemplate]="itemTemplate"/>
Property: itemTemplate
<ejs-combobox [itemTemplate]="itemTemplate"></ejs-combobox>
Group Template Property: groupTemplate
<input id="dropdown1" ej-combobox [groupTemplate]="groupTemplate"/>
Property: groupTemplate
<ejs-combobox [groupTemplate]="groupTemplate"></ejs-combobox>
ValueTemplate Not Applicable Property: valueTemplate
<ejs-combobox [valueTemplate] = "valueTemplate"/>
Header Template Property: headerTemplate
<input id="dropdown1" ej-combobox [headerTemplate]="headerTemplate"/>
Property: headerTemplate
<ejs-combobox [headerTemplate]="headerTemplate"></ejs-combobox>
FooterTemplate Property: footerTemplate
<input id="dropdown1" ej-combobox [footerTemplate]="footerTemplate"/>
Property: footerTemplate
<ejs-combobox [footerTemplate]="footerTemplate"></ejs-combobox>
No records Template Property: noRecordsTemplate
<input id="dropdown1" ej-combobox [noRecordsTemplate]="noRecordsTemplate"/>
Property: noRecordsTemplate
<ejs-combobox [noRecordsTemplate]="noRecordsTemplate"></ejs-combobox>
Auto fill Property: autoFill
<input id="dropdown1" ej-combobox [autoFill]="autoFill"/>
Property: autoFill
<ejs-combobox [autoFill]="true"></ejs-combobox>
Action failure Template Property: actionFailureTemplate
<input id="dropdown1" ej-combobox [actionFailureTemplate]="actionFailureTemplate"/>
Property: actionFailureTemplate
<ejs-combobox [actionFailureTemplate]="actionFailureTemplate"></ejs-combobox>

Applying CSS

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: cssClass
<input id="dropdown1" ej-combobox [cssClass]="cssClass"/>
Property: cssClass
<ejs-combobox [cssClass]="customclass"></ejs-combobox>
width Property: width
<input id="dropdown1" ej-combobox [width]="width"/>
Property: width
<ejs-combobox [width]="200px"></ejs-combobox>

Grouping

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: fields
<input id="dropdown1" ej-combobox [fields]="fields"/>
Property: fields
<ejs-combobox [fields]="field"></ejs-combobox>

Accessibility

Behavior API in Essential JS 1 API in Essential JS 2
Globalization Property: locale
<input id="dropdown1" ej-combobox [locale]="locale"/>
Property: locale
<ejs-combobox [locale]="locale"/>
Rtl support Property: enableRtl
<input id="dropdown1" ej-combobox [enableRtl]="enableRtl"/>
Property: enableRtl
<ejs-combobox [enableRtl]="true"/>

Placeholder

Behavior API in Essential JS 1 API in Essential JS 2
Watermark text Property: placeholder
<input id="dropdown1" ej-combobox [placeholder]="placeholder"/>

Property: placeholder
<ejs-combobox [placeholder]="select"/>
Floating of watermark text Not applicable Property: floatLabelType
<ejs-combobox [floatLabelType]="floatLabelType"/>

Miscellaneous

Behavior API in Essential JS 1 API in Essential JS 2
Enable/disable Property: enabled
<input id="dropdown1" ej-combobox [enabled]="enabled"/>
Property: enabled
<ejs-combobox [enabled]="true"/>
Read only Property: readOnly
<input id="dropdown1" ej-combobox [readOnly]="readOnly"/>
Property: readOnly
<ejs-combobox [readOnly]="true"/>
Addition of Html attributes Property: htmlAttributes
<input id="dropdown1" ej-combobox [htmlAttributes]="htmlAttributes"/>
Property: htmlAttributes
<ejs-combobox [htmlAttributes]="htmlAttributes"/>

Sorting

Behavior API in Essential JS 1 API in Essential JS 2
Order of sorting Property: sortOrder
<input id="dropdown1" ej-combobox [sortOrder]="sortOrder"/>
Property: sortOrder
<ejs-combobox [sortOrder]="sortOrder"/>

Selection

Behavior API in Essential JS 1 API in Essential JS 2
Selecting particular index Property: index
<input id="dropdown1" ej-combobox [index]="index"/>
Property: index
<ejs-combobox [index]="index"/>
Selecting particular value Property: value
<input id="dropdown1" ej-combobox [value]="value"/>
Property: value
<ejs-combobox [value]="data"/>
Selecting particular text Property: text
<input id="dropdown1" ej-combobox [text]="text"/>
Property: text
<ejs-combobox [text]="data"/>
Getting data by using value Method: getItemDataByValue
<input id="dropdown1" ej-combobox />

$(‘#dropdown’).ejDropDownList(‘getItemDataByValue’,“data”)
Method: getDataByValue
<ejs-combobox #sample id="combobox"/>

@ViewChild('sample') public cmbObj: ComboBoxComponent;

cmbObj.getDataByValue(“data”);
Select event Event: select
<input id="dropdown1" ej-combobox (select)="onSelect($event)"/>
Event: select
<ejs-combobox (select)="onSelect($event)"/>
Behavior API in Essential JS 1 API in Essential JS 2
Popup height Property: popupHeight
<input id="dropdown1" ej-combobox [popupHeight]="popupHeight"/>
Property:popupheight
<ejs-combobox [popupHeight]="300px"/>
Popup width Property: popupWidth
<input id="dropdown1" ej-combobox [popupWidth]="popupWidth"/>
Property:popupWidth
<ejs-combobox [popupWidth]="300px"/>
Popup showing manually Method: showPopup
<input id="dropdown1" ej-combobox />

$(‘#dropdown’).ejComboBox(“showPopup”);
Method: showPopup
<ejs-combobox #sample id="combobox"/>

@ViewChild('sample') public cmbObj: ComboBoxComponent;

cmbObj.showPopup();
Popup hiding manually Method: hidePopup
<input id="dropdown1" ej-combobox />

$(‘#dropdown’).ejComboBox(“hidePopup”);
Method: hidePopup
<ejs-combobox #sample id="combobox"/>

@ViewChild('sample') public cmbObj: ComboBoxComponent;

cmbObj.hidePopup();
Popup hide event Event: close
<input id="dropdown1" ej-combobox (close)="onClose($event)"/>
Event: close
<ejs-combobox (close)="onClose($event)"/>
Popup shown event Event: open
<input id="dropdown1" ej-combobox (open)="onopen($event)"/>
Event: open
<ejs-combobox (open)="onopen($event)"/>

Common

Behavior API in Essential JS 1 API in Essential JS 2
Adding new item Method : addItem
<input id="dropdown1" ej-combobox />

$(‘#dropdown’).ejComboBox(“addItem”, { text :“India”});
Method: addItem
<ejs-combobox #sample id="combobox"/>

@ViewChild('sample') public cmbObj: ComboBoxComponent;

cmbObj.addItem({Id: ‘id’, Game: ‘Golf’},2);
Focus out event Not applicable Event: blur
<ejs-combobox (blur)="onblur($event)"/>
Focus in event Event: focus
<input id="dropdown1" ej-combobox (focus)="focus($event)"/>
Event: focusIn
<ejs-combobox (focusIn)="onopen($event)"/>
Focus out Method: focusOut
<input id="dropdown1" ej-combobox />

$(‘#dropdown’).ejComboBox(“focusOut”);
Method: focusOut
<ejs-combobox #sample id="combobox"/>

@ViewChild('sample') public cmbObj: ComboBoxComponent;

cmbObj.focusOut();
Focus in Method: focusIn
<input id="dropdown1" ej-combobox />

$(‘#dropdown’).ejComboBox(“focusIn”);
Method: focusIn
<ejs-combobox #sample id="combobox"/>

@ViewChild('sample') public cmbObj: ComboBoxComponent;

cmbObj.focusIn();
Getting the data Method : getItems
<input id="dropdown1" ej-combobox />

$(‘#dropdown’).ejComboBox(“getItems”);
Method: getItems
<ejs-combobox #sample id="combobox"/>

@ViewChild('sample') public cmbObj: ComboBoxComponent;

cmbObj.getItems();
Create event Event: create
<input id="dropdown1" ej-combobox (create)="create($event)"/>
Event: created
<ejs-combobox (created)="created($event)"/>
Change event Event: change
<input id="dropdown1" ej-combobox (change)="change($event)"/>
Event: change
<ejs-combobox (change)="change($event)"/>
Custom value event Event: customValueSpecifier
<input id="dropdown1" ej-combobox (customValueSpecifier)="customValueSpecifier($event)"/>
Event: customValueSpecifier
<ejs-combobox (customValueSpecifier)="customValueSpecifier($event)"/>