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 @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() |
| 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() |
| 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() |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Default | Property: AllowVirtualScrolling @Html.EJ().DropDownList("customers").AllowVirtualScrolling(true) |
Not applicable |
| 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() |
| 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() |
| 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() |
| 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() |
| 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() |
| 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() |
| 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() |
| 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" /> |