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<EJ.ComboBox dataSource={groups} ></EJ.ComboBox> |
Property: dataSource<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} dataSource={this.cityData} /> |
| Fields for mapping | Property: fields<EJ.ComboBox dataSource={groups} fields-value="parentId" fields-text="text"> </EJ.ComboBox> |
Property: fields<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} fields={this.field} /> |
| Query | Property: query<EJ.ComboBox query={query} ></EJ.ComboBox> |
Property: query<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} query={this.query} /> |
| Begin event | Event:actionBegin<EJ.ComboBox actionBegin="actionBegin" ></EJ.ComboBox> |
Event: actionBegin<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} actionBegin={this.actionBegin.bind(this)} /> |
| Complete event | Event:actionComplete<EJ.ComboBox actionComplete="actionComplete" ></EJ.ComboBox> |
Event: actionComplete<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} actionComplete={this.actionComplete.bind(this)} /> |
| Failure event | Event:actionFailure<EJ.ComboBox actionFailure="actionFailure"></EJ.ComboBox> |
Event: actionFailure<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} actionFailure={this.actionFailure.bind(this)} /> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: allowFiltering<EJ.ComboBox allowFiltering={true}></EJ.ComboBox> |
Property: allowFiltering<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} allowFiltering={true} /> |
| No records template | Property: noRecordsTemplate<EJ.ComboBox noRecordsTemplate={template}></EJ.ComboBox> |
Property: noRecordsTemplate<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} noRecordsTemplate={this.noRecordsTemplate} /> |
| Ignore casing and diacritics | Not Applicable | Property: ignoreAccent<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} ignoreAccent={true} /> |
| Custom value addition | Property: allowCustom<EJ.ComboBox allowCustom={true}></EJ.ComboBox> |
https://ej2.syncfusion.com/react/demos/#/material/combo-box/custom-value |
| Search event | Event: filtering<EJ.ComboBox filtering="filtering"></EJ.ComboBox> |
Event: filtering<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} filtering={this.filteting.bind(this)} /> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: itemTemplate<EJ.ComboBox itemTemplate={itemTemplate}></EJ.ComboBox> |
Property: itemTemplate<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} itemTemplate={this.itemTemplate} /> |
| Group Template | Property: groupTemplate<EJ.ComboBox groupTemplate={groupTemplate}></EJ.ComboBox> |
Property: groupTemplate<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} groupTemplate={this.groupTemplate} /> |
| ValueTemplate | Not Applicable | Property: valueTemplate<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} valueTemplate={this.valueTemplate} /> |
| Header Template | Property: headerTemplate<EJ.ComboBox headerTemplate={headerTemplate}></EJ.ComboBox> |
Property: headerTemplate<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} headerTemplate={this.headerTemplate} /> |
| FooterTemplate | Property: footerTemplate<EJ.ComboBox footerTemplate={footerTemplate}></EJ.ComboBox> |
Property: footerTemplate<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} footerTemplate={this.footerTemplate} /> |
| No records Template | Property: noRecordsTemplate<EJ.ComboBox noRecordsTemplate={noRecordsTemplate}></EJ.ComboBox> |
Property: noRecordsTemplate<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} noRecordsTemplate={this.noRecordsTemplate} /> |
| Auto fill | Property: autoFill<EJ.ComboBox autoFill={true}></EJ.ComboBox> |
Property: autoFill<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} autoFill={true} /> |
| Action failure Template | Property: actionFailureTemplate<EJ.ComboBox actionFailureTemplate={actionFailureTemplate}></EJ.ComboBox> |
Property: actionFailureTemplate<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} actionFailureTemplate={this.actionFailureTemplate} /> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: cssClass <EJ.ComboBox cssClass="cssClass"></EJ.ComboBox> |
Property: cssClass<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} cssClass={this.cssClass} /> |
| width | Property: width <EJ.ComboBox width="300px"></EJ.ComboBox> |
Property: width<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} width={this.width} /> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: fields-groupBy<EJ.ComboBox dataSource={groups} fields-value="parentId" fields-groupBy="text"> </EJ.ComboBox> |
Property: fields<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} fields={this.field} /> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Globalization | Property: locale<EJ.ComboBox locale="fr-FE"></EJ.ComboBox> |
Property: locale<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} locale={this.locale} /> |
| Rtl support | Property: enableRtl<EJ.ComboBox enableRtl={true}></EJ.ComboBox> |
Property: enableRtl<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} enableRtl={true} /> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Watermark text | Property: placeholder<EJ.ComboBox placeholder="select"></EJ.ComboBox> |
Property: placeholder <ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} placeholder={this.placeholder} /> |
| Floating of watermark text | Not applicable | Property: floatLabelType<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} floatLabelType={this.floatLabelType} /> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enable/disable | Property: enabled<EJ.ComboBox enabled={true}></EJ.ComboBox> |
Property: enabled<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} enabled={true} /> |
| Read only | Property: readOnly<EJ.ComboBox readOnly={true}></EJ.ComboBox> |
Property: readOnly<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} readOnly={true} /> |
| Addition of Html attributes | Property: htmlAttributes<EJ.ComboBox htmlAttributes={htmlAttributes}></EJ.ComboBox> |
Property: htmlAttributes<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} htmlAttributes={this.htmlAttributes} /> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Order of sorting | Property: sortOrder<EJ.ComboBox sortOrder={sortOrder}></EJ.ComboBox> |
Property: sortOrder<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} sortOrder={this.sortOrder} /> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Selecting particular index | Property: index<EJ.ComboBox index="1"></EJ.ComboBox> |
Property: index<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} index={this.index} /> |
| Selecting particular value | Property: value<EJ.ComboBox value="data"></EJ.ComboBox> |
Property: value<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} value={this.value} /> |
| Selecting particular text | Property: text <EJ.ComboBox text="data"></EJ.ComboBox> |
Property: text<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} text={this.text} /> |
| Getting data by using value | Method: getItemDataByValue<EJ.ComboBox sortOrder={sortOrder}></EJ.ComboBox> $(‘#dropdown’).ejComboBox(‘getItemDataByValue’,“data”) |
Method: getDataByValue<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} />this.ddlObj.getDataByValue(“data”); |
| Select event | Event: select<EJ.ComboBox select="select"></EJ.ComboBox> |
Event: select<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} select={this.select} /> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Popup height | Property: popupHeight<EJ.ComboBox popupHeight="300px"></EJ.ComboBox> |
Property:popupheight<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} popupHeight={this.popupHeight} /> |
| Popup width | Property: popupWidth<EJ.ComboBox popupWidth="300px"></EJ.ComboBox> |
Property:popupWidth<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} popupWidth={this.popupWidth} /> |
| Popup showing manually | Method: showPopup<EJ.ComboBox ></EJ.ComboBox> $(‘#dropdown’).ejComboBox(“showPopup”); |
Method: showPopup<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} />this.ddlObj.showPopup(); |
| Popup hiding manually | Method: hidePopup<EJ.ComboBox ></EJ.ComboBox> $(‘#dropdown’).ejComboBox(“hidePopup”); |
Method: hidePopup<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} />this.ddlObj.hidePopup(); |
| Popup hide event | Event: close<EJ.ComboBox close="close"></EJ.ComboBox> |
Event: close<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} close={this.close.bind(this)} /> |
| Popup shown event | Event: open<EJ.ComboBox open="open"></EJ.ComboBox> |
Event: open<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} open={this.open.bind(this)} /> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Adding new item | Method : addItem<EJ.ComboBox ></EJ.ComboBox> $(‘#dropdown’).ejComboBox(“addItem”, { text :“India”}); |
Method: addItem<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} />this.ddlObj.addItem({Id: ‘id’, Game: ‘Golf’},2); |
| Focus out event | Not applicable | Event: blur<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} blur={this.blur.bind(this)} /> |
| Focus in event | Event: focus<EJ.ComboBox focus="focus"></EJ.ComboBox> |
Event: FocusIn<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} focusIn={this.focus.bind(this)} /> |
| Focus out | Method: focusOut<EJ.ComboBox ></EJ.ComboBox> $(‘#dropdown’).ejComboBox(“focusOut”); |
Method: focusOut<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} />this.ddlObj.focusOut(); |
| Focus in | Method: focusIn<EJ.ComboBox ></EJ.ComboBox> $(‘#dropdown’).ejComboBox(“focusIn”); |
Method: focusIn<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} />this.ddlObj.focusIn(); |
| Getting the data | Method : getItems<EJ.ComboBox ></EJ.ComboBox> $(‘#dropdown’).ejComboBox(“getItems”); |
Method: getItems<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} />this.ddlObj.getItems(); |
| Create event | Event: create<EJ.ComboBox close="close"></EJ.ComboBox> |
Event: created<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} created={this.create.bind(this)} /> |
| Change event | Event: change<EJ.ComboBox close="close"></EJ.ComboBox> |
Event: change<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} change={this.change.bind(this)} /> |
| Custom value event | Event: customValueSpecifier<EJ.ComboBox customValueSpecifier="customValueSpecifier"></EJ.ComboBox> |
Event: customValueSpecifier<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} customValueSpecifier={this.customValueSpecifier.bind(this)} /> |