This article describes the API migration process of ComboBox component from Essential JS 1 to Essential JS 2.
| 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> |
| 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)"/> |
| 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> |
| 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> |
| 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> |
| 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"/> |
| 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"/> |
| 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"/> |
| 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"/> |
| 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)"/> |
| 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)"/> |