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-drop-down-list datasource="ViewBag.datasource"></ej-drop-down-list> |
Property: dataSource <ejs-dropdownlist dataSource="@ViewBag.data"></ejs-dropdownlist> |
| Fields for mapping | Property: fields <ej-drop-down-list><e-drop-down-list-fields text="CustomerID" table-name="Customers" /></ej-drop-down-list> |
Property: fields <ejs-dropdownlist><e-dropdownlist-fields text="Vegetable" value="Id"></e-dropdownlist-fields></ejs-dropdownlist> |
| Query | Property: query <ej-drop-down-list query="ej.Query().from('Customers').take(6)"></ej-drop-down-list> |
Property: query<ejs-dropdownlist query="new ej.data.Query().from('Customers').select(['ContactName', 'CustomerID']).take(6)"></ejs-dropdownlist> |
| Begin event | Event :action-begin <ej-drop-down-list actionBegin="actionBegin"></ej-drop-down-list> |
Event : actionBegin <ejs-dropdownlist id="customers" actionBegin="actionBegin"></ejs-dropdownlist> |
| Complete event | Event: action-complete <ej-drop-down-list actionBegin="actionComplete"></ej-drop-down-list> |
Event: actionComplete <ejs-dropdownlist id="customers" actionComplete="actionComplete"></ejs-dropdownlist> |
| Failure event | Event: action-failure <ej-drop-down-list actionFailure="actionFailure"></ej-drop-down-list> |
Event: actionFailure <ejs-dropdownlist id="customers" actionFailure="actionFailure"></ejs-dropdownlist> |
| Success event | Event: action-sucess <ej-drop-down-list actionSuccess="actionSuccess"></ej-drop-down-list> |
Not Applicable |
| Data binding event | Event: dataBound <ej-drop-down-list dataBound="dataBound"></ej-drop-down-list> |
Event: dataBound <ejs-dropdownlist id="customers" dataBound="dataBound"></ejs-dropdownlist> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: enable-filter-search <ej-drop-down-list enable-filter-search=true></ej-drop-down-list> |
Property: allowFiltering <ejs-dropdownlist allowFiltering="true"></ejs-dropdownlist> |
| Server filtering | Property: enable-server-filtering <ej-drop-down-list enable-server-filtering=true></ej-drop-down-list> |
Property: allowFiltering <ejs-dropdownlist allowFiltering="true"></ejs-dropdownlist> |
| Filter type | Property: filter-type <ej-drop-down-list filter-type="@SearchFilterType.StartsWith"></ej-drop-down-list> |
https://ej2.syncfusion.com/demos/#/material/drop-down-list/filtering.html |
| No Records Template | Not Applicable | Property: noRecordsTemplate <ejs-dropdownlist noRecordsTemplate="@Html.Raw("<span class='norecord'> NO DATA AVAILABLE</span>")"></ejs-dropdownlist> |
| Filter Bar watermarktext | Not Applicable | Property: filterBarPlaceholder <ejs-dropdownlist filterBarPlaceholder="Search" ></ejs-dropdownlist> |
| Ignore casing and diacritics | Not Applicable | Property: ignoreAccent<ejs-dropdownlist ignoreAccent="true"></ejs-dropdownlist> |
| Incremental search | Property: enable-incremental-search<ej-drop-down-list enable-incremental-search="true"></ej-drop-down-list> |
By default it is true |
| Case sensitivity | Property: case-sensitive-search<ej-drop-down-list case-sensitive-search="true"></ej-drop-down-list> |
https://ej2.syncfusion.com/demos/#/material/drop-down-list/filtering.html |
| Search event | Event: search <ej-drop-down-list search="onSearth"></ej-drop-down-list> |
Event: filtering <ejs-dropdownlist filtering="onFiltering"></ejs-dropdownlist> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: template <ej-drop-down-list template="<div><img class='imgId' src='../Content/Employees/${Image}.png' alt='employee'/> <div class='ename'> ${Text} </div><div class='role'> ${Role} </div><div class='cont'> ${Country} </div></div>"></ej-drop-down-list> |
Property: itemTemplate<ejs-dropdownlist itemTemplate="@Html.Raw("<span><span class='name'>${FirstName}</span><span class ='city'>${City}</span></span>")"></ejs-dropdownlist> |
| Group Template | Not Applicable | Property: groupTemplate <ejs-dropdownlist groupTemplate="@Html.Raw("<strong>${City}</strong>")"></ejs-dropdownlist> |
| ValueTemplate | Not Applicable | Property: valueTemplate <ejs-dropdownlist valueTemplate=""@Html.Raw("<span>${FirstName} - ${City}</span>")"></ejs-dropdownlist> |
| Header Template | Property: headerTemplate <ej-drop-down-list header-template="<div class='eheader'><span>PHOTO</span> <span>DETAILS</span></div>"></ej-drop-down-list> |
Property: headerTemplate <ejs-dropdownlist headerTemplate="@Html.Raw("<span class='head'><span class='name'>Name</span><span class='city'>City</span></span>")"></ejs-dropdownlist> |
| FooterTemplate | Not applicable | Property: footerTemplate <ejs-dropdownlist footerTemplate="@Html.Raw("<span class='foot'> Total list items: " + 8 + "</span>")"></ejs-dropdownlist> |
| No records Template | Not applicable | Property: noRecordsTemplate <ejs-dropdownlist noRecordsTemplate="@Html.Raw("<span class='norecord'> NO DATA AVAILABLE</span>")"></ejs-dropdownlist> |
| Action failure Template | Not applicable | Property: actionFailureTemplate <ejs-dropdownlist actionFailureTemplate="@Html.Raw("<span class='action-failure'> Data fetch get fails</span>")"></ejs-dropdownlist> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: allow-virtual-scrolling <ej-drop-down-list allow-virtual-scrolling="true"></ej-drop-down-list> |
Not applicable |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: css-class <ej-drop-down-list css-class="customClass"></ej-drop-down-list> |
Property: cssClass <ejs-dropdownlist cssClass="class"></ejs-dropdownlist> |
| showRoundedCorner | Property: show-rounded-corner <ej-drop-down-list show-rounded-corner="true"></ej-drop-down-list> |
Property: cssClass <ejs-dropdownlist cssClass="class"></ejs-dropdownlist> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: enable-sorting <ej-drop-down-list enable-sorting="true"></ej-drop-down-list> |
Enabled only on using sortorder Property |
| Order of sorting | Property: sort-order <ej-drop-down-list sort-order="@SortOrder.Descending"></ej-drop-down-list> |
Property: sortOrder <ejs-dropdownlist sortOrder="Ascending"></ejs-dropdownlist> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Popup height | Property: popup-height <ej-drop-down-list popup-height="550px"> </ej-drop-down-list> |
Property: popupheight <ejs-dropdownlist popupHeight="220px"></ejs-dropdownlist> |
| Popup width | Property: popup-width <ej-drop-down-list popup-width="550px"> </ej-drop-down-list> |
Property: popupWidth <ejs-dropdownlist popupWidth="300px"></ejs-dropdownlist> |
| Popup show on load | Property: show-popup-on-load <ej-drop-down-list show-popup-on-load="true"> </ej-drop-down-list> |
By default, the data load on demand. |
| enableAnimation | Property: enable-animation <ej-drop-down-list enable-animation="true"> </ej-drop-down-list> |
Not applicable |
| Popup resizing | Property: enable-popup-resize <ej-drop-down-list enable-popup-resize="true"> </ej-drop-down-list> |
Not applicable |
| Maximum Popup height | Property: max-popup-height <ej-drop-down-list max-popup-Height="550px"> </ej-drop-down-list> |
Not applicable |
| Minimum Popup height | Property: min-popup-height<ej-drop-down-list min-popup-Height="550px"></ej-drop-down-list>}); |
Not applicable |
| Maximum Popup width | Property: max-popup-width <ej-drop-down-list max-popup-width="550px"></ej-drop-down-list> |
Not applicable |
| Minimum Popup width | Property: min-popup-width <ej-drop-down-list min-popup-Width="550px"></ej-drop-down-list> |
Not applicable |
| Loading data | Property: load-on-demand <ej-drop-down-list load-on-demand="true"></ej-drop-down-list> |
By default, it is true |
| Popup showing manually | Method: showPopup <ej-drop-down-list></ej-drop-down-list>$('#dropdown').ejDropDownList('showPopup') |
Method: showPopup <ejs-dropdownlist/>var ddlObj = document.getElementById(dropdownlist).ej2_Instances[0];ddlObj.showPopup(); |
| Popup hiding manually | Method: hidePopup <ej-drop-down-list></ej-drop-down-list>$('#dropdown').ejDropDownList('hidePopup') |
Method: hidePopup<ejs-dropdownlist/>var ddlObj = document.getElementById(dropdownlist).ej2_Instances[0];ddlObj.hidePopup(); |
| Before Popup hide event | Event: before-popup-hide <ej-drop-down-list before-popup-hide="event"></ej-drop-down-list> |
Not applicable |
| Before Popup shown event | Event: before-popup-shown<ej-drop-down-list before-popup-shown="event"></ej-drop-down-list> |
Event: beforeOpen <ejs-dropdownlist beforeOpen="onOpen"/> |
| Popup hide event | Event: popup-hide<ej-drop-down-list popup-hide="event"></ej-drop-down-list> |
Event: close <ejs-dropdownlist close="onClose"/> |
| Popup resize event | Event: popup-resize<ej-drop-down-list popup-resize="event"></ej-drop-down-list> |
Not applicable |
| Popup resize start event | Event: popup-resize-start<ej-drop-down-list popup-resize-start="event"></ej-drop-down-list> |
Not applicable |
| Popup resize stop event | Event: popup-resize-stop<ej-drop-down-list popup-resize-stop="event"></ej-drop-down-list> |
Not applicable |
| Popup shown event | Event: popup-shown<ej-drop-down-list popup-shown="event"></ej-drop-down-list> |
Event: open<ejs-dropdownlist open="onOpen"/> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Watermark text | Property: watermark-Text <ej-drop-down-list watermark-text="Select an Item"></ej-drop-down-list> |
Property: placeholder <ejs-dropdownlist placeholder="select"/> |
| Floating of waterMarkText | Not applicable | Property: floatLabelType <ejs-dropdownlist floatLabelType="Auto"/> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: fields.groupBy <ej-drop-down-list watermark-text="Select an Item"><e-drop-down-list-fields group-by="Category" /></ej-drop-down-list> |
Property: fields.groupBy > <ejs-dropdownlist> <e-dropdownlist-fields groupBy="Name"></e-dropdownlist-fields></ejs-dropdownlist> |
| Group Template | Not applicable | Property: groupTemplate<ejs-dropdownlist groupTemplate="@Html.Raw("<strong>${City}</strong>")"></ejs-dropdownlist> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Globalization | Property: locale<ej-drop-down-list locale="fr-FE"/> |
Property: locale<ejs-dropdownlist locale="en-US"></ejs-dropdownlist> |
| Rtl support | Property: enable-rtl<ej-drop-down-list enable-rtl="true"/> |
Property: enableRtl<ejs-dropdownlist enableRtl="true"></ejs-dropdownlist> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enable/disable | Property: enabled<ej-drop-down-list enabled="true"/> |
Property: enabled <ejs-dropdownlist enabled="true"></ejs-dropdownlist> |
| Read only | Property: read-only <ej-drop-down-list read-only="true"/> |
Property: readOnly <ejs-dropdownlist readOnly="true"></ejs-dropdownlist> |
| Persistence of data | Property: enable-persistence<ej-drop-down-list enable-presistence="true"/> |
Property: enablePersistence<ejs-dropdownlist enablePersistence="true"></ejs-dropdownlist> |
| Disable | Method: disable<ej-drop-down-list />$(‘#dropdown’).ejDropDownList(‘disable’) |
Property: enabled<ejs-dropdownlist enabled="false"></ejs-dropdownlist> |
| Enable | Method: enable<ej-drop-down-list />$(‘#dropdown’).ejDropDownList(‘enable’) |
Property: enabled<ejs-dropdownlist enabled="true"></ejs-dropdownlist> |
| Height | Property: height <ej-drop-down-list height="300px"/> |
Property: height <ejs-dropdownlist height="300px"></ejs-dropdownlist> |
| Width | Property: width <ej-drop-down-list width="300px"/> |
Property: width <ejs-dropdownlist width="300px"></ejs-dropdownlist> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Selecting particular index | Property: selected-index<ej-drop-down-list selected-index="3"/> |
Property: index<ejs-dropdownlist index="3"></ejs-dropdownlist> |
| Selecting particular value | Property: value<ej-drop-down-list value="3"/> |
Property: value<ejs-dropdownlist value="3"></ejs-dropdownlist> |
| Selecting particular text | Property: text <ej-drop-down-list text="3"/> |
Property: text<ejs-dropdownlist text="data"></ejs-dropdownlist> |
| Target id | Property: targetId <ej-drop-down-list target-id="carsList"/> |
Not applicable |
| Selecting item using text | Method: selectItemByText <ej-drop-down-list/>$(‘#dropdown’).ejDropDownList(‘selectItemByText’,‘car’) |
Not applicable |
| Unselect item using text | Method: unselectItemByText<ej-drop-down-list/>$(‘#dropdown’).ejDropDownList(‘unselectItemByText’,‘car’) |
Not applicable |
| Selecting item using value | Method: selectItemByValue<ej-drop-down-list/>$(‘#dropdown’).ejDropDownList(‘selectItemByValue’,‘car’) |
Not applicable |
| Getting data by using value | Method: getItemDataByValue<ej-drop-down-list></ej-drop-down-list>$('#dropdown').ejDropDownList('unselectItemByValue','car') |
Method: getDataByValue<ejs-dropdownlist></ejs-dropdownlist>var ddlObj = document.getElementById(dropdownlist).ej2_Instances[0];ddlObj.getItemDataByValue("data"); |
| Get selected value | Method: getSelectedItem<ej-drop-down-list/>$(‘#dropdown’).ejDropDownList(‘getSelectedItem’) |
Not applicable |
| Get selected text | Method: getSelectedText<ej-drop-down-list/>$(‘#dropdown’).ejDropDownList(‘getSelectedText’) |
Property: text<ejs-dropdownlist text="data"></ejs-dropdownlist> |
| Select event | Event: select<ej-drop-down-list select="onSelect"/> |
Event: select<ejs-dropdownlist select="onSelect"></ejs-dropdownlist> |
| Addition of Html attributes | Property: html-attributes<ej-drop-down-list html-attributes="attrib"></ej-drop-down-list> |
Property: htmlAttributes<ejs-dropdownlist htmlAttributes =" ="@ViewBag.attributes" /> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Adding new item | Method : addItem<ej-drop-down-list></ej-drop-down-list>$('#dropdown').ejDropDownList("addItem", {text:"India"}); |
Method: addItem<ejs-dropdownlist/>var ddlObj = document.getElementById(dropdownlist).ej2_Instances[0];ddlObj.addItem({Id: 'game4', Game: 'Golf'}, 2); |
| Clearing the text | Method : clearText<ej-drop-down-list></ej-drop-down-list>$('#dropdown').ejDropDownList('clearText') |
Property:* showClearButton*<ejs-dropdownlist showClearButton=true/> |
| Destroy the component | Method : destroy<ej-drop-down-list></ej-drop-down-list>$('#dropdown').ejDropDownList('destroy') |
Method: destroy<ejs-dropdownlist/>var ddlObj = document.getElementById(dropdownlist).ej2_Instances[0];ddlObj.destroy; |
| Getting the data | Method : getListData<ej-drop-down-list></ej-drop-down-list>$('#dropdown').ejDropDownList('getListData') |
Method : getItems<ejs-dropdownlist/>var ddlObj = document.getElementById(dropdownlist).ej2_Instances[0];ddlObj.getItems; |
| Create event | Event: create<ej-drop-down-list create="onCreate"></ej-drop-down-list> |
Event: created<ejs-dropdownlist created ="created" /> |
| Destroy event | Event: destroy<ej-drop-down-list destroy="ondestroy"></ej-drop-down-list> |
Event: destroyed<ejs-dropdownlist destroyed ="destroy" /> |
| Cascade event | Event: cascade<ej-drop-down-list cascade="cascade"></ej-drop-down-list> |
https://ej2.syncfusion.com/demos/#/material/drop-down-list/cascading.html |
| Change event | Event: change<ej-drop-down-list create="change"></ej-drop-down-list> |
Event: change<ejs-dropdownlist change ="change" /> |
| Focus out event | Event: focusOut<ej-drop-down-list focus-out="focus"></ej-drop-down-list> |
Event: blur<ejs-dropdownlist blur ="blur" /> |
| Focus in event | Event: focusIn<ej-drop-down-list focus-in="focus"></ej-drop-down-list> |
Event: focus<ejs-dropdownlist focus ="onfofus" /> |