- DataBinding
- Filtering
- Template
- Applying CSS
- Grouping
- Accessibility
- Placeholder
- Miscellaneous
- Sorting
- Selection
- Popup
- Common
Contact Support
Ej1 api migration in React Combo box component
17 Mar 20256 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)} /> |