Migration from Essential® JS 1

8 Dec 202423 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&lt; 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&lt; 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" />