This article describes the API migration process of DropDownList component from Essential JS 1 to Essential JS 2.
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)} /> |
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)} /> |
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} /> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: allowVirtualScrolling <EJ.DropDownList allowVirtualScrolling={true}></EJ.DropDownList> |
Not applicable |
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. |
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)} /> |
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'); |
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} /> |
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} /> |
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} /> |
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} /> |
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)} /> |