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