This article describes the API migration process of multiselect component from Essential JS 1 to Essential JS 2.
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" /> |
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 |
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>")" /> |
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" /> |
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" /> |
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 |
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) |
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" /> |