Ej1 api migration in EJ2 JavaScript Combo box control
2 May 20235 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$('#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');
|
Filtering
| 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');
|
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: 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');
|
Applying CSS
| 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');
|
Grouping
| 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');
|
Accessibility
| 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');
|
Placeholder
| Behavior | API in Essential JS 1 | API in Essential JS 2|
| — | — | — |
| Watermark text | Property: placeholder$('#dropdown1').ejComboBox({placeholder: "Select"});
|
Property: placeholdervar 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');
|
Miscellaneous
| 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');
|
Sorting
|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');
|
Selection
| 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');
|
Popup
| 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');
|
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: 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');
|