Search results

Migration from Essential JS 1

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