Contents
- DataBinding
- Filtering
- Template
- Virtual Scrolling
- Applying CSS
- Sorting
- Popup
- Placeholder
- Grouping
- Accessibility
- Miscellaneous
- Selection
- Common
Having trouble getting help?
Contact Support
Contact Support
Migration from Essential® JS 1
8 Dec 202416 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()
|
Popup
| 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" />
|