Contents
- DataBinding
- Filtering
- Template
- Applying CSS
- Grouping
- Accessibility
- Placeholder
- Miscellaneous
- Sorting
- Selection
- Popup
- Common
Having trouble getting help?
Contact Support
Contact Support
Migration from Essential® JS 1
8 Dec 202411 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"/>
|