Migration from Essential JS 1
21 Feb 202211 minutes to read
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<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>
|
Filtering
| 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"/>
|
Template
| 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>
|
Applying CSS
| 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>
|
Grouping
| 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>
|
Accessibility
| 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"/>
|
Placeholder
| 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"/>
|
Miscellaneous
| 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"/>
|
Sorting
| 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"/>
|
Selection
| 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"/>
|
Popup
| 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"/>
|
Common
| 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"/>
|