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

25 Oct 2021 / 7 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 `@Html.EJ().DropDownList("countryList").Datasource((IEnumerable<Countries>)ViewBag.datasource1)`	Property: dataSource `@Html.EJS().DropDownList("games").DataSource((IEnumerable<object>)ViewBag.localdata).Render()`
Fields for mapping	Property: DropDownListFields `@Html.EJ().DropDownList("groupsList").DropDownListFields(f => f.Value("parentId").Text("text"))`	Property: Fields `@Html.EJS().DropDownList("games").Fields(new DropDownListFieldSettings { Text = "Game" }).Render()`
Query	Property: Query `@Html.EJ().DropDownList("groupsList").Query("ej.Query().from('Customers').take(6)")`	Property: Query `@Html.EJS().DropDownList("games").Query((string)ViewBag.query).Render()`
Begin event	Event :ActionBegin `@Html.EJ().DropDownList("selectCompany").ActionBegin("onBegin")`	Event : actionBegin `@Html.EJS().DropDownList("customers").ActionBegin("onBegin").Render()`
Complete event	Event: ActionComplete `@Html.EJ().DropDownList("selectCompany").ActionComplete("onBegin")`	Event: ActionComplete `@Html.EJS().DropDownList("customers").ActionComplete("ActionComplete").Render()`
Failure event	Event: ActionFailure `@Html.EJ().DropDownList("selectCompany").ActionFailure("onFailure")`	Event: ActionFailure `@Html.EJS().DropDownList("customers").ActionFailure("ActionFailure").Render()`
Success event	Event: ActionSuccess `@Html.EJ().DropDownList("selectCompany").ActionSuccess("onsuccess")`	Not Applicable
Data binding event	Event: DataBound `@Html.EJ().DropDownList("selectCompany").DataBound("onBound")`	Event: DataBound `@Html.EJS().DropDownList("customers").DataBound("onBound").Render()`

Filtering

Behavior	API in Essential JS 1	API in Essential JS 2
Default	Property: EnableFilterSearch `@Html.EJ().DropDownList("selectCompany").EnableFilterSearch(true)`	Property: AllowFiltering `@Html.EJS().DropDownList("customers").AllowFiltering(true).Render()`
Server filtering	Property: EnableServerFiltering `@Html.EJ().DropDownList("selectCompany").EnableServerFiltering(true)`	Property: AllowFiltering `@Html.EJS().DropDownList("customers").AllowFiltering(true).Render()`
Filter type	Property: FilterType `@Html.EJ().DropDownList("selectCompany").FilterType(SearchFilterType.StartsWith)`	https://ej2.syncfusion.com/aspnetmvc/DropDownList/Filtering#/material
No Records Template	Not Applicable	Property: NoRecordsTemplate `@Html.EJS().DropDownList("games").NoRecordsTemplate("<span class='norecord'> NO DATA AVAILABLE</span>").Render()`
Filter Bar watermarktext	Not Applicable	Property: FilterBarPlaceholder `@Html.EJS().DropDownList("customers").FilterBarPlaceholder(true).Render()`
Ignore casing and diacritics	Not Applicable	Property: IgnoreAccent `@Html.EJS().DropDownList("customers").IgnoreAccent(true).Render()`
Incremental search	Property: EnableIncrementalSearch `@Html.EJ().DropDownList("selectCompany").EnableIncrementalSearch(true)`	By default it is true
Case sensitivity	Property: CaseSensitiveSearch `@Html.EJ().DropDownList("selectCompany").CaseSensitiveSearch(true)`	https://ej2.syncfusion.com/aspnetmvc/DropDownList/Filtering#/material
Search event	Event: Search `@Html.EJ().DropDownList("selectCompany").Search("onSearch")`	Event: Filtering `@Html.EJS().DropDownList("customers").Filtering("filtering").Render()`

Template

