React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Migration from Essential JS 1 in React DropDownList component

24 May 2022 / 10 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} />
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)} />
Previous
Next