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
<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"/>
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"/>