Behavior	API in Essential JS 1	API in Essential JS 2
Default	Property: Template `@Html.EJ().DropDownList("selectCompany").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>")`	Property: ItemTemplate `@Html.EJS().DropDownList("customers").ItemTemplate("@Html.Raw("<span><span class='name'>${FirstName}</span><span class ='city'>${City}</span></span>")").Render()`
Group Template	Not Applicable	Property: GroupTemplate `@Html.EJS().DropDownList("customers").GroupTemplate("@Html.Raw("<strong>${City}</strong>")").Render()`
ValueTemplate	Not Applicable	Property: ValueTemplate `@Html.EJS().DropDownList("customers").ValueTemplate(""@Html.Raw("<span>${FirstName} - ${City}</span>")").Render()`
Header Template	Property: HeaderTemplate `@Html.EJ().DropDownList("selectCompany").HeaderTemplate("<div class='eheader'><span>PHOTO</span> <span>DETAILS</span></div>").Render()`	Property: HeaderTemplate `@Html.EJS().DropDownList("customers").HeaderTemplate("@Html.Raw("<span class='head'><span class='name'>Name</span><span class='city'>City</span></span>")").Render()`
FooterTemplate	Not applicable	Property: FooterTemplate `@Html.EJS().DropDownList("customers").FooterTemplate("@Html.Raw("<span class='foot'> Total list items: " + 8 + "</span>")").Render()`
No records Template	Not applicable	Property: NoRecordsTemplate `@Html.EJS().DropDownList("customers").NoRecordsTemplate("@Html.Raw("<span class='norecord'> NO DATA AVAILABLE</span>")").Render()`
Action failure Template	Not applicable	Property: ActionFailureTemplate `@Html.EJS().DropDownList("customers").ActionFailureTemplate("@Html.Raw("<span class='action-failure'> Data fetch get fails</span>")").Render()`

Virtual Scrolling

Behavior	API in Essential JS 1	API in Essential JS 2
Default	Property: AllowVirtualScrolling `@Html.EJ().DropDownList("customers").AllowVirtualScrolling(true)`	Not applicable

Applying CSS

Behavior	API in Essential JS 1	API in Essential JS 2
Default	Property: CssClass `@Html.EJ().DropDownList("customers").CssClass("customClass")`	Property: CssClass `@Html.EJS().DropDownList("customers").CssClass("class").Render()`
showRoundedCorner	Property: ShowRoundedCorner `@Html.EJ().DropDownList("customers").ShowRoundedCorner(true)`	Property: CssClass `@Html.EJS().DropDownList("customers").CssClass("class").Render()`

Sorting

Behavior	API in Essential JS 1	API in Essential JS 2
Default	Property: EnableSorting `@Html.EJ().DropDownList("customers").EnableSorting(true)`	Enabled only on using sortorder Property
Order of sorting	Property: SortOrder `@Html.EJ().DropDownList("customers").SortOrder("SortOrder.Descending")`	Property: SortOrder `@Html.EJS().DropDownList("customers").SortOrder("Ascending").Render()`

