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
$('#dropdown1').ejComboBox({dataSource: List});
Property: DataSource
var comboBoxObject = new ej.dropdowns.ComboBox({dataSource: sportsData,});comboBoxObject.appendTo('#cmbelement');
Fields for mapping Property: fields
$('#dropdown1').ejComboBox({fields: { text: "text", value: "empid" }});
Property: fields
var comboBoxObject = new ej.dropdowns.ComboBox({fields: { text: "text", value: "empid" },});comboBoxObject.appendTo('#cmbelement');
Query Property: query
$('#dropdown1').ejComboBox({query: ej.Query().requiresCount()})
Property: query
var comboBoxObject = new ej.dropdowns.ComboBox({query: new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6),});comboBoxObject.appendTo('#cmbelement');
Begin event Event:actionBegin
$('#dropdown1').ejComboBox({actionBegin: "begin"});
Event: actionBegin
var comboBoxObject = new ej.dropdowns.ComboBox({actionBegin: "begin",});comboBoxObject.appendTo('#cmbelement');
Complete event Event:actionComplete
$('#dropdown1').ejComboBox({actionComplete: "begin"});
Event: actionComplete
var comboBoxObject = new ej.dropdowns.ComboBox({actionComplete: "begin",});comboBoxObject.appendTo('#cmbelement');
Failure event Event:actionFailure
$('#dropdown1').ejComboBox({actionFailure: "begin"});
Event: actionFailure
var comboBoxObject = new ej.dropdowns.ComboBox({actionFailure: "begin",});comboBoxObject.appendTo('#cmbelement');

Filtering

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: allowFiltering
$('#dropdown1').ejComboBox({allowFiltering: true});
Property: allowFiltering
var comboBoxObject = new ej.dropdowns.ComboBox({allowFiltering: true,});comboBoxObject.appendTo('#cmbelement');
No records template Property: noRecordsTemplate
$('#dropdown1').ejComboBox({allowFiltering: "<span class='norecord'> NO DATA AVAILABLE</span>"});
Property: noRecordsTemplate
var comboBoxObject = new ej.dropdowns.ComboBox({allowFiltering: true,});comboBoxObject.appendTo('#cmbelement');
Ignore casing and diacritics Not Applicable Property: ignoreAccent
var comboBoxObject = new ej.dropdowns.ComboBox({ignoreAccent: true,});comboBoxObject.appendTo('#cmbelement');
Custom value addition Property: allowCustom
$('#dropdown1').ejComboBox({allowCustom: true});
https://ej2.syncfusion.com/demos/#/material/combo-box/custom-value.html
Search event Event: filtering
$('#dropdown1').ejComboBox({filtering: "filtering"});
Event: filtering
var comboBoxObject = new ej.dropdowns.ComboBox({filtering: "filtering",});comboBoxObject.appendTo('#cmbelement');

Template

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: itemTemplate
$('#dropdown1').ejComboBox({itemTemplate: "<span class='item' ><span class='name'>${FirstName}</span><span class='city'>${City}</span></span>"});
Property: itemTemplate
var comboBoxObject = new ej.dropdowns.ComboBox({itemTemplate: "<span class='item' ><span class='name'>${FirstName}</span><span class='city'>${City}</span></span>",});comboBoxObject.appendTo('#cmbelement');
Group Template Property: groupTemplate
$('#dropdown1').ejComboBox({groupTemplate: "<strong>${City}</strong>"});
Property: groupTemplate
var comboBoxObject = new ej.dropdowns.ComboBox({groupTemplate: "<strong>${City}</strong>",});comboBoxObject.appendTo('#cmbelement');
ValueTemplate Not Applicable Property: valueTemplate
var comboBoxObject = new ej.dropdowns.ComboBox({valueTemplate: "<span>${FirstName} - ${City}</span>",});comboBoxObject.appendTo('#cmbelement');
Header Template Property: headerTemplate
$('#dropdown1').ejComboBox({headerTemplate: "<span class='head'><span class='name'>Name</span><span class='city'>City</span></span>"});
Property: headerTemplate
var comboBoxObject = new ej.dropdowns.ComboBox({headerTemplate: "<span class='head'><span class='name'>Name</span><span class='city'>City</span></span>",});comboBoxObject.appendTo('#cmbelement');
FooterTemplate Property: footerTemplate
$('#dropdown1').ejComboBox({footerTemplate: "<span class='foot'> Total list items: " + sportsData.length + "</span>"});
Property: footerTemplate
var comboBoxObject = new ej.dropdowns.ComboBox({footerTemplate: "<span class='foot'> Total list items: " + sportsData.length + "</span>",});comboBoxObject.appendTo('#cmbelement');
No records Template Property: noRecordsTemplate
$('#dropdown1').ejComboBox({noRecordsTemplate: "<span class='norecord'> NO DATA AVAILABLE</span>"});
Property: noRecordsTemplate
var comboBoxObject = new ej.dropdowns.ComboBox({noRecordsTemplate: "<span class='norecord'> NO DATA AVAILABLE</span>",});comboBoxObject.appendTo('#cmbelement');
Auto fill Property: autoFill
$('#dropdown1').ejComboBox({autoFill: true});
Property: autoFill
var comboBoxObject = new ej.dropdowns.ComboBox({autoFill: true,});comboBoxObject.appendTo('#cmbelement');
Action failure Template Property: actionFailureTemplate
$('#dropdown1').ejComboBox({actionFailureTemplate: "<span class='action-failure'> Data fetch get fails</span>"});
Property: actionFailureTemplate
var comboBoxObject = new ej.dropdowns.ComboBox({actionFailureTemplate: "<span class='action-failure'> Data fetch get fails</span>",});comboBoxObject.appendTo('#cmbelement');

Applying CSS

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: cssClass
$('#dropdown1').ejComboBox({cssClass: "className"});
Property: cssClass
var comboBoxObject = new ej.dropdowns.ComboBox({cssClass: "className",});comboBoxObject.appendTo('#cmbelement');
width Property: width
$('#dropdown1').ejComboBox({width: "500px"});
Property: Width
var comboBoxObject = new ej.dropdowns.ComboBox({width: "500px",});comboBoxObject.appendTo('#cmbelement');

Grouping

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: fields
$('#dropdown1').ejComboBox({fields: { groupBy: "text", value: "empid" }});
Property: fields
var comboBoxObject = new ej.dropdowns.ComboBox({fields: { groupBy: "text", value: "empid" },});comboBoxObject.appendTo('#cmbelement');

Accessibility

Behavior API in Essential JS 1 API in Essential JS 2
Globalization Property: locale
$('#dropdown1').ejComboBox({locale: true});
Property: locale
var comboBoxObject = new ej.dropdowns.ComboBox({locale: true});comboBoxObject.appendTo('#cmbelement');
Rtl support Property: enableRtl
$('#dropdown1').ejComboBox({enableRtl: true});
Property: enableRtl
var comboBoxObject = new ej.dropdowns.ComboBox({enableRtl: true,});comboBoxObject.appendTo('#cmbelement');

Placeholder

Behavior API in Essential JS 1 API in Essential JS 2
Watermark text Property: placeholder
$('#dropdown1').ejComboBox({placeholder: "Select"});

Property: placeholder
var comboBoxObject = new ej.dropdowns.ComboBox({placeholder: "Select",});comboBoxObject.appendTo('#cmbelement');
Floating of watermark text Not applicable Property: floatLabelType
var comboBoxObject = new ej.dropdowns.ComboBox({floatLabelType: "Auto",});comboBoxObject.appendTo('#cmbelement');

Miscellaneous

Behavior API in Essential JS 1 API in Essential JS 2
Enable/disable Property: enabled
$('#dropdown1').ejComboBox({enabled: true});
Property: enabled
var comboBoxObject = new ej.dropdowns.ComboBox({enabled: true,});comboBoxObject.appendTo('#cmbelement');
Read only Property: readOnly
$('#dropdown1').ejComboBox({readOnly: true});
Property: readOnly
var comboBoxObject = new ej.dropdowns.ComboBox({readOnly: true,});comboBoxObject.appendTo('#cmbelement');
Addition of Html attributes Property: htmlAttributes
$('#dropdown1').ejComboBox({htmlAttributes: { disabled: "disabled"}});
Property: htmlAttributes
var comboBoxObject = new ej.dropdowns.ComboBox({htmlAttributes: { disabled: "disabled"},});comboBoxObject.appendTo('#cmbelement');

Sorting

Behavior API in Essential JS 1 API in Essential JS 2
Order of sorting Property: sortOrder
$('#dropdown1').ejComboBox({sortOrder: SortOrder.Ascending});
Property: sortOrder
var comboBoxObject = new ej.dropdowns.ComboBox({sortOrder: SortOrder.Ascending,});comboBoxObject.appendTo('#cmbelement');

Selection

Behavior API in Essential JS 1 API in Essential JS 2
Selecting particular index Property: index
$('#dropdown1').ejComboBox({index: 1});
Property: index
var comboBoxObject = new ej.dropdowns.ComboBox({index: 1,});comboBoxObject.appendTo('#cmbelement');
Selecting particular value Property: value
$('#dropdown1').ejComboBox({value: "data"});
Property: value
var comboBoxObject = new ej.dropdowns.ComboBox({value: "data",});comboBoxObject.appendTo('#cmbelement');
Selecting particular text Property: text
$('#dropdown1').ejComboBox({text: "data"});
Property: text
var comboBoxObject = new ej.dropdowns.ComboBox({text: "data",});comboBoxObject.appendTo('#cmbelement');
Getting data by using value Method: getItemDataByValue
$('#dropdown1').ejComboBox({});

$(‘#dropdown1’).ejComboBox(‘getItemDataByValue’,“data”)
Method: getDataByValue
var comboBoxObject = new ej.dropdowns.ComboBox({enabled: true,});comboBoxObject.appendTo('#cmbelement');

comboBoxObject.getDataByValue(“data”);
Select event Event: select
$('#dropdown1').ejComboBox({select: "onSelect"});
Event: select
var comboBoxObject = new ej.dropdowns.ComboBox({select: "onSelect",});comboBoxObject.appendTo('#cmbelement');
Behavior API in Essential JS 1 API in Essential JS 2
Popup height Property: popupHeight
$('#dropdown1').ejComboBox({popupHeight: "300px"});
Property:popupheight
var comboBoxObject = new ej.dropdowns.ComboBox({popupHeight: "300px",});comboBoxObject.appendTo('#cmbelement');
Popup width Property: popupWidth
$('#dropdown1').ejComboBox({popupWidth: "300px"})
Property:popupWidth
var comboBoxObject = new ej.dropdowns.ComboBox({popupWidth: "300px",});comboBoxObject.appendTo('#cmbelement');
Popup showing manually Method: showPopup
$('#dropdown1').ejComboBox({})

$('#dropdown1').ejComboBox("showPopup");
Method: showPopup
var comboBoxObject = new ej.dropdowns.ComboBox({});comboBoxObject.appendTo('#cmbelement');

cmbObj.showPopup();
Popup hiding manually Method: hidePopup
$('#dropdown1').ejComboBox({})

$(‘#dropdown1’).ejComboBox(“hidePopup”;
Method: hidePopup
var comboBoxObject = new ej.dropdowns.ComboBox({popupHeight: "300px",});comboBoxObject.appendTo('#cmbelement');

comboBoxObject.hidePopup();
Popup hide event Event: close
$('#dropdown1').ejComboBox({close: "onClose"})
Event: close
var comboBoxObject = new ej.dropdowns.ComboBox({close: "onclose",});comboBoxObject.appendTo('#cmbelement');
Popup shown event Event: open
$('#dropdown1').ejComboBox({open: "onOpen"})
Event: open
var comboBoxObject = new ej.dropdowns.ComboBox({open: "onOpen",});comboBoxObject.appendTo('#cmbelement');

Common

Behavior API in Essential JS 1 API in Essential JS 2
Adding new item Method : addItem
$('#dropdown1').ejComboBox({})

$(‘#dropdown1’).ejComboBox(“addItem”,{ text :“India”});
Method: addItem
var comboBoxObject = new ej.dropdowns.ComboBox({});comboBoxObject.appendTo('#cmbelement');

comboBoxObject.addItem({Id: ‘id’, Game: ‘Golf’},2);
Focus out event Not applicable Event: Blur
var comboBoxObject = new ej.dropdowns.ComboBox({blur: "onclose",});comboBoxObject.appendTo('#cmbelement');
Focus in event Event: Focus
$('#dropdown1').ejComboBox({focus:"focus"})
Event: focusIn
var comboBoxObject = new ej.dropdowns.ComboBox({focusIn: "focus",});comboBoxObject.appendTo('#cmbelement');
Focus out Method: focusOut
$('#dropdown1').ejComboBox({})

$(‘#dropdown1’).ejComboBox(“focusOut”);
Method: focusOut
var comboBoxObject = new ej.dropdowns.ComboBox({open: "onOpen",});comboBoxObject.appendTo('#cmbelement');

comboBoxObject.focusOut();
Focus in Method: focusIn
$('#dropdown1').ejComboBox({})

$(‘#dropdown1’).ejComboBox(“focusIn”);
Method: focusIn
var comboBoxObject = new ej.dropdowns.ComboBox({});comboBoxObject.appendTo('#cmbelement');

comboBoxObject.focusIn();
Getting the data Method : getItems
$('#dropdown1').ejComboBox({})

$(‘#dropdown1’).ejComboBox(“getItems”);
Method: getItems
var comboBoxObject = new ej.dropdowns.ComboBox({});comboBoxObject.appendTo('#cmbelement');

comboBoxObject.getItems();
Create event Event: create
$('#dropdown1').ejComboBox({create:"onCreate"})
Event: created
var comboBoxObject = new ej.dropdowns.ComboBox({created: "oncreate",});comboBoxObject.appendTo('#cmbelement');
Change event Event: change
$('#dropdown1').ejComboBox({focus:"focus"})
Event: change
var comboBoxObject = new ej.dropdowns.ComboBox({change: "onchange",});comboBoxObject.appendTo('#cmbelement');
Custom value event Event: customValueSpecifier
$('#dropdown1').ejComboBox({customValueSpecifier:"customValueSpecifier"})
Event: customValueSpecifier
var comboBoxObject = new ej.dropdowns.ComboBox({customValueSpecifier: "customValueSpecifier",});comboBoxObject.appendTo('#cmbelement');