Ej1 api migration in React Combo box component

2 Feb 20236 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
<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)} /> |

Filtering

| 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)} /> |

Template

| 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} />|

Applying CSS

| 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} /> |

Grouping

| 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} /> |

Accessibility

| 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} />|

Placeholder

| 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} /> |

Miscellaneous

| 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} />|

Sorting

|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} />|

Selection

| 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} />|

Popup

| 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)} />|

Common

| 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)} /> |