Behavior	API in Essential JS 1	API in Essential JS 2
Popup height	Property: PopupHeight `@Html.EJ().DropDownList("customers").PopupHeight("550px")`	Property: PopupHeight `@Html.EJS().DropDownList("customers").PopupHeight("220px").Render()`
Popup width	Property: PopupWidth `@Html.EJ().DropDownList("customers").PopupWidth("550px")`	Property: PopupWidth `@Html.EJS().DropDownList("customers").PopupWidth("300px").Render()`
Popup show on load	Property: ShowPopupOnLoad `@Html.EJ().DropDownList("customers").ShowPopupOnLoad(true)`	By default, the data load on demand.
enableAnimation	Property: EnableAnimation `@Html.EJ().DropDownList("customers").EnableAnimation(true)`	Not applicable
Popup resizing	Property: EnablePopupResize `@Html.EJ().DropDownList("customers").EnablePopupResize(true)`	Not applicable
Maximum Popup height	Property: MaxPopupHeight `@Html.EJ().DropDownList("customers").MaxPopupHeight("550px")`	Not applicable
Minimum Popup height	Property: min-popup-height `@Html.EJ().DropDownList("customers").MinPopupHeight("550px")` });	Not applicable
Maximum Popup width	Property: MaxPopupWidth `@Html.EJ().DropDownList("customers").MaxPopupWidth("550px")`	Not applicable
Minimum Popup width	Property: MinPopupWidth `@Html.EJ().DropDownList("customers").MinPopupWidth("550px")`	Not applicable
Loading data	Property: LoadOnDemand `@Html.EJ().DropDownList("customers").LoadOnDemand(true)`	By default, it is true
Popup showing manually	Method: showPopup `@Html.EJ().DropDownList("dropdown")` `$('#dropdown').ejDropDownList('showPopup')`	Method: showPopup `@Html.EJS().DropDownList("dropdown").Render()` `var ddlObj = document.getElementById('dropdown').ej2_Instances[0];` `ddlObj.showPopup();`
Popup hiding manually	Method: hidePopup `@Html.EJ().DropDownList("dropdown")` `$('#dropdown').ejDropDownList('hidePopup')`	Method: HidePopup `@Html.EJS().DropDownList("dropdownlist").Render()` `var ddlObj = document.getElementById("dropdownlist").ej2_Instances[0];` `ddlObj.hidePopup();`
Before Popup hide event	Event: BeforePopupHide `@Html.EJ().DropDownList("dropdown").BeforePopupHide("event")`	Not applicable
Before Popup shown event	Event: BeforePopupShown `@Html.EJ().DropDownList("dropdown").BeforePopupShown("event")`	Event: BeforeOpen `@Html.EJS().DropDownList("dropdown").BeforeOpen("event").Render()`
Popup hide event	Event: PopupHide `@Html.EJ().DropDownList("dropdown").PopupHide("event")`	Event: Close `@Html.EJS().DropDownList("dropdown").Close("event").Render()`
Popup resize event	Event: PopupResize `@Html.EJ().DropDownList("dropdown").PopupResize("event")`	Not applicable
Popup resize start event	Event: PopupResizeStart `@Html.EJ().DropDownList("dropdown").PopupResizeStart("event")`	Not applicable
Popup resize stop event	Event: popupResizeStop `@Html.EJ().DropDownList("dropdown").PopupResizeStop("event")`	Not applicable
Popup shown event	Event: Popupshown `@Html.EJ().DropDownList("dropdown").PopupShown("event")`	Event: Open `@Html.EJS().DropDownList("dropdown").Open("event").Render()`

Placeholder

Behavior	API in Essential JS 1	API in Essential JS 2
Watermark text	Property: WatermarkText `@Html.EJ().DropDownList("dropdown").WatermarkText("Select")`	Property: Placeholder `@Html.EJS().DropDownList("dropdown").PlaceHolder("Select").Render()`
Floating of waterMarkText	Not applicable	Property: FloatLabelType `@Html.EJS().DropDownList("dropdown").FloatLabelType("Auto").Render()`

Grouping

Behavior	API in Essential JS 1	API in Essential JS 2
Default	Property: fields.groupBy `@Html.EJ().DropDownList("groupsList").DropDownListFields(f => f.GroupBy("parentId"))`	Property: fields.groupBy >`@Html.EJS().DropDownList("games").Fields(new DropDownListFieldSettings { GroupBy = "Game" }).Render()`
Group Template	Not applicable	Property: GroupTemplate `@Html.EJS().DropDownList("customers").GroupTemplate("@Html.Raw("<strong>${City}</strong>")").Render()`

Accessibility

Behavior	API in Essential JS 1	API in Essential JS 2
Globalization	Property: Locale `@Html.EJ().DropDownList("customers").Locale("fr-FE")`	Property: Locale `@Html.EJS().DropDownList("customers").Locale("fr-FE").Render()`
Rtl support	Property: EnableRtl `@Html.EJ().DropDownList("customers").EnableRtl(true)`	Property: EnableRtl `@Html.EJS().DropDownList("customers").EnableRtl(true).Render()`

Miscellaneous

