Migration from Essential JS 1

21 Feb 202210 minutes to read

This article describes the API migration process of ComboBox 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().ComboBox("select").Datasource((IEnumerable<CarsList>)ViewBag.datasource).Render() 		Property: DataSource
@Html.EJS().ComboBox("games").DataSource((IEnumerable<object>)ViewBag.localdata).Render()
Fields for mapping Property: ComboBoxFields
Html.EJ().ComboBox("select").ComboBoxFields(f=>f.Text("text")).Render() 		Property: Fields
@Html.EJS().ComboBox("games").Fields(new ComboBoxFieldSettings { Text = "Game", Value = "Id" }).Render()
Query Property: Query
Html.EJ().ComboBox("select").Query("ej.Query().from('Suppliers').select('SupplierID', 'ContactName')").Render() 		Property: Query
@Html.EJS().ComboBox("games").Query((string)ViewBag.query).Render()
Begin event Event:ActionBegin
Html.EJ().ComboBox("select").ActionBegin("onBegin").Render() 		Event: ActionBegin
Html.EJ().ComboBox("select").ActionBegin("onBegin").Render()
Complete event Event:ActionComplete
Html.EJS().ComboBox("select").ActionComplete("onComplete").Render() 		Event: ActionComplete
Html.EJS().ComboBox("select").ActionComplete("onComplete").Render()
Failure event Event:ActionFailure
Html.EJ().ComboBox("select").ActionFailure("onFailure").Render() 		Event: ActionFailure
Html.EJS().ComboBox("select").ActionFailure("onFailure").Render()

Filtering

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: AllowFiltering
Html.EJ().ComboBox("select").AllowFiltering(true).Render() 		Property: AllowFiltering
Html.EJS().ComboBox("select").AllowFiltering(true).Render()
No records template Property: NoRecordsTemplate
Html.EJ().ComboBox("select").NoRecordsTemplate("<span class='norecord'> NO DATA AVAILABLE</span>").Render() 		Property: NoRecordsTemplate
Html.EJS().ComboBox("select").NoRecordsTemplate("<span class='norecord'> NO DATA AVAILABLE</span>").Render()
Ignore casing and diacritics Not Applicable Property: IgnoreAccent
Html.EJS().ComboBox("select").AllowFiltering(true).Render()
Custom value addition Property: AllowCustom
Html.EJ().ComboBox("select").AllowCustom(true).Render() 		https://ej2.syncfusion.com/aspnetmvc/ComboBox/CustomValue#/material
Search event Event: Filtering
Html.EJ().ComboBox("select").Filtering("Filtering").Render() 		Event: Filtering
Html.EJS().ComboBox("select").Filtering("Filtering").Render()

Template

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: ItemTemplate
Html.EJ().ComboBox("select").ItemTemplate("<div><img class='eimg' src='../images/combobox/${eimg}.png' alt='employee'/><div class='ename'> ${text} </div><div class='temp'> ${country} </div></div>").Render() 		Property: ItemTemplate
Html.EJS().ComboBox("select").ItemTemplate("<div><img class='eimg' src='../images/combobox/${eimg}.png' alt='employee'/><div class='ename'> ${text} </div><div class='temp'> ${country} </div></div>").Render()
Group Template Property: GroupTemplate
Html.EJ().ComboBox("select").GroupTemplate("<strong>${country}</strong>").Render() 		Property: GroupTemplate
Html.EJS().ComboBox("select").GroupTemplate("<strong>${country}</strong>").Render()
ValueTemplate Not Applicable Property: ValueTemplate
Html.EJS().ComboBox("select").ValueTemplate("<span class='norecord'> NO DATA AVAILABLE</span>").Render()
Header Template Property: HeaderTemplate
Html.EJ().ComboBox("select").HeaderTemplate("<div class='head'> Photo <span style='padding-left:42px'> Contact Info </span></div>").Render() 		Property: HeaderTemplate
Html.EJS().ComboBox("select").HeaderTemplate("<div class='head'> Photo <span style='padding-left:42px'> Contact Info </span></div>").Render()
FooterTemplate Property: FooterTemplate
Html.EJ().ComboBox("select").FooterTemplate("<div class='Foot'> Total Items Count: 5 </div>").Render() 		Property: FooterTemplate
Html.EJS().ComboBox("select").FooterTemplate("<div class='Foot'> Total Items Count: 5 </div>").Render()
No records Template Property: NoRecordsTemplate
Html.EJ().ComboBox("select").NoRecordsTemplate("<span class='norecord'> NO DATA AVAILABLE</span>").Render() 		Property: NoRecordsTemplate
Html.EJS().ComboBox("select").NoRecordsTemplate("<span class='norecord'> NO DATA AVAILABLE</span>").Render()
Auto fill Property: AutoFill
Html.EJ().ComboBox("select").AutoFill(true).Render() 		Property: AutoFill
Html.EJS().ComboBox("select").AutoFill(true).Render()
Action failure Template Property: ActionFailureTemplate
Html.EJ().ComboBox("select").ActionFailureTemplate("<span class='action-failure'>Data fetch get fails</span>").Render() 		Property: ActionFailureTemplate
Html.EJS().ComboBox("select").ActionFailureTemplate("<span class='action-failure'>Data fetch get fails</span>").Render()

