Migration from Essential JS 1
21 Feb 202223 minutes to read
This article describes the API migration process of multiselect component from Essential JS 1 to Essential JS 2.
Accessibility and Localization
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Localization |
Property : locale<ej-drop-down-list locale="en-US"></ej-drop-down-list>
|
Property : locale<ejs-multiselect locale="en-US" />
|
| Right to left |
Property: enable-rtl <ej-drop-down-list enable-rtl="true"></ej-drop-down-list>
|
Property: enableRtl<ejs-multiselect enableRtl="true" />
|
Animation
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Animation |
Property : enable-animation<ej-drop-down-list enable-animation="true "></ej-drop-down-list>
|
Not Applicable |
Template
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Header Template |
Property : header-template<ej-drop-down-list header-template="<div class='eheader'><span>PHOTO</span> <span>DETAILS</span></div>" ></ej-drop-down-list>
|
Property : headerTemplate<ejs-multiselect headerTemplate="@Html.Raw("<span class='head'><span class='name'>Name</span><span class='city'>City</span></span>")" />
|
| Item Template |
Property : item-template<ej-drop-down-list template="<div><div class='ename'> ${Text} </div></div>" ></ej-drop-down-list>
|
Property : itemTemplate<ejs-multiselect itemTemplate="@Html.Raw("<span class='item' ><span class='name'>${FirstName}</span><span class='city'>${City}</span></span>")"/>
|
| Footer Template | Property : Not Applicable |
Property : footerTemplate<ejs-multiselect footerTemplate="@Html.Raw("<span class='foot'> Total list items: " + 4 + "</span>")"/>
|
| Group Template | Property : Not Applicable |
Property : groupTemplate<ejs-multiselect groupTemplate="@Html.Raw("<strong>${City}</strong>")"/>
|
| Value Template | Property : Not Applicable |
Property : valueTemplate<ejs-multiselect valueTemplate="@Html.Raw("<div><span class='name'>${FirstName}</span><span class ='city'>${City}</span></div>")" />
|
| No Records Template | Property : Not Applicable |
Property : noRecordsTemplate<ejs-multiselect noRecordsTemplate="@Html.Raw("<span class='norecord'> NO DATA AVAILABLE</span>")"/>
|
| Action Failure Template | Property : Not Applicable |
Property : actionFailureTemplate<ejs-multiselect actionFailureTemplate="@Html.Raw("<span class='action-failure'> Data fetch get fails</span>")" />
|
Data Binding
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Data Source |
Property : data-source<ej-drop-down-list data-source="(IEnumerable< groups>)ViewBag.datasource"></ej-drop-down-list>
|
Property : dataSource <ejs-multiselect dataSource="@ViewBag.data" />
|
| Query |
Property : query<ej-drop-down-list query="ej.Query().from('Customers').take(6)"><e-datamanager url="https://mvc.syncfusion.com/Services/Northwnd.svc/"></e-datamanager><e-drop-down-list-fields text="CustomerID" table-name="Customers" /></ej-drop-down-list>
|
Property : query<ejs-multiselect query="new ej.data.Query().from('Customers').select(['ContactName','CustomerID']).take(6)"><e-multiselect-fields text="ContactName" value="CustomerID"></e-multiselect-fields><e-datamanager url=http://services.odata.org/V4/Northwind/Northwind.svc/ adaptor="ODataV4Adaptor" crossDomain="true"></e-datamanager></ejs-multiselect>
|
| Fields |
Property : fields<ej-drop-down-list datasource="(IEnumerable< groups>)ViewBag.datasource<e-drop-down-list-fields text="CustomerID" table-name="Customers" /></ej-drop-down-list>
|
Property : fields<ejs-multiselect dataSource = "@ViewBag.data"><e-multiselect-fields text="ContactName" value="CustomerID"></e-multiselect-fields></ejs-multiselect>
|
| Action Begin |
Event : action-begin<ej-drop-down-list action-begin="onActionBeign" />
|
Event : actionBegin<ejs-multiselect actionBegin=" onactionBegin"/>
|
| Action Complete |
Event : action-complete<ej-drop-down-list action-complete=" onActionComplete" />
|
Event : actionComplete<ejs-multiselect actionComplete=" onActionComplete"/>
|
| Action Failure |
Event : action-failure<ej-drop-down-list action-failure="onActionFailure" />
|
Event : actionFailure<ejs-multiselect actionFailure =" onActionFailure"/>
|
| Action Success |
Event : action-success<ej-drop-down-list action-success="onActionSuccess" />
|
Not Applicable |
| Data Bound |
Event : data-bound<ej-drop-down-list data-bound="onBound" />
|
Event : dataBound<ej-multiselect dataBound ="onBound" />
|
Filtering
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Filtering |
Property : enable-filter-search<ej-drop-down-list enable-filter-search = "true" ></ej-drop-down-list>
|
Property : allowFiltering<ejs-multiselect allowFiltering ="true" />
|
| Server Filtering |
Property : enable-server-filtering<ej-drop-down-list enable-server-filtering = "true" ></ej-drop-down-list>
|
Event : filtering<ej-multiselect filtering="onFiltering" />
|
| Sorting |
Property : enable-sorting<ej-drop-down-list enable-sorting = "true" ></ej-drop-down-list>
|
Property : sortOrder<ejs-multiselect sortOrder =" Ascending " />
|
| Case Sensitive Search |
Property : case-sensitive-search<ej-drop-down-list case-sensitive-search ="true"></ej-drop-down-list>
|
Property : ignoreCase<ejs-multiselect ignoreCase=" custom-style" />
|
| Ignore Accent | Not Applicable |
Property : ignoreAccent<ejs-multiselect ignoreAccent ="true"/>
|
| Filter Bar Placeholder | Not Applicable |
Property : filterBarPlaceholder<ejs-multiselect mode="CheckBox" filterBarPlaceholder ="Search Employee"/>
|
| Search |
Event : search<ej-drop-down-list search="onSearch" />
|
Event : filtering<ej-multiselect filtering="onFiltering" />
|
Popups
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Popup Resize |
Property : enable-popup-resize<ej-drop-down-list enable-popup-resize = "true" ></ej-drop-down-list>
|
Not Applicable |
| Maximum Popup Height |
Property : max-popup-height<ej-drop-down-list max-popup-height="300px" />
|
Not Applicable |
| Minimum Popup Height |
Property : min-popup-height<ej-drop-down-list min-popup-height="200px" />
|
Not Applicable |
| Maximum Popup Width |
Property : max-popup-width<ej-drop-down-list max-popup-width="200px" />
|
Not Applicable |
| Maximum Popup Width |
Property : min-popup-width<ej-drop-down-list max-popup-width="100px" />
|
Not Applicable |
| Popup Height |
Property : popup-height<ej-drop-down-list popup-feight="500px" />
|
Property : popupHeight<ejs-multiselect popupHeight ="500px" />
|
| Popup Width |
Property : popup-width <ej-drop-down-list popup-width="500px" />
|
Property : popupWidth<ejs-multiselect popupWidth="500px" />
|
| Show Popup On Load |
Property : show-popup-on-load <ej-drop-down-list show-popup-on-load ="true" />
|
Not Applicable |
| Close Popup On Select | Not Applicable |
Property : closePopupOnSelect <ejs-multiselect closePopupOnSelect =" true"/>
|
| Open On Click | Not Applicable |
Property : openOnClick <ejs-multiselect openOnClick ="true"/>
|
| hidePopup |
Method : hidePopup <ej-drop-down-list />$(‘#dropdown’).ejDropDownList(‘hidePopup’) |
Method : hidePopup <ejs-multiselect/>var mulObj = document.getElementById('multiselect').ej2_Instances[0]; mulObj.hidePopup()
|
| showPopup |
Method : showPopup <ej-drop-down-list />$(‘#dropdown’).ejDropDownList(‘showPopup’) |
Method : showPopup <ejs-multiselect/>var mulObj = document.getElementById('multiselect').ej2_Instances[0]; mulObj.showPopup()
|
| Popup Hide |
Event : popup-hide<ej-drop-down-list popup-hide="onPopupHide" />
|
Event : close<ej-multiselect close ="onClose" />
|
| Popup Shown |
Event : popup-shown<ej-drop-down-list popup-shown="onPopupShow" />
|
Event : open<ej-multiselect open ="onOpen" />
|
| Popup Resize |
Event : popup-resize<ej-drop-down-list popup-resize="onPopupResize" />
|
Not Applicable |
| Popup Resize Start |
Event : popup-resize-start<ej-drop-down-list popup-resize-start="onPopupResizeStart" />
|
Not Applicable |
| Popup Resize Stop |
Event : popup-resize-stop<ej-drop-down-list popup-resize-stop="onPopupResizeStop" />
|
Not Applicable |
| Before Popup Hide |
Event : before-popup-hide<ej-drop-down-list before-popup-hide="onPopupHide" />
|
Not Applicable |
| Before Popup Shown |
Event : before-popup-shown<ej-drop-down-list before-popup- shown ="onPopupShown" />
|
Not Applicable |
Selection
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Selected Index |
Property : selected-index<ej-drop-down-list selected-index="2" />
|
Not Applicable |
| Selected Indices |
Property : selected-Indices @{List<int> index= new List<int> { 1,2 };}<ej-drop-down-list selected-indices ="index" />
|
Property : value viewBag.vlue = [1,2] <ejs-multiselect value = "@ViewBag.value"/>
|
| Maximum Selection Length | Not Applicable |
Property : maximumSelectionLength <ejs-multiselect maximumSelectionLength ="5"/>
|
| Select All Text | Not Applicable |
Property : selectAllText <ejs-multiselect mode="CheckBox" selectAllText ="Check All"/>
|
| Un Select All Text | Not Applicable |
Property : unSelectAllText <ejs-multiselect mode="CheckBox" unSelectAllText ="Un Check All"/>
|
| Selection Order | Not Applicable |
Property : enableSelectionOrder <ejs-multiselect mode="CheckBox" enableSelectionOrder ="true"/>
|
| Hide Selected Item | Not Applicable |
Property : hideSelectedItem <ejs-multiselect hideSelectedItem ="true"/>
|
| Get Selected Item |
Method : getSelectedItem() <ej-drop-down-list />$(‘#dropdown’).ejDropDownList(‘getSelectedItem’) |
Property : value <ejs-multiselect/>var mulObj = document.getElementById('multiselect').ej2_Instances[0]; mulObj.value
|
| Get Selected Value |
Method : getSelectedValue() <ej-drop-down-list />$(‘#dropdown’).ejDropDownList(‘getSelectedValue’) |
Property : value <ejs-multiselect/>var mulObj = document.getElementById('multiselect').ej2_Instances[0]; mulObj.value
|
| Select Items By Indices |
Method : selectItemsByIndices() <ej-drop-down-list />var dropdown = $(“#dropdown “).data(“ejDropDownList”); dropdown.selectItemsByIndices(“2,3”) |
Not Applicable |
| Select Item By Text |
Method : selectItemByText() <ej-drop-down-list />var dropdown = $(“#dropdown “).data(“ejDropDownList”); dropdown.selectItemByText(“Computer IT ,Comics “) |
Not Applicable |
| Select Item By Value |
Method : selectItemByValue() <ej-drop-down-list />var dropdown = $(“#dropdown “).data(“ejDropDownList”); dropdown.selectItemByValue(“Computer IT ,Comics “) |
Not Applicable |
| Un select Items By Indices |
Method : unselectItemsByIndics() <ej-drop-down-list />var dropdown = $(“#dropdown “).data(“ejDropDownList”); dropdown.unselectItemsByIndices (“2,3”) |
Not Applicable |
| Un select Item By Text |
Method : unselectItemByText() <ej-drop-down-list />var dropdown = $(“#dropdown “).data(“ejDropDownList”); dropdown.unselectItemByText (“Computer IT ,Comics “) |
Not Applicable |
| Un select Item By Value |
Method : unselectItemByValue() <ej-drop-down-list />var dropdown = $(“#dropdown “).data(“ejDropDownList”); dropdown.unselectItemByValue (“Computer IT ,Comics “) |
Not Applicable |
| Selected All |
Method : checkAll() <ej-drop-down-list />var dropdown = $(“#dropdown “).data(“ejDropDownList”); dropdown.checkAll() |
Method : selectAll(boolean) <ejs-multiselect/>var mulObj = document.getElementById('multiselect').ej2_Instances[0]; mulObj.selectAll(true)
|
| Un Selected All |
Method : unCheckAll() <ej-drop-down-list />var dropdown = $(“#dropdown “).data(“ejDropDownList”); dropdown.unCheckAll() |
Method : selectAll(boolean) <ejs-multiselect/>var mulObj = document.getElementById('multiselect').ej2_Instances[0]; mulObj.selectAll(false)
|
Common
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Virtual Scrolling |
Property : allow-virtual-scrolling<ej-drop-down-list allow-virtual-scrolling ="true "></ej-drop-down-list>
|
It will be acheived in sample level using actionComplete event |
| Virtual Scroll Mode |
Property : virtual-scroll-mode<ej-drop-down-list allow-virtual-scrolling ="true" virtual-scroll-mode=@VirtualScrollMode.Normal></ej-drop-down-list>
|
Not Applicable |
| Custom class |
Property : css-class<ej-drop-down-list cssClass ="custom-style"></ej-drop-down-list>
|
Property : cssClass<ejs-multiselect cssClass=" custom-style" />
|
| Delimiter Char |
Property : delimiter-char<ej-drop-down-list delimiter-char = "." ></ej-drop-down-list>
|
Property : delimiterChar<ejs-multiselect delimiterChar ="." />
|
| Enable |
Property : enable<ej-drop-down-list enable = "true" ></ej-drop-down-list>
|
Property : enabled <ejs-multiselect enabled ="true" />
|
| Persistence |
Property : enable-persistence<ej-drop-down-list enable-persistence = "true" ></ej-drop-down-list>
|
Property : enablePersistence <ejs-multiselect enablePersistence ="true" />
|
| Load On Demand |
Property : load-on-demand<ej-drop-down-list load-on-demand = "true" ></ej-drop-down-list>
|
By default, provided load on demand support |
| Height |
Property : height<ej-drop-down-list height= "100" ></ej-drop-down-list>
|
Not Applicable |
| Html Attributes |
Property : html-attributes <ej-drop-down-list html-attributes="@ViewBag.attributes" />
|
Property : htmlAttributes <ejs-multiselect htmlAttributes =" ="@ViewBag.attributes" />
|
| Width |
Property : width <ej-drop-down-list width="500px" />
|
Property : width <ejs-multiselect width="500px" />
|
| Mode |
Property : multi-select-mode <ej-drop-down-list multi-select-mode="@MultiSelectModeTypes.Delimiter" />
|
Property : mode 1. Delimeter 2. Box 3. Default 4. CheckBox <ejs-multiselect mode="Delimiter" />
|
| Read Only |
Property : read-only <ej-drop-down-list read-oly="true" />
|
Property : readonly <ejs-multiselect readonly ="true" />
|
| Checkbox |
Property : show-checkbox <ej-drop-down-list show-checkbox="true" />
|
Property : mode <ejs-multiselect mode="CheckBox" />
|
| Rounded Corner |
Property : show-rounded-corner <ej-drop-down-list show-rounded-corner ="true" />
|
Not Applicable |
| Target ID |
Property : target-id <ej-drop-down-list id="customerList" target-id="mailtoolslist"></ej-drop-down-list><div id="mailtoolslist"><ul><li><div class="mailtools categorize"></div>Categorize and Move</li></ul></div>
|
Not Applicable |
| Text |
Property : text <ej-drop-down-list text ="Employee Name" />
|
Property : text <ejs-multiselect text="Employee Name" />
|
| Validation Message |
Property : validation-message <ej-drop-down-list validation-message="@viewBag.validation" />
|
The default error message for a rule can be customizable by defining it along with concern rule. |
| Validation Rules |
Property : validation-rules <ej-drop-down-list validation-rules="@viewBag.validation" />
|
Use Form validator to validate the multiselect component and set validation rules. |
| Value |
Property : value <ej-drop-down-list value ="Employee Value" />
|
Property : value <ejs-multiselect value="@ViewBag.value"/>
|
| Watermark Text |
Property : watermark-text <ej-drop-down-list watermark-text="Select employee"/>
|
Property : placeholder <ejs-multiselect placeholder =" Select employee"/>
|
| Custom Value | Not Applicable |
Property : allowCustomValue <ejs-multiselect mode=”Default” allowCustomValue=" true"/>
|
| Clear Button | Not Applicable |
Property : showClearButton <ejs-multiselect showClearButton ="true"/>
|
| DropDown Icon | Not Applicable |
Property : showDropDownIcon <ejs-multiselect showDropDownIcon ="true"/>
|
| Show Select All | Not Applicable |
Property : showSelectAll <ejs-multiselect showSelectAll ="true"/>
|
| z-Index | Not Applicable |
Property : zIndex <ejs-multiselect zIndex ="10000"/>
|
| Add Item |
Method : addItem(object) <ej-drop-down-list />var dropdown = $(“#dropdown “).data(“ejDropDownList”); dropdown.addItem({ text :”new item”}); |
Method : addItem(object) <ejs-multiselect/>var mulObj = document.getElementById('multiselect').ej2_Instances[0]; mulObj.addItem({ text :"new item"})
|
| Clear Text |
Method : clearText() <ej-drop-down-list />var dropdown = $(“#dropdown “).data(“ejDropDownList”); dropdown.clearText(); |
Property : value <ejs-multiselect/>var mulObj = document.getElementById('multiselect').ej2_Instances[0]; mulObj.value = null
|
| destroy |
Method : destroy() <ej-drop-down-list />var dropdown = $(“#dropdown “).data(“ejDropDownList”); dropdown.destroy(); |
Property : destroy <ejs-multiselect/>var mulObj = document.getElementById('multiselect').ej2_Instances[0]; mulObj.destroy()
|
| Disable |
Method : disable() <ej-drop-down-list />var dropdown = $(“#dropdown “).data(“ejDropDownList”); dropdown.disable(); |
Property : enabled <ejs-multiselect enabled ="false" />
|
| Enable |
Method : enable() <ej-drop-down-list />var dropdown = $(“#dropdown “).data(“ejDropDownList”); dropdown.enable(); |
Property : enabled <ejs-multiselect enabled ="true" />
|
| Disable Items By Indices |
Method : disableItemsByIndics() <ej-drop-down-list />var dropdown = $(“#dropdown “).data(“ejDropDownList”); dropdown.disableItemsByIndics(“3,4,5”); |
Not Applicable |
| Enable Items By Indices |
Method : enableItemsByIndices() <ej-drop-down-list />var dropdown = $(“#dropdown “).data(“ejDropDownList”); dropdown.enableItemsByIndices(“3,4,5”); |
Not Applicable |
| Get Item Data By Value |
Method : getItemDataByValue(“value”) <ej-drop-down-list />var dropdown = $(“#dropdown “).data(“ejDropDownList”); dropdown.getItemDataByValue(“value”); |
Method : getDataByValue(“value”) <ejs-multiselect/>var mulObj = document.getElementById('multiselect').ej2_Instances[0]; mulObj.getDataByValue(“value”)
|
| Get List Data |
Method : getListData() <ej-drop-down-list />var dropdown = $(“#dropdown “).data(“ejDropDownList”); dropdown.getListData(); |
Not Applicable |
| Hide Spinner | Not Applicable |
Method : hideSpinner() <ejs-multiselect/>var mulObj = document.getElementById('multiselect').ej2_Instances[0]; mulObj.hideSpinner()
|
| Show Spinner | Not Applicable |
Method : showSpinner() <ejs-multiselect/>var mulObj = document.getElementById('multiselect').ej2_Instances[0]; mulObj.showSpinner()
|
| Refresh | Not Applicable |
Method : refresh() <ejs-multiselect/>var mulObj = document.getElementById('multiselect').ej2_Instances[0]; mulObj.refresh()
|
| Change |
Event : change<ej-drop-down-list change="onChange" />
|
Event : change<ejs-multiselect change=" onChange"/>
|
| Check Change |
Event : check-change<ej-drop-down-list check-change ="onCheckChange" />
|
Not Applicable |
| Create |
Event : create <ej-drop-down-list create="onCreate" />
|
Event : created <ejs-multiselect created="onCreate" />
|
| Destroy |
Event : destroy <ej-drop-down-list destroy="onDestroy" />
|
Event : created <ejs-multiselect destroy="onDestroy" />
|
| Focus In |
Event : focus-in <ej-drop-down-list focus-in="onFocusIn" />
|
Event : focus <ejs-multiselect focus="onFocus" />
|
| Focus Out |
Event : focus-out <ej-drop-down-list focus-out="onFocusOut" />
|
Event : blur <ej-multiselect blur="onBlur" />
|
| Chip Selection | Not Applicable |
Event : chipSelection <ej-multiselect mode="Box" chipSelection ="onChipSelection " />
|
| Custom Value Selection | Not Applicable |
Event : customValueSelection <ej-multiselect mode="Box" customValueSelection ="onCustomValSel "/>
|
| Removed | Not Applicable |
Event : removed <ej-multiselect removed ="onRemoved" />
|
| Removing | Not Applicable |
Event : removing <ej-multiselect removing ="onRemoving" />
|
| Tagging | Not Applicable |
Event : tagging <ej-multiselect tagging ="onTagging" />
|