Behavior	API in Essential JS 1	API in Essential JS 2
Enable/disable	Property: Enabled `@Html.EJ().DropDownList("customers").Enabled(true)`	Property: Enabled `@Html.EJS().DropDownList("customers").Enabled(true).Render()`
Read only	Property: ReadOnly `@Html.EJ().DropDownList("customers").ReadOnly(true)`	Property: ReadOnly `@Html.EJS().DropDownList("customers").ReadOnly(true).Render()`
Persistence of data	Property: EnablePersistence `@Html.EJ().DropDownList("customers").EnablePersistence(true)`	Property: EnablePersistence `@Html.EJS().DropDownList("customers").EnablePersistence(true).Render()`
Disable	Method: disable `@Html.EJ().DropDownList("dropdown")` $(‘#dropdown’).ejDropDownList(‘disable’)	Property: Enabled `@Html.EJS().DropDownList("customers").Enabled(false).Render()`
Enable	Method: enable `@Html.EJ().DropDownList("dropdown")` $(‘#dropdown’).ejDropDownList(‘enable’)	Property: Enabled `@Html.EJS().DropDownList("customers").Enabled(true).Render()`
Height	Property: Height `@Html.EJ().DropDownList("dropdown").Height("300px")`	Property: Height `@Html.EJS().DropDownList("customers").Height("300px").Render()`
Width	Property: Width `@Html.EJ().DropDownList("dropdown").Width("300px")`	Property: Width `@Html.EJS().DropDownList("customers").Width("300px").Render()`

Selection

Behavior	API in Essential JS 1	API in Essential JS 2
Selecting particular index	Property: selected-index `@Html.EJ().DropDownList("dropdown").Index(3)`	Property: index `@Html.EJS().DropDownList("customers").Index(3).Render()`
Selecting particular value	Property: value `@Html.EJ().DropDownList("dropdown").Value(3)`	Property: value `@Html.EJS().DropDownList("customers").Value(3).Render()`
Selecting particular text	Property: text `@Html.EJ().DropDownList("dropdown").Text("data")`	Property: text `@Html.EJS().DropDownList("customers").Text("data").Render()`
Target id	Property: targetId `@Html.EJ().DropDownList("dropdown").TargetId("data")`	Not applicable
Selecting item using text	Method: selectItemByText `@Html.EJ().DropDownList("dropdown")` $(‘#dropdown’).ejDropDownList(‘selectItemByText’,‘car’)	Not applicable
Unselect item using text	Method: unselectItemByText `@Html.EJ().DropDownList("dropdown")` $(‘#dropdown’).ejDropDownList(‘unselectItemByText’,‘car’)	Not applicable
Selecting item using value	Method: selectItemByValue `@Html.EJ().DropDownList("dropdown")` $(‘#dropdown’).ejDropDownList(‘selectItemByValue’,‘car’)	Not applicable
Getting data by using value	Method: getItemDataByValue `@Html.EJ().DropDownList("dropdown")` `$('#dropdown').ejDropDownList('unselectItemByValue','car')`	Method: getDataByValue `@Html.EJS().DropDownList("dropdownlist").Render()` `var ddlObj = document.getElementById("dropdownlist").ej2_Instances[0];` `ddlObj.getItemDataByValue("data");`
Get selected value	Method: getSelectedItem `@Html.EJ().DropDownList("dropdown")` $(‘#dropdown’).ejDropDownList(‘getSelectedItem’)	Not applicable
Get selected text	Method: getSelectedText `@Html.EJ().DropDownList("dropdown")` $(‘#dropdown’).ejDropDownList(‘getSelectedText’)	Property: text `@Html.EJS().DropDownList("customers").Text("data").Render()`
Select event	Event: select `@Html.EJ().DropDownList("dropdown").select("onSelect")`	Event: select `@Html.EJS().DropDownList("customers").Select("onSelect").Render()`
Addition of Html attributes	Property: html-attributes `@Html.EJS().DropDownList("customers").HtmlAttributes((IDictionary<string,object>)ViewData["HtmlAttrData"])`	Property: htmlAttributes `@Html.EJS().DropDownList("customers").HtmlAttributes(@ViewBag.data).Render()`

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" />`

Contents

DataBinding
Filtering
Template
Virtual Scrolling
Applying CSS
Sorting
Popup
Placeholder
Grouping
Accessibility
Miscellaneous
Selection
Common

Contents

DataBinding
Filtering
Template
Virtual Scrolling
Applying CSS
Sorting
Popup
Placeholder
Grouping
Accessibility
Miscellaneous
Selection
Common

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!

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

DataBinding

Filtering

Template

Virtual Scrolling

Applying CSS

Sorting

Popup

Placeholder

Grouping

Accessibility

Miscellaneous

Selection

Common