Applying CSS

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: CssClass
Html.EJ().ComboBox("select").CssClass("customclass").Render() 		Property: CssClass
Html.EJS().ComboBox("select").CssClass("customclass").Render()
width Property: Width
Html.EJ().ComboBox("select").Width("300px").Render() 		Property: Width
Html.EJS().ComboBox("select").Width("300px").Render()

Grouping

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: ComboBoxFields
Html.EJ().ComboBox("select").ComboBoxFields(f=>f.GroupBy("text")).Render() 		Property: Fields
@Html.EJS().ComboBox("games").Fields(new ComboBoxFieldSettings { GroupBy = "Game" }).Render()

Accessibility

Behavior API in Essential JS 1 API in Essential JS 2
Globalizaation Property: Locale
Html.EJ().ComboBox("select").Locale("fr-FE").Render() 		Property: Locale
Html.EJS().ComboBox("select").Locale("fr-FE").Render()
Rtl support Property: EnableRtl
Html.EJ().ComboBox("select").EnableRtl(true).Render() 		Property: EnableRtl
Html.EJS().ComboBox("select").EnableRtl(true).Render()

Placeholder

Behavior API in Essential JS 1 API in Essential JS 2
Watermark text Property: Placeholder
Html.EJ().ComboBox("select").Placeholder("Select").Render()
Property: Placeholder
Html.EJS().ComboBox("select").Placeholder("Select").Render()
Floating of waterMarkText Not applicable Property: FloatLabelType
Html.EJS().ComboBox("select").FloatLabelType(FloatLabelType .Auto).Render()

Miscellaneous

Behavior API in Essential JS 1 API in Essential JS 2
Enable/disable Property: Enabled
Html.EJ().ComboBox("select").Enabled(true).Render() 		Property: Enabled
Html.EJS().ComboBox("select").Enabled(true).Render()
Read only Property: ReadOnly
Html.EJ().ComboBox("select").ReadOnly(true).Render() 		Property: ReadOnly
Html.EJS().ComboBox("select").ReadOnly(true).Render()
Addition of Html attributes Property: HtmlAttributes
Html.EJ().ComboBox("select").HtmlAttributes(ViewBag.attr).Render() 		Property: HtmlAttributes
Html.EJS().ComboBox("select").HtmlAttributes(ViewBag.attr).Render()

Sorting

Behavior API in Essential JS 1 API in Essential JS 2
Order of sorting Property: SortOrder
Html.EJ().ComboBox("select").SortOrder(SortOrder.Ascending).Render() 		Property: SortOrder
Html.EJS().ComboBox("select").SortOrder(SortOrder.Ascending).Render()

Selection

Behavior API in Essential JS 1 API in Essential JS 2
Selecting particular index Property: Index
Html.EJ().ComboBox("select").Index(1).Render() 		Property: Index
Html.EJS().ComboBox("select").Index(1).Render()
Selecting particular value Property: Value
Html.EJ().ComboBox("select").Value("Car").Render() 		Property: Value
Html.EJS().ComboBox("select").Value("Car").Render()
Selecting particular text Property: Text
Html.EJ().ComboBox("select").Text("Car").Render() 		Property: Text
Html.EJ()S.ComboBox("select").Text("Car").Render()
Getting data by using value Method: getItemDataByValue
Html.EJ().ComboBox("dropdown").Render()

$(‘#dropdown’).ejDropDownList(‘getItemDataByValue’,”data”)		 Method: getDataByValue
Html.EJ().ComboBox("combobox").Render()

var cmbObj = document.getElementById(combobox).ej2_Instances[0];

cmbObj.getDataByValue(“data”);
Select event Event: Select
Html.EJ().ComboBox("dropdown").Select("onSelect").Render() 		Event: Select
Html.EJS().ComboBox("dropdown").Select("onSelect").Render()
Behavior API in Essential JS 1 API in Essential JS 2
Popup height Property: PopupHeight
Html.EJ().ComboBox("dropdown").PopupHeight("300px").Render() 		Event:Popupheight
Html.EJS().ComboBox("dropdown").PopupHeight("300px").Render()
Popup width Property: PopupWidth
Html.EJ().ComboBox("dropdown").PopupWidth("300px").Render() 		Event:PopupWidth
Html.EJS().ComboBox("dropdown").PopupWidth("300px").Render()
Popup showing manually Method: showPopup
Html.EJ().ComboBox("dropdown").Render()

$(‘#dropdown’).ejComboBox(“showPopup”);		 Method: showPopup
Html.EJS().ComboBox("combobox").Render()

var cmbObj = document.getElementById(combobox).ej2_Instances[0];

cmbObj.showPopup();
Popup hiding manually Method: hidePopup
Html.EJ().ComboBox("dropdown").Render()

$(‘#dropdown’).ejComboBox(“hidePopup”);		 Method: hidePopup
Html.EJS().ComboBox("combobox").Render()

var cmbObj = document.getElementById(combobox).ej2_Instances[0];

cmbObj.hidePopup();
Popup hide event Event: Close
Html.EJ().ComboBox("dropdown").Close("onClose").Render() 		Event: Close
Html.EJS().ComboBox("dropdown").Close("onClose").Render()
Popup shown event Event: Open
Html.EJ().ComboBox("dropdown").Open("onOpen").Render() 		Event: Open
Html.EJS().ComboBox("dropdown").Open("onOpen").Render()

Common

Behavior API in Essential JS 1 API in Essential JS 2
Adding new item Method : addItem
Html.EJ().ComboBox("dropdown").Render()

$(‘#dropdown’).ejComboBox(“addItem”, { text :”India”});		 Method: addItem
Html.EJ().ComboBox("combobox").Render()

var cmbObj = document.getElementById(combobox).ej2_Instances[0];

cmbObj.addItem({Id: ‘id’, Game: ‘Golf’},2);
Focus out event Not applicable Event: Blur
Html.EJS().ComboBox("dropdown").Blur("onBlur").Render()
Focus in event Event: Focus
Html.EJ().ComboBox("dropdown").Focus("onFocus").Render() 		Event: FocusIn
Html.EJS().ComboBox("dropdown").Focus("onFocus").Render()
Focus out Method: focusOut
Html.EJ().ComboBox("dropdown").Render()

$(‘#dropdown’).ejComboBox(“focusOut”);		 Method: focusOut
Html.EJS().ComboBox("combobox").Render()

var cmbObj = document.getElementById(combobox).ej2_Instances[0];

cmbObj.focusOut();
Focus in Method: focusIn
Html.EJ().ComboBox("dropdown").Render()

$(‘#dropdown’).ejComboBox(“focusIn”);		 Method: focusIn
Html.EJS().ComboBox("combobox").Render()

var cmbObj = document.getElementById(combobox).ej2_Instances[0];

cmbObj.focusIn();
Getting the data Method : getItems
Html.EJ().ComboBox("dropdown").Render()

$(‘#dropdown’).ejComboBox(“getItems”);		 Method: getItems
Html.EJS().ComboBox("combobox").Render()

var cmbObj = document.getElementById(combobox).ej2_Instances[0];

cmbObj.getItems();
Create event Event: Create
Html.EJ().ComboBox("dropdown").Create("onCreate").Render() 		Event: Created
Html.EJS().ComboBox("dropdown").Created("onCreate").Render()
Change event Event: Change
Html.EJ().ComboBox("dropdown").Change("onChange").Render() 		Event: Change
Html.EJS().ComboBox("dropdown").Change("onChange").Render()
Custom value event Event: custom-value-specifier
Html.EJ().ComboBox("dropdown").CustomValueSpecifier("fucntion").Render() 		Event: CustomValueSpecifier
Html.EJS().ComboBox("dropdown").CustomValueSpecifier("fucntion").Render()