- DataBinding
- Filtering
- Template
- Virtual Scrolling
- Applying CSS
- Sorting
- Popup
- Placeholder
- Grouping
- Accessibility
- Miscellaneous
- Selection
- Common
Contact Support
Ej1 api migration in React Drop down list component
18 Apr 20238 minutes to read
This article describes the API migration process of DropDownList 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.DropDownList dataSource={groups} ></EJ.DropDownList> | Property: dataSource <DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} dataSource={this.cityData} />|
| Fields for mapping | Property: fields <EJ.DropDownList fields-value="parentId" fields-text="text" ></EJ.DropDownList>| Property: fields <DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} fields={this.cityField} />|
| Query | Property: query <EJ.DropDownList query={query}></EJ.DropDownList>| Property: query<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} query={this.query} />|
| Begin event | Event :actionBegin <EJ.DropDownList actionBegin="actionBegin"></EJ.DropDownList> | Event : actionBegin <DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} actionBegin={this.actionBegin.bind(this)} />|
| Complete event | Event: actionComplete <EJ.DropDownList actionComplete="actionComplete"></EJ.DropDownList> | Event: actionComplete <DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} actionComplete={this.actionComplete.bind(this)} />|
| Failure event | Event: actionFailure <EJ.DropDownList actionFailure="actionFailure"></EJ.DropDownList>| Event: actionFailure <DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} actionFailure={this.actionFailure.bind(this)} />|
| Success event| Event: actionSuccess <EJ.DropDownList actionSuccess="actionSuccess"></EJ.DropDownList>| Not Applicable |
| Data binding event | Event: dataBound
<EJ.DropDownList dataBound="dataBound"></EJ.DropDownList>| Event: dataBind <DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} dataBind={this.dataBind.bind(this)} />|
Filtering
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
| Default | Property: enableFilterSearch <EJ.DropDownList enableFilterSearch={true}></EJ.DropDownList>| Property: allowFiltering <DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} allowFiltering={true} /> |
| Server filtering | Property: enableServerFiltering <EJ.DropDownList enableServerFiltering={true}></EJ.DropDownList>| Property: allowFiltering <DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} allowFiltering={true} /> |
| Filter type | Property: filterType <EJ.DropDownList filterType="contains"></EJ.DropDownList> |https://ej2.syncfusion.com/react/demos/#/material/drop-down-list/filtering |
| No Records Template | Not Applicable | Property: noRecordsTemplate
<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} noRecordsTemplate={this.noRecordsTemplate} /> |
| Filter Bar watermark text | Not Applicable | Property: filterBarPlaceholder <DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} filterBarPlaceholder={this.filterBarPlaceholder} /> |
| Ignore casing and diacritics | Not Applicable |Property: ignoreAccent<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} ignoreAccent={true} /> |
| Incremental search| Property: enableIncrementalSearch<EJ.DropDownList enableIncrementalSearch={true}></EJ.DropDownList> | By default it is true |
| Case sensitivity | Property: caseSensitiveSearch<EJ.DropDownList caseSensitiveSearch={true}></EJ.DropDownList> | https://ej2.syncfusion.com/react/demos/#/material/drop-down-list/filtering |
| Search event | Event: search <EJ.DropDownList search="search"></EJ.DropDownList> | Event: filtering <DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} filtering={this.filtering.bind(this)} /> |
Template
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
| Default | Property: template <EJ.DropDownList template={template}></EJ.DropDownList> |Property: itemTemplate<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} itemTemplate={this.itemTemplate} />|
| Group Template | Not Applicable | Property: groupTemplate <DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} groupTemplate={this.groupTemplate} />|
| ValueTemplate | Not Applicable | Property: valueTemplate <DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} valueTemplate={this.valueTemplate} />|
| Header Template | Property: headerTemplate <EJ.DropDownList headerTemplate={headerTemplate}></EJ.DropDownList>| Property: headerTemplate <DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} headerTemplate={this.headerTemplate} />|
| FooterTemplate | Not applicable | Property: footerTemplate <DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} footerTemplate={this.footerTemplate} />|
| No records Template | Not applicable | Property: noRecordsTemplate <DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} noRecordsTemplate={this.noRecordsTemplate} />|
| Action failure Template | Not applicable | Property: actionFailureTemplate <DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} actionFailureTemplate={this.actionFailureTemplate} />|
Virtual Scrolling
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
| Default | Property: allowVirtualScrolling <EJ.DropDownList allowVirtualScrolling={true}></EJ.DropDownList> | Not applicable |
Applying CSS
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
| Default | Property: cssClass <EJ.DropDownList cssClass="customClass"></EJ.DropDownList> | Property: cssClass <DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} cssClass={this.cssclass} />|
| showRoundedCorner | Property: showRoundedCorner <EJ.DropDownList showRoundedCorner={true}></EJ.DropDownList> | Acheivable through the cssClass property.|
Sorting
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
| Default | Property: enableSorting <EJ.DropDownList enableSorting={true}></EJ.DropDownList> | Acheivable through the sortOrder property. |
| Order of sorting | Property: sortOrder <EJ.DropDownList sortOrder="ascending"></EJ.DropDownList> | Property: sortOrder <DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} sortOrder={this.sortOrder} />|
Popup
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|— | — | — |
| Popup height | Property: popupHeight <EJ.DropDownList popupHeight="500px"></EJ.DropDownList>| Property: popupHeight <DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} popupHeight={this.popupHeight} />|
| Popup width | Property: popupWidth <EJ.DropDownList popupWidth="500px"></EJ.DropDownList> | Property: popupWidth <DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} popupWidth={this.popupWidth} />|
| Popup show on load | Property: showPopupOnLoad
<EJ.DropDownList showPopupOnLoad={true}></EJ.DropDownList>| By default, the data load on demand. |
| enableAnimation | Property: enableAnimation <EJ.DropDownList enableAnimation={true}></EJ.DropDownList>| Not applicable |
| Popup resizing | Property: enablePopupResize <EJ.DropDownList enablePopupResize={true}></EJ.DropDownList>| Not applicable |
| Maximum Popup height | Property: maxPopupHeight <EJ.DropDownList maxPopupHeight="500px"></EJ.DropDownList>| Not applicable |
| Minimum Popup height | Property: minPopupHeight<EJ.DropDownList minPopupHeight="500px"></EJ.DropDownList>
}); | Not applicable |
| Maximum Popup width | Property: maxPopupWidth <EJ.DropDownList maxPopupWidth="500px"></EJ.DropDownList>| Not applicable |
| Minimum Popup width | Property: minPopupWidth <EJ.DropDownList minPopupWidth="500px"></EJ.DropDownList> | Not applicable |
| Loading data | Property: loadOnDemand <EJ.DropDownList loadOnDemand={true}></EJ.DropDownList> | By default, it is true |
| Popup showing manually | Method: showPopup <EJ.DropDownList></EJ.DropDownList>$('#dropdown').ejDropDownList('showPopup') | Method: showPopup <DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} />this.ddlObj.showPopup();|
| Popup hiding manually |Method: hidePopup
<EJ.DropDownList></EJ.DropDownList>$('#dropdown').ejDropDownList('hidePopup') | Method: hidePopup<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} />this.ddlObj.hidePopup();|
| Before Popup hide event | Event: beforePopupHide <EJ.DropDownList beforePopupHide="beforePopupHide"></EJ.DropDownList>| Not applicable |
| Before Popup shown event | Event: beforePopupShown<EJ.DropDownList beforePopupShown="beforePopupShown"></EJ.DropDownList>| Event: beforeOpen <DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} (beforeOpen)={this.beforeOpen.bind(this)} />|
| Popup hide event | Event: popupHide<EJ.DropDownList popupHide="popupHide"></EJ.DropDownList>|Event: close <DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} (close)={this.close.bind(this)} /> |
| Popup resize event | Event: popupResize<EJ.DropDownList popupResize="popupResize"></EJ.DropDownList>| Not applicable |
| Popup resize start event| Event: popupResizeStart<EJ.DropDownList popupResizeStart="popupResizeStart"></EJ.DropDownList>| Not applicable |
| Popup resize stop event | Event: popupResizeStop<EJ.DropDownList popupResizeStop="popupResizeStop"></EJ.DropDownList>| Not applicable |
| Popup shown event | Event: popupShown<EJ.DropDownList popupShown="popupShown"></EJ.DropDownList>| Event: open
<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} (open)={this.open.bind(this)} />|
Placeholder
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
| Watermark text | Property: watermarkText <EJ.DropDownList watermarkText="select"></EJ.DropDownList>| Property: placeholder var dropDownListObject = new ej.dropdowns.DropDownList({placeholder: "select"});dropDownListObject.appendTo('#ddlelement');|
| Floating of watermark text | Not applicable | Property: floatLabelType var dropDownListObject = new ej.dropdowns.DropDownList({floatLabelType: "Auto"});dropDownListObject.appendTo('#ddlelement');|
Grouping
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
| Default | Property: fields.groupBy <EJ.DropDownList fields-value="parentId" fields-groupBy="text" ></EJ.DropDownList>|Property: fields.groupBy<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} fields={this.field} />|
| Group Template| Not applicable | Property: groupTemplate<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} groupTemplate={this.groupTemplate} /> |
Accessibility
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
| Globalization | Property: locale<EJ.DropDownList fields-value="parentId" locale="fr-FE" ></EJ.DropDownList>| Property: locale<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} locale={this.locale} /> |
| Rtl support | Property: enableRTL<EJ.DropDownList fields-value="parentId" enableRTL={true} ></EJ.DropDownList> | Property: enableRtl<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} enableRtl={true} /> |
Miscellaneous
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
| Enable/disable | Property: enabled<EJ.DropDownList enabled={true} ></EJ.DropDownList> | Property: enabled <DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} enabled={true} /> |
| Read only | Property: readOnly <EJ.DropDownList readOnly={true} ></EJ.DropDownList> |
Property: readOnly<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} readOnly={true} /> |
| Persistence of data | Property: enablePersistence<EJ.DropDownList enablePersistence={true} ></EJ.DropDownList> |Property: enablePersistence<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} enablePersistence={true} /> |
| Disable | Method: disable<EJ.DropDownList></EJ.DropDownList>$('#dropdown').ejDropDownList('disable') |Property: enabled<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} enabled={true} />|
| Enable | Method: enable<EJ.DropDownList></EJ.DropDownList>$('#dropdown').ejDropDownList('enable')| Property: enabled<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} enabled={true} />|
| Height | Property: height <EJ.DropDownList height="500px" ></EJ.DropDownList>| Property: height <DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} height={this.height} />|
| Width | Property: width <EJ.DropDownList width="100px" ></EJ.DropDownList> | Property: width <DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} width={this.width} />|
Selection
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|— | — | — |
| Selecting particular index | Property: selectedIndex<EJ.DropDownList selectedIndex={selectedIndex} ></EJ.DropDownList> | Property: index<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} index={this.index} /> |
| Selecting particular value | Property: value<EJ.DropDownList value="data" ></EJ.DropDownList> | Property: value<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} value={this.value} />|
| Selecting particular text | Property: text <EJ.DropDownList text="data" ></EJ.DropDownList>|Property: text <DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} text={this.text} /> |
| Target id | Property: targetId <EJ.DropDownList targetId="id" ></EJ.DropDownList> | Not applicable |
| Selecting item using text | Method: selectItemByText <EJ.DropDownList ></EJ.DropDownList>$('#dropdown').ejDropDownList('selectItemByText','car') | Not applicable |
| Unselect item using text | Method: unselectItemByText <EJ.DropDownList></EJ.DropDownList>$('#dropdown').ejDropDownList('unselectItemByText','car') | Not applicable |
| Selecting item using value| Method: selectItemByValue <EJ.DropDownList ></EJ.DropDownList>$('#dropdown').ejDropDownList('selectItemByValue','car') | Not applicable |
| Getting data by using value | Method: getItemDataByValue <EJ.DropDownList ></EJ.DropDownList>$('#dropdown').ejDropDownList('unselectItemByValue','car') | Method: getDataByValue<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }}/>this.ddlObj.getDataByValue();|
| Get selected value | Method: getSelectedItem <EJ.DropDownList ></EJ.DropDownList>$('#dropdown').ejDropDownList('getSelectedItem') |Not applicable |
| Get selected text | Method: getSelectedText <EJ.DropDownList></EJ.DropDownList>$('#dropdown').ejDropDownList('getSelectedText')| Property: text<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} text={this.text} /> |
| Select event | Event: select<EJ.DropDownList select="onSelect" ></EJ.DropDownList>| Event: select<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} (select)={this.select.bind(this)} />|
| Addition of Html attributes | Property: htmlAttributes<EJ.DropDownList htmlAttributes={attributes} ></EJ.DropDownList>| Property: htmlAttributes<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} htmlAttributes={this.htmlAttributes} /> |
Common
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
| Adding new item | Method : addItem<EJ.DropDownList></EJ.DropDownList>$('#dropdown').ejDropDownList("addItem", {text:"India"}); | Method: addItem<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }}/>this.ddlObj.addItem("data"); |
| Clearing the text| Method : clearText<EJ.DropDownList></EJ.DropDownList>$('#dropdown').ejDropDownList('clearText') | Property: value<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} value={this.value} />|
| Destroy the component | Method : destroy<EJ.DropDownList></EJ.DropDownList>$('#dropdown').ejDropDownList('destroy')| Method: destroy<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }}/>this.ddlObj.destroy(); |
| Getting the data | Method : getListData<EJ.DropDownList></EJ.DropDownList>$('#dropdown').ejDropDownList('getListData') |Method : getItems<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }}/>this.ddlObj.getItems(); |
| Create event | Event: create<EJ.DropDownList create="create" ></EJ.DropDownList> | Event: created<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} (created)={this.created.bind(this)} /> |
| Destroy event | Event: destroy<EJ.DropDownList destroy="destroy" ></EJ.DropDownList>|Event: destroyed<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} (destroyed)={this.destroyed.bind(this)} /> |
| Cascade event | Event: cascade<EJ.DropDownList cascade="cascade" ></EJ.DropDownList>|https://ej2.syncfusion.com/react/demos/#/material/drop-down-list/cascading |
| Change event | Event: change<EJ.DropDownList change="change" ></EJ.DropDownList>| Event: change<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} (change)={this.change.bind(this)} /> |
| Focus out event | Event: focusOut<EJ.DropDownList focusOut="focusOut" ></EJ.DropDownList>| Event: blur<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} (blur)={this.blur.bind(this)} />|
| Focus in event| Event: focusIn<EJ.DropDownList focusIn="focusIn" ></EJ.DropDownList> | Event: focus<DropDownListComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} (focus)={this.focus.bind(this)} /> |