- 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
17 Mar 20258 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)} /> |