JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Migration from Essential JS 1 in JavaScript ComboBox control

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

Filtering

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

Template

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

Grouping

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

Accessibility

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

Placeholder

Behavior API in Essential JS 1 API in Essential JS 2
Watermark text Property: placeholder
var sample = new ej.ComboBox($('#dropdown1'),{placeholder: "Select"});
Property: placeholder
let comboBoxObject = new ComboBox({placeholder: "Select",});comboBoxObject.appendTo('#cmbelement');
Floating of watermark text Not applicable Property: floatLabelType
let comboBoxObject = new ComboBox({floatLabelType: "Auto",});comboBoxObject.appendTo('#cmbelement');

Miscellaneous

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

Sorting

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

Selection

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

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

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

sample.showPopup();		 Method: showPopup
let comboBoxObject = new ComboBox({});comboBoxObject.appendTo('#cmbelement');

cmbObj.showPopup();
Popup hiding manually Method: hidePopup
var sample = new ej.ComboBox($('#dropdown1'),{})

sample.hidePopup();		 Method: hidePopup
let comboBoxObject = new ComboBox({popupHeight: "300px",});comboBoxObject.appendTo('#cmbelement');

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

Common

Behavior API in Essential JS 1 API in Essential JS 2
Adding new item Method : addItem
var sample = new ej.ComboBox($('#dropdown1'),{})

sample.addItem({ text :“India”});		 Method: addItem
let comboBoxObject = new ComboBox({});comboBoxObject.appendTo('#cmbelement');

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

sample.focusOut();		 Method: focusOut
let comboBoxObject = new ComboBox({open: "onOpen",});comboBoxObject.appendTo('#cmbelement');

comboBoxObject.focusOut();
Focus in Method: focusIn
var sample = new ej.ComboBox($('#dropdown1'),{})

sample.focusIn();		 Method: focusIn
let comboBoxObject = new ComboBox({});comboBoxObject.appendTo('#cmbelement');

comboBoxObject.focusIn();
Getting the data Method : getItems
var sample = new ej.ComboBox($('#dropdown1'),{})

sample.getItems();		 Method: getItems
let comboBoxObject = new ComboBox({});comboBoxObject.appendTo('#cmbelement');

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