This article describes the API migration process of ComboBox component from Essential JS 1 to Essential JS 2.
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: datasource$('#dropdown1').ejComboBox({dataSource: List}); |
Property: DataSourcevar comboBoxObject = new ej.dropdowns.ComboBox({dataSource: sportsData,});comboBoxObject.appendTo('#cmbelement'); |
| Fields for mapping | Property: fields$('#dropdown1').ejComboBox({fields: { text: "text", value: "empid" }}); |
Property: fieldsvar comboBoxObject = new ej.dropdowns.ComboBox({fields: { text: "text", value: "empid" },});comboBoxObject.appendTo('#cmbelement'); |
| Query | Property: query$('#dropdown1').ejComboBox({query: ej.Query().requiresCount()}) |
Property: queryvar 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: actionBeginvar comboBoxObject = new ej.dropdowns.ComboBox({actionBegin: "begin",});comboBoxObject.appendTo('#cmbelement'); |
| Complete event | Event:actionComplete$('#dropdown1').ejComboBox({actionComplete: "begin"}); |
Event: actionCompletevar comboBoxObject = new ej.dropdowns.ComboBox({actionComplete: "begin",});comboBoxObject.appendTo('#cmbelement'); |
| Failure event | Event:actionFailure$('#dropdown1').ejComboBox({actionFailure: "begin"}); |
Event: actionFailurevar comboBoxObject = new ej.dropdowns.ComboBox({actionFailure: "begin",});comboBoxObject.appendTo('#cmbelement'); |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: allowFiltering$('#dropdown1').ejComboBox({allowFiltering: true}); |
Property: allowFilteringvar 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: noRecordsTemplatevar comboBoxObject = new ej.dropdowns.ComboBox({allowFiltering: true,});comboBoxObject.appendTo('#cmbelement'); |
| Ignore casing and diacritics | Not Applicable | Property: ignoreAccentvar 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: filteringvar comboBoxObject = new ej.dropdowns.ComboBox({filtering: "filtering",});comboBoxObject.appendTo('#cmbelement'); |
| 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: itemTemplatevar 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: groupTemplatevar comboBoxObject = new ej.dropdowns.ComboBox({groupTemplate: "<strong>${City}</strong>",});comboBoxObject.appendTo('#cmbelement'); |
| ValueTemplate | Not Applicable | Property: valueTemplatevar 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: headerTemplatevar 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: footerTemplatevar 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: noRecordsTemplatevar 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: autoFillvar 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: actionFailureTemplatevar comboBoxObject = new ej.dropdowns.ComboBox({actionFailureTemplate: "<span class='action-failure'> Data fetch get fails</span>",});comboBoxObject.appendTo('#cmbelement'); |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: cssClass $('#dropdown1').ejComboBox({cssClass: "className"}); |
Property: cssClassvar comboBoxObject = new ej.dropdowns.ComboBox({cssClass: "className",});comboBoxObject.appendTo('#cmbelement'); |
| width | Property: width $('#dropdown1').ejComboBox({width: "500px"}); |
Property: Widthvar comboBoxObject = new ej.dropdowns.ComboBox({width: "500px",});comboBoxObject.appendTo('#cmbelement'); |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: fields$('#dropdown1').ejComboBox({fields: { groupBy: "text", value: "empid" }}); |
Property: fieldsvar comboBoxObject = new ej.dropdowns.ComboBox({fields: { groupBy: "text", value: "empid" },});comboBoxObject.appendTo('#cmbelement'); |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Globalization | Property: locale$('#dropdown1').ejComboBox({locale: true}); |
Property: localevar comboBoxObject = new ej.dropdowns.ComboBox({locale: true});comboBoxObject.appendTo('#cmbelement'); |
| Rtl support | Property: enableRtl$('#dropdown1').ejComboBox({enableRtl: true}); |
Property: enableRtlvar comboBoxObject = new ej.dropdowns.ComboBox({enableRtl: true,});comboBoxObject.appendTo('#cmbelement'); |
| 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: floatLabelTypevar comboBoxObject = new ej.dropdowns.ComboBox({floatLabelType: "Auto",});comboBoxObject.appendTo('#cmbelement'); |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enable/disable | Property: enabled$('#dropdown1').ejComboBox({enabled: true}); |
Property: enabledvar comboBoxObject = new ej.dropdowns.ComboBox({enabled: true,});comboBoxObject.appendTo('#cmbelement'); |
| Read only | Property: readOnly$('#dropdown1').ejComboBox({readOnly: true}); |
Property: readOnlyvar comboBoxObject = new ej.dropdowns.ComboBox({readOnly: true,});comboBoxObject.appendTo('#cmbelement'); |
| Addition of Html attributes | Property: htmlAttributes$('#dropdown1').ejComboBox({htmlAttributes: { disabled: "disabled"}}); |
Property: htmlAttributesvar comboBoxObject = new ej.dropdowns.ComboBox({htmlAttributes: { disabled: "disabled"},});comboBoxObject.appendTo('#cmbelement'); |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Order of sorting | Property: sortOrder$('#dropdown1').ejComboBox({sortOrder: SortOrder.Ascending}); |
Property: sortOrdervar comboBoxObject = new ej.dropdowns.ComboBox({sortOrder: SortOrder.Ascending,});comboBoxObject.appendTo('#cmbelement'); |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Selecting particular index | Property: index$('#dropdown1').ejComboBox({index: 1}); |
Property: indexvar comboBoxObject = new ej.dropdowns.ComboBox({index: 1,});comboBoxObject.appendTo('#cmbelement'); |
| Selecting particular value | Property: value$('#dropdown1').ejComboBox({value: "data"}); |
Property: valuevar comboBoxObject = new ej.dropdowns.ComboBox({value: "data",});comboBoxObject.appendTo('#cmbelement'); |
| Selecting particular text | Property: text $('#dropdown1').ejComboBox({text: "data"}); |
Property: textvar comboBoxObject = new ej.dropdowns.ComboBox({text: "data",});comboBoxObject.appendTo('#cmbelement'); |
| Getting data by using value | Method: getItemDataByValue$('#dropdown1').ejComboBox({}); $(‘#dropdown1’).ejComboBox(‘getItemDataByValue’,“data”) |
Method: getDataByValuevar comboBoxObject = new ej.dropdowns.ComboBox({enabled: true,});comboBoxObject.appendTo('#cmbelement');comboBoxObject.getDataByValue(“data”); |
| Select event | Event: select$('#dropdown1').ejComboBox({select: "onSelect"}); |
Event: selectvar 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:popupheightvar comboBoxObject = new ej.dropdowns.ComboBox({popupHeight: "300px",});comboBoxObject.appendTo('#cmbelement'); |
| Popup width | Property: popupWidth$('#dropdown1').ejComboBox({popupWidth: "300px"}) |
Property:popupWidthvar comboBoxObject = new ej.dropdowns.ComboBox({popupWidth: "300px",});comboBoxObject.appendTo('#cmbelement'); |
| Popup showing manually | Method: showPopup$('#dropdown1').ejComboBox({}) $('#dropdown1').ejComboBox("showPopup"); |
Method: showPopupvar comboBoxObject = new ej.dropdowns.ComboBox({});comboBoxObject.appendTo('#cmbelement');cmbObj.showPopup(); |
| Popup hiding manually | Method: hidePopup$('#dropdown1').ejComboBox({}) $(‘#dropdown1’).ejComboBox(“hidePopup”; |
Method: hidePopupvar comboBoxObject = new ej.dropdowns.ComboBox({popupHeight: "300px",});comboBoxObject.appendTo('#cmbelement');comboBoxObject.hidePopup(); |
| Popup hide event | Event: close$('#dropdown1').ejComboBox({close: "onClose"}) |
Event: closevar comboBoxObject = new ej.dropdowns.ComboBox({close: "onclose",});comboBoxObject.appendTo('#cmbelement'); |
| Popup shown event | Event: open$('#dropdown1').ejComboBox({open: "onOpen"}) |
Event: openvar comboBoxObject = new ej.dropdowns.ComboBox({open: "onOpen",});comboBoxObject.appendTo('#cmbelement'); |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Adding new item | Method : addItem$('#dropdown1').ejComboBox({}) $(‘#dropdown1’).ejComboBox(“addItem”,{ text :“India”}); |
Method: addItemvar comboBoxObject = new ej.dropdowns.ComboBox({});comboBoxObject.appendTo('#cmbelement');comboBoxObject.addItem({Id: ‘id’, Game: ‘Golf’},2); |
| Focus out event | Not applicable | Event: Blurvar comboBoxObject = new ej.dropdowns.ComboBox({blur: "onclose",});comboBoxObject.appendTo('#cmbelement'); |
| Focus in event | Event: Focus$('#dropdown1').ejComboBox({focus:"focus"}) |
Event: focusInvar comboBoxObject = new ej.dropdowns.ComboBox({focusIn: "focus",});comboBoxObject.appendTo('#cmbelement'); |
| Focus out | Method: focusOut$('#dropdown1').ejComboBox({}) $(‘#dropdown1’).ejComboBox(“focusOut”); |
Method: focusOutvar comboBoxObject = new ej.dropdowns.ComboBox({open: "onOpen",});comboBoxObject.appendTo('#cmbelement');comboBoxObject.focusOut(); |
| Focus in | Method: focusIn$('#dropdown1').ejComboBox({}) $(‘#dropdown1’).ejComboBox(“focusIn”); |
Method: focusInvar comboBoxObject = new ej.dropdowns.ComboBox({});comboBoxObject.appendTo('#cmbelement');comboBoxObject.focusIn(); |
| Getting the data | Method : getItems$('#dropdown1').ejComboBox({}) $(‘#dropdown1’).ejComboBox(“getItems”); |
Method: getItemsvar comboBoxObject = new ej.dropdowns.ComboBox({});comboBoxObject.appendTo('#cmbelement');comboBoxObject.getItems(); |
| Create event | Event: create$('#dropdown1').ejComboBox({create:"onCreate"}) |
Event: createdvar comboBoxObject = new ej.dropdowns.ComboBox({created: "oncreate",});comboBoxObject.appendTo('#cmbelement'); |
| Change event | Event: change$('#dropdown1').ejComboBox({focus:"focus"}) |
Event: changevar comboBoxObject = new ej.dropdowns.ComboBox({change: "onchange",});comboBoxObject.appendTo('#cmbelement'); |
| Custom value event | Event: customValueSpecifier$('#dropdown1').ejComboBox({customValueSpecifier:"customValueSpecifier"}) |
Event: customValueSpecifiervar comboBoxObject = new ej.dropdowns.ComboBox({customValueSpecifier: "customValueSpecifier",});comboBoxObject.appendTo('#cmbelement'); |