Migration from Essential JS 1
12 Apr 202216 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-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>
|
Filtering
| 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>
|
Template
| 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>
|
Virtual Scrolling
| 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 |
Applying CSS
| 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>
|
Sorting
| 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>
|
Popup
| 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"/>
|
Placeholder
| 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"/>
|
Grouping
| 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>
|
Accessibility
| 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>
|
Miscellaneous
| 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>
|
Selection
| 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" />
|
Common
| 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" />
|