ASP.NET Core
Demos
Support
Forum
Download
Search results

Migration from Essential JS 1 in ASP.NET Core DropDownList control

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>
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" />
Previous
Next