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<ej-combo-box datasource="(IEnumerable<CarsList>)ViewBag.datasource"></ej-combo-box> |
Property: dataSource<ejs-combobox dataSource="@ViewBag.data"></ejs-combobox> |
| Fields for mapping | Property: fields<ej-combo-box ><e-combo-box-fields text="text" /></ej-combo-box> |
Property: fields<ejs-combobox> <e-combobox-fields text="Game" value="Id"></e-combobox-fields></ejs-combobox> |
| Query | Property: query<ej-combo-box id="searchCustomer" query="ej.Query().from('Suppliers').select('SupplierID', 'ContactName')"/> |
Property: query<ejs-combobox query="@ViewBag.query"></ejs-combobox> |
| Begin event | Event:action-begin<ej-combo-box action-begin = "begin"/> |
Event: actionBegin<ejs-combobox actionBegin="actionBegin"></ejs-combobox> |
| Complete event | Event:action-complete<ej-combo-box action-complete = "complete"/> |
Event: actionComplete<ejs-combobox actionComplete="actionComplete"></ejs-combobox> |
| Failure event | Event:action-failure<ej-combo-box action-failure = "failure"/> |
Event: actionFailure<ejs-combobox actionFailure="actionFailure"></ejs-combobox> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: allow-filtering<ej-combo-box allow-filtering = "true"/> |
Property: allowFiltering<ejs-combobox allowFiltering="true"></ejs-combobox> |
| No records template | Property: no-records-template<ej-combo-box no-records-template="<span class='norecord'> NO DATA AVAILABLE</span>"/> |
Property: noRecordsTemplate<ejs-combobox noRecordsTemplate="<span class='norecord'> NO DATA AVAILABLE</span>"></ejs-combobox> |
| Ignore casing and diacritics | Not Applicable | Property: ignoreAccent<ejs-combobox ignoreAccent = "true"/> |
| Custom value addition | Property: allow-custom<ej-combo-box allow-custom = "true"/> |
Property: allowCustom<ejs-combobox allowCustom = "true"/> |
| Search event | Event: filtering<ej-combo-box filtering = "filtering"/> |
Event: filtering<ejs-combobox filtering = "onFiltering"/> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: item-template<ej-combo-box item-template="<div><img class='eimg' src='../images/combobox/${eimg}.png' alt='employee'/><div class='ename'> ${text} </div><div class='temp'> ${country} </div></div>"/> |
Property: itemTemplate<ejs-combobox itemTemplate="<div><img class='eimg' src='../images/combobox/${eimg}.png' alt='employee'/><div class='ename'> ${text} </div><div class='temp'> ${country} </div></div>"></ejs-combobox> |
| Group Template | Property: group-template<ej-combo-box group-template="<strong>${country}</strong>"/> |
Property: groupTemplate<ejs-combobox groupTemplate="<strong>${country}</strong>"></ejs-combobox> |
| ValueTemplate | Not Applicable | Property: valueTemplate<ejs-combobox valueTemplate="<span class='norecord'> NO DATA AVAILABLE</span>"></ejs-combobox> |
| Header Template | Property: header-template<ej-combo-box header-template="<div class='head'> Photo <span style='padding-left:42px'> Contact Info </span></div>"/> |
Property: headerTemplate<ejs-combobox headerTemplate="<div class='head'> Photo <span style='padding-left:42px'> Contact Info </span></div>"></ejs-combobox> |
| FooterTemplate | Property: footer-template<ej-combo-box footer-template="<div class='Foot'> Total Items Count: 5 </div>"/> |
Property: footerTemplate<ejs-combobox footerTemplate="<div class='Foot'> Total Items Count: 5 </div>"></ejs-combobox> |
| No records Template | Property: no-records-template<ej-combo-box no-records-template="<span class='norecord'> NO DATA AVAILABLE</span>"/> |
Property: noRecordsTemplate<ejs-combobox noRecordsTemplate="<span class='norecord'> NO DATA AVAILABLE</span>"></ejs-combobox> |
| Auto fill | Property: auto-fill<ej-combo-box auto-fill="true"/> |
Property: autofill<ejs-combobox autoFill="true"></ejs-combobox> |
| Action failure Template | Property: action-failure-template<ej-combo-box action-failure-template="<span class='action-failure'>Data fetch get fails</span>"/> |
Property: actionFailureTemplate<ejs-combobox actionFailureTemplate="<span class='action-failure'>Data fetch get fails</span>"></ejs-combobox> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: css-class <ej-combo-box css-class="customclass"/> |
Property: cssClass<ejs-combobox cssClass="customclass"></ejs-combobox> |
| width | Property: width <ej-combo-box width="200px"/> |
Property: width<ejs-combobox width="200px"></ejs-combobox> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: fields.groupBy<ej-combo-box><e-combo-box-fields group-by="SupplierID" /></ej-combo-box> |
Property: fields.groupBy<ejs-combobox> <e-combobox-fields groupBy="Id"></e-combobox-fields></ejs-combobox> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Globalizaation | Property: locale<ej-combo-box locale="fr-FE"/> |
Property: locale<ejs-combobox locale="fr-FE"/> |
| Rtl support | Property: enable-rtl<ej-combo-box enable-rtl="true"/> |
Property: enableRtl<ejs-combobox enableRtl="true"/> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Watermark text | Property: placeholder<ej-combo-box placeholder="select"/> |
Property: placeholder <ejs-combobox placeholder="select"/> |
| Floating of waterMarkText | Not applicable | Property: floatLabelType<ejs-combobox floatLabelType="Auto"/> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enable/disable | Property: enabled<ej-combo-box enabled="true"></ej-combo-box> |
Property: enabled<ejs-combobox enabled="true"/> |
| Read only | Property: read-only<ej-combo-box read-only="true"></ej-combo-box> |
Property: readOnly<ejs-combobox readOnly="true"/> |
| Addition of Html attributes | Property: html-Attributes<ej-combo-box html-attributes="@ViewBag.attr"></ej-combo-box> |
Property: htmlAttributes<ejs-combobox htmlAttributes="@ViewBag.attr"/> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Order of sorting | Property: sort-order<ej-combo-box sort-order="Ascending"></ej-combo-box> |
Property: sortOrder<ejs-combobox sortOrder="Ascending"/> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Selecting particular index | Property: index<ej-combo-box index="1"></ej-combo-box> |
Property: index<ejs-combobox index="1"/> |
| Selecting particular value | Property: value<ej-combo-box value="car"></ej-combo-box> |
Property: value<ejs-combobox value="car"/> |
| Selecting particular text | Property: text <ej-combo-box text="data"></ej-combo-box> |
Property: text<ejs-combobox text="data"/> |
| Getting data by using value | Method: getItemDataByValue<ej-combo-box></ej-combo-box> $(‘#dropdown’).ejDropDownList(‘getItemDataByValue’,“data”) |
Method: getDataByValue<ejs-combobox />var cmbObj = document.getElementById(combobox).ej2_Instances[0]; cmbObj.getDataByValue(“data”); |
| Select event | Event: select<ej-combo-box select="onSelect"></ej-combo-box> |
Event: select<ejs-combobox select="onSelect"/> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Popup height | Property: popup-height<ej-combo-box popup-height="300px"></ej-combo-box> |
Event:popupHeight<ejs-combobox popupHeight="300px"/> |
| Popup width | Property: popup-width<ej-combo-box popup-width="300px"></ej-combo-box> |
Event:popupWidth<ejs-combobox popupWidth="300px"/> |
| Popup showing manually | Method: showPopup<ej-combo-box></ej-combo-box> $(‘#dropdown’).ejComboBox(“showPopup”); |
Method: showPopup<ejs-combobox />var cmbObj = document.getElementById(combobox).ej2_Instances[0]; cmbObj.showPopup(); |
| Popup hiding manually | Method: hidePopup<ej-combo-box></ej-combo-box> $(‘#dropdown’).ejComboBox(“hidePopup”); |
Method: hidePopup<ejs-combobox />var cmbObj = document.getElementById(combobox).ej2_Instances[0]; cmbObj.hidePopup(); |
| Popup hide event | Event: close<ej-combo-box close="onClose"></ej-combo-box> |
Event: close<ejs-combobox close="onClose"/> |
| Popup shown event | Event: open<ej-combo-box open="open"></ej-combo-box> |
Event: open<ejs-combobox open="onopen"/> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Adding new item | Method : addItem<ej-combo-box></ej-combo-box> $(‘#dropdown’).ejComboBox(“addItem”, { text :“India”}); |
Method: addItem<ejs-combobox />var cmbObj = document.getElementById(combobox).ej2_Instances[0]; cmbObj.addItem({Id: ‘id’, Game: ‘Golf’},2); |
| Focus out event | Not applicable | Event: blur<ejs-combobox blur="onblur"/> |
| Focus in event | Event: focus<ej-combo-box focus="focus"></ej-combo-box> |
Event: focusIn<ejs-combobox focusIn="onopen"/> |
| Focus out | Method: focusOut<ej-combo-box></ej-combo-box> $(‘#dropdown’).ejComboBox(“focusOut”); |
Method: focusOut<ejs-combobox />var cmbObj = document.getElementById(combobox).ej2_Instances[0]; cmbObj.focusOut(); |
| Focus in | Method: focusIn<ej-combo-box></ej-combo-box> $(‘#dropdown’).ejComboBox(“focusIn”); |
Method: focusIn<ejs-combobox />var cmbObj = document.getElementById(combobox).ej2_Instances[0]; cmbObj.focusIn(); |
| Getting the data | Method : getItems<ej-combo-box></ej-combo-box> $(‘#dropdown’).ejComboBox(“getItems”); |
Method: getItems<ejs-combobox />var cmbObj = document.getElementById(combobox).ej2_Instances[0]; cmbObj.getItems(); |
| Create event | Event: create<ej-combo-box create="create"></ej-combo-box> |
Event: created<ejs-combobox created="created"/> |
| Change event | Event: change<ej-combo-box change="change"></ej-combo-box> |
Event: change<ejs-combobox change="change"/> |
| Custom value event | Event: custom-value-specifier<ej-combo-box custom-value-specifier="customValueSpecifier"></ej-combo-box> |
Event: customValueSpecifier<ejs-combobox customValueSpecifier="event"/> |