@syncfusion/ej2-dropdowns 24.2.8 → 25.1.35

package/dist/es6/ej2-dropdowns.es2015.js

@@ -1,9 +1,9 @@
 import { Animation, Browser, ChildProperty, Complex, Component, Event, EventHandler, KeyboardEvents, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, Touch, addClass, append, attributes, classList, closest, compile, createElement, debounce, detach, extend, formatUnit, getComponent, getUniqueID, getValue, isNullOrUndefined, isUndefined, matches, prepend, remove, removeClass, rippleEffect, select, selectAll, setStyleAttribute, setValue } from '@syncfusion/ej2-base';
 import { DataManager, DataUtil, JsonAdaptor, Predicate, Query } from '@syncfusion/ej2-data';
 import { ListBase, Sortable, cssClass, moveTo } from '@syncfusion/ej2-lists';
+import { Skeleton } from '@syncfusion/ej2-notifications';
 import { Popup, createSpinner, getZindexPartial, hideSpinner, isCollide, showSpinner } from '@syncfusion/ej2-popups';
 import { Input, TextBox } from '@syncfusion/ej2-inputs';
-import { Skeleton } from '@syncfusion/ej2-notifications';
 import { Button, createCheckBox } from '@syncfusion/ej2-buttons';
 import { TreeView } from '@syncfusion/ej2-navigations';
 
@@ -331,7 +331,9 @@ class VirtualScroll {
     generateAndExecuteQueryAsync(query, virtualItemStartIndex = 0, virtualItemEndIndex = 0, isQueryGenerated = false) {
         let dataSource = this.parent.dataSource;
         if (!isQueryGenerated) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             if (!isNullOrUndefined(this.parent.query)) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var newQuery = this.removeSkipAndTakeEvents(this.parent.query.clone());
                 query = this.getPageQuery(newQuery, virtualItemStartIndex, virtualItemEndIndex);
             }
@@ -346,6 +348,7 @@ class VirtualScroll {
                 totalData = this.parent.dataSource.dataSource.json.length;
             }
             else if (this.parent.dataSource && this.parent.dataSource.length > 0) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 totalData = this.parent.dataSource.length;
             }
             if (totalData > 0) {
@@ -362,22 +365,151 @@ class VirtualScroll {
         });
         return query;
     }
-    setCurrentViewDataAsync() {
+    setCurrentViewDataAsync(component) {
         // eslint-disable-next-line
         let currentData = [];
-        for (let i = this.parent.viewPortInfo.startIndex; i < this.parent.viewPortInfo.endIndex; i++) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const alreadyAddedData = this.parent.generatedDataObject[i];
-            if (alreadyAddedData) {
-                currentData.push(alreadyAddedData[0]);
+        let isResetListCalled = false;
+        let isListUpdated = true;
+        if (isNullOrUndefined(this.component)) {
+            this.component = component.component;
+        }
+        let endIndex = this.parent.viewPortInfo.endIndex;
+        if (this.component === 'multiselect' && this.parent.mode === 'CheckBox' && this.parent.value && Array.isArray(this.parent.value) && this.parent.value.length > 0 && this.parent.enableSelectionOrder) {
+            if (this.parent.viewPortInfo.startIndex < this.parent.value.length) {
+                endIndex = this.parent.viewPortInfo.endIndex - this.parent.value.length;
+                if (this.parent.viewPortInfo.startIndex === 0) {
+                    this.parent.updateVirtualReOrderList(true);
+                    if (this.parent.value.length < this.parent.itemCount) {
+                        var oldUlElement = this.parent.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
+                        if (oldUlElement) {
+                            this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);
+                        }
+                        var query = this.parent.getForQuery(this.parent.value).clone();
+                        query = query.skip(0).take(this.parent.itemCount - (this.parent.value.length - this.parent.viewPortInfo.startIndex));
+                        this.parent.appendUncheckList = true;
+                        this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
+                        isListUpdated = false;
+                        this.parent.appendUncheckList = false;
+                        isListUpdated = false;
+                    }
+                    else {
+                        var oldUlElement = this.parent.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
+                        if (oldUlElement) {
+                            this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);
+                        }
+                    }
+                    isListUpdated = false;
+                }
+                else if (this.parent.viewPortInfo.startIndex != 0) {
+                    this.parent.updateVirtualReOrderList(true);
+                    var oldUlElement = this.parent.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
+                    if (oldUlElement) {
+                        this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);
+                    }
+                    isListUpdated = false;
+                }
+                if (this.parent.viewPortInfo.startIndex != 0 && this.parent.viewPortInfo.startIndex - this.parent.value.length != this.parent.itemCount && (this.parent.viewPortInfo.startIndex + this.parent.itemCount > this.parent.value.length)) {
+                    var query = this.parent.getForQuery(this.parent.value).clone();
+                    query = query.skip(0).take(this.parent.itemCount - (this.parent.value.length - this.parent.viewPortInfo.startIndex));
+                    this.parent.appendUncheckList = true;
+                    this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
+                    isListUpdated = false;
+                    this.parent.appendUncheckList = false;
+                }
+            }
+            else {
+                var reOrderList = this.parent.list.querySelectorAll('.e-reorder')[0];
+                if (this.parent.list.querySelector('.e-virtual-ddl-content') && reOrderList) {
+                    this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(reOrderList);
+                }
+                var query = this.parent.getForQuery(this.parent.value).clone();
+                if (!this.parent.allowFiltering) { //need to check with allowFiltering false
+                    var skipvalue = this.parent.viewPortInfo.startIndex - this.parent.value.length >= 0 ? this.parent.viewPortInfo.startIndex - this.parent.value.length : 0;
+                    query = query.skip(skipvalue);
+                }
+                this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
+                isListUpdated = false;
+            }
+            this.parent.totalItemsCount();
+        }
+        if (isListUpdated) {
+            for (let i = this.parent.viewPortInfo.startIndex; i < endIndex; i++) {
+                var index = i;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const alreadyAddedData = this.parent.generatedDataObject[index];
+                if (this.component === 'multiselect' && this.parent.hideSelectedItem) {
+                    if (alreadyAddedData) {
+                        let value = getValue(this.parent.fields.value, alreadyAddedData[0]);
+                        if (this.parent.value && value != null && Array.isArray(this.parent.value) && this.parent.value.length > 0 && this.parent.value.indexOf(value) < 0) {
+                            var query = this.parent.getForQuery(this.parent.value).clone();
+                            if (this.parent.viewPortInfo.endIndex == this.parent.totalItemCount + this.parent.value.length && this.parent.hideSelectedItem) {
+                                query = query.skip(this.parent.totalItemCount - this.parent.itemCount);
+                            }
+                            else {
+                                query = query.skip(this.parent.viewPortInfo.startIndex);
+                            }
+                            this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
+                            isResetListCalled = true;
+                            break;
+                        }
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        else if ((this.parent.value === null || (this.parent.value && this.parent.value.length === 0))) {
+                            currentData.push(alreadyAddedData[0]);
+                        }
+                    }
+                    if (index === endIndex - 1) {
+                        if (currentData.length != this.parent.itemCount) {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            if (this.parent.hideSelectedItem) {
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                var query = this.parent.getForQuery(this.parent.value).clone();
+                                if (this.parent.viewPortInfo.endIndex == this.parent.totalItemCount + this.parent.value.length && this.parent.hideSelectedItem) {
+                                    query = query.skip(this.parent.totalItemCount - this.parent.itemCount);
+                                }
+                                else {
+                                    query = query.skip(this.parent.viewPortInfo.startIndex);
+                                }
+                                this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
+                                isResetListCalled = true;
+                            }
+                        }
+                    }
+                }
+                else {
+                    if (alreadyAddedData) {
+                        currentData.push(alreadyAddedData[0]);
+                    }
+                }
             }
         }
-        this.parent.renderItems(currentData, this.parent.fields);
+        if (!isResetListCalled && isListUpdated) {
+            if (this.component === 'multiselect' && this.parent.allowCustomValue && this.parent.viewPortInfo.startIndex == 0 && this.parent.virtualCustomData) {
+                currentData.splice(0, 0, this.parent.virtualCustomData);
+            }
+            let totalData = [];
+            if (this.component === 'multiselect' && this.parent.allowCustomValue && this.parent.viewPortInfo.endIndex == this.parent.totalItemCount) {
+                if (this.parent.virtualCustomSelectData && this.parent.virtualCustomSelectData.length > 0) {
+                    totalData = currentData.concat(this.parent.virtualCustomSelectData);
+                    currentData = totalData;
+                }
+            }
+            let ulElement = this.parent.renderItems(currentData, this.parent.fields, this.component === 'multiselect' && this.parent.mode === 'CheckBox');
+        }
+        if (this.component === 'multiselect') {
+            this.parent.updatevirtualizationList();
+        }
+        this.parent.getSkeletonCount();
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const virtualTrackElement = this.parent.list.getElementsByClassName('e-virtual-ddl')[0];
         if (virtualTrackElement) {
             (virtualTrackElement).style = this.parent.GetVirtualTrackHeight();
         }
+        else if (!virtualTrackElement && this.parent.skeletonCount > 0 && this.parent.popupWrapper) {
+            var virualElement = this.parent.createElement('div', {
+                id: this.parent.element.id + '_popup', className: 'e-virtual-ddl', styles: this.parent.GetVirtualTrackHeight()
+            });
+            this.parent.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);
+        }
         this.parent.UpdateSkeleton();
         this.parent.liCollections = this.parent.list.querySelectorAll('.e-list-item');
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -388,13 +520,17 @@ class VirtualScroll {
         if (this.parent.fields.groupBy) {
             this.parent.scrollStop();
         }
+        if (this.parent.keyCode == 40 && this.parent.isScrollChanged && this.parent.hideSelectedItem && !isNullOrUndefined(this.parent.currentFocuedListElement)) {
+            let currentSelectElem = this.parent.getElementByValue(this.parent.currentFocuedListElement.getAttribute('data-value'));
+            this.parent.addListFocus(currentSelectElem);
+            this.parent.isScrollChanged = false;
+        }
     }
     generateQueryAndSetQueryIndexAsync(query, isPopupOpen) {
         let isStartIndexInitialised = false;
         let queryStartIndex = 0;
         let queryEndIndex = 0;
-        let sortedDataStartIndex = 0;
-        let vEndIndex = this.parent && this.parent.viewPortInfo.endIndex !== 0 ? this.parent.viewPortInfo.endIndex : sortedDataStartIndex + this.parent.getItems().length;
+        let vEndIndex = this.parent.viewPortInfo.endIndex;
         if (!isPopupOpen && vEndIndex !== 0) {
             for (let i = this.parent.viewPortInfo.startIndex; i <= vEndIndex; i++) {
                 if (!(i in this.parent.generatedDataObject)) {
@@ -412,6 +548,13 @@ class VirtualScroll {
             this.parent.virtualItemStartIndex = queryStartIndex;
             this.parent.virtualItemEndIndex = queryEndIndex;
             this.generateAndExecuteQueryAsync(query, queryStartIndex, queryEndIndex);
+            if (this.component === 'multiselect' && this.parent.hideSelectedItem && this.parent.value && Array.isArray(this.parent.value) && this.parent.value.length > 0) {
+                this.parent.totalItemsCount();
+            }
+            if (this.component === 'multiselect' && this.parent.virtualItemStartIndex === this.parent.virtualItemEndIndex) {
+                this.parent.virtualItemStartIndex = this.parent.viewPortInfo.startIndex;
+                this.parent.virtualItemEndIndex = this.parent.viewPortInfo.endIndex;
+            }
         }
         this.setCurrentViewDataAsync();
     }
@@ -448,7 +591,8 @@ class VirtualScroll {
         });
     }
     scrollListener(scrollArgs) {
-        if (!this.parent.isPreventScrollAction) {
+        if (!this.parent.isPreventScrollAction && !this.parent.isVirtualTrackHeight) {
+            this.parent.preventSetCurrentData = false;
             let info = scrollArgs.sentinel;
             let pStartIndex = this.parent.previousStartIndex;
             this.parent.viewPortInfo = this.getInfoFromView(scrollArgs.direction, info, scrollArgs.offset, false);
@@ -484,19 +628,6 @@ class VirtualScroll {
             this.parent.previousInfo = this.parent.viewPortInfo;
         }
     }
-    getPageCount(popupElement, returnExactCount = false) {
-        var list = popupElement && popupElement.querySelector('.e-content');
-        if (list) {
-            var liHeight = list.classList.contains('e-nodata') ? null : getComputedStyle(list.querySelectorAll('.e-list-item')[0], null).getPropertyValue('height');
-            var pageCount = list.getBoundingClientRect().height / parseInt(liHeight, 10);
-            return returnExactCount ? pageCount : Math.round(pageCount);
-        }
-        return 0;
-    }
-    ;
-    getRowHeight() {
-        return (isNullOrUndefined(this.parent.liCollections) || this.parent.liCollections.length == 0) ? 0 : Math.ceil(this.parent.liCollections[0].getBoundingClientRect().height);
-    }
     getInfoFromView(direction, info, e, isscrollAction) {
         let infoType = {
             direction: direction, sentinelInfo: info, offsets: e,
@@ -532,7 +663,7 @@ class VirtualScroll {
                     let idxAddedToExactTop = (pageSizeBy4) > infoViewIndices ? pageSizeBy4 :
                         (infoViewIndices + infoViewIndices / 4);
                     let eIndex = Math.round(exactTopIndex + idxAddedToExactTop);
-                    infoType.endIndex = eIndex < totalItemCount ? eIndex : totalItemCount;
+                    infoType.endIndex = (eIndex < totalItemCount || this.component == "multiselect") ? eIndex : totalItemCount;
                     let sIndex = infoType.endIndex - this.parent.virtualItemCount;
                     infoType.startIndex = sIndex > 0 ? sIndex : 0;
                     infoType.endIndex = sIndex < 0 ? this.parent.virtualItemCount : infoType.endIndex;
@@ -566,7 +697,7 @@ class VirtualScroll {
                 top: top,
                 left: left
             };
-            if (this.parent.list.querySelectorAll('.e-virtual-list').length > 0) {
+            if (this.parent.list && this.parent.list.querySelectorAll('.e-virtual-list').length > 0) {
                 var infoview = this.getInfoFromView(direction, current, scrollOffsetargs, true);
                 if (this.parent.scrollPreStartIndex != pstartIndex && !this.parent.isPreventScrollAction) {
                     this.parent.isScrollActionTriggered = true;
@@ -626,7 +757,8 @@ const dropDownBaseClasses = {
     li: 'e-list-item',
     group: 'e-list-group-item',
     disabled: 'e-disabled',
-    grouping: 'e-dd-group'
+    grouping: 'e-dd-group',
+    virtualList: 'e-list-item e-virtual-list',
 };
 const ITEMTEMPLATE_PROPERTY = 'ItemTemplate';
 const DISPLAYTEMPLATE_PROPERTY = 'DisplayTemplate';
@@ -659,13 +791,63 @@ let DropDownBase = class DropDownBase extends Component {
         this.isAddNewItemTemplate = false;
         this.isRequesting = false;
         this.isVirtualizationEnabled = false;
+        this.isCustomDataUpdated = false;
         this.isAllowFiltering = false;
         this.virtualizedItemsCount = 0;
+        this.isCheckBoxSelection = false;
         this.totalItemCount = 0;
         this.dataCount = 0;
         this.isRemoteDataUpdated = false;
         this.isIncrementalRequest = false;
         this.itemCount = 10;
+        this.virtualListHeight = 0;
+        this.isVirtualScrolling = false;
+        this.isPreventScrollAction = false;
+        this.scrollPreStartIndex = 0;
+        this.isScrollActionTriggered = false;
+        this.previousStartIndex = 0;
+        this.isMouseScrollAction = false;
+        this.isKeyBoardAction = false;
+        this.isScrollChanged = false;
+        this.isUpwardScrolling = false;
+        this.startIndex = 0;
+        this.currentPageNumber = 0;
+        this.pageCount = 0;
+        this.isPreventKeyAction = false;
+        this.generatedDataObject = {};
+        this.skeletonCount = 32;
+        this.isVirtualTrackHeight = false;
+        this.virtualSelectAll = false;
+        this.incrementalQueryString = '';
+        this.incrementalEndIndex = 0;
+        this.incrementalStartIndex = 0;
+        this.incrementalPreQueryString = '';
+        this.isObjectCustomValue = false;
+        this.appendUncheckList = false;
+        this.virtualListInfo = {
+            currentPageNumber: null,
+            direction: null,
+            sentinelInfo: {},
+            offsets: {},
+            startIndex: 0,
+            endIndex: 0,
+        };
+        this.viewPortInfo = {
+            currentPageNumber: null,
+            direction: null,
+            sentinelInfo: {},
+            offsets: {},
+            startIndex: 0,
+            endIndex: 0,
+        };
+        this.selectedValueInfo = {
+            currentPageNumber: null,
+            direction: null,
+            sentinelInfo: {},
+            offsets: {},
+            startIndex: 0,
+            endIndex: 0,
+        };
     }
     getPropObject(prop, newProp, oldProp) {
         const newProperty = new Object();
@@ -876,6 +1058,124 @@ let DropDownBase = class DropDownBase extends Component {
             }
         }
     }
+    checkAndResetCache() {
+        if (this.isVirtualizationEnabled) {
+            this.generatedDataObject = {};
+            this.virtualItemStartIndex = this.virtualItemEndIndex = 0;
+            this.viewPortInfo = {
+                currentPageNumber: null,
+                direction: null,
+                sentinelInfo: {},
+                offsets: {},
+                startIndex: 0,
+                endIndex: this.itemCount,
+            };
+            this.selectedValueInfo = null;
+        }
+    }
+    updateIncrementalInfo(startIndex, endIndex) {
+        this.viewPortInfo.startIndex = startIndex;
+        this.viewPortInfo.endIndex = endIndex;
+        this.updateVirtualItemIndex();
+        this.isIncrementalRequest = true;
+        this.resetList(this.dataSource, this.fields, this.query);
+        this.isIncrementalRequest = false;
+    }
+    updateIncrementalView(startIndex, endIndex) {
+        this.viewPortInfo.startIndex = startIndex;
+        this.viewPortInfo.endIndex = endIndex;
+        this.updateVirtualItemIndex();
+        this.resetList(this.dataSource, this.fields, this.query);
+        this.UpdateSkeleton();
+        this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+        this.ulElement = this.list.querySelector('ul');
+    }
+    updateVirtualItemIndex() {
+        this.virtualItemStartIndex = this.viewPortInfo.startIndex;
+        this.virtualItemEndIndex = this.viewPortInfo.endIndex;
+        this.virtualListInfo = this.viewPortInfo;
+    }
+    getFilteringSkeletonCount() {
+        const difference = this.dataCount - this.viewPortInfo.endIndex;
+        const currentSkeletonCount = this.skeletonCount;
+        this.getSkeletonCount(true);
+        this.skeletonCount = this.dataCount > this.itemCount * 2 ? this.skeletonCount : difference > this.skeletonCount ? this.skeletonCount : difference > 0 ? difference : 0;
+        let skeletonUpdated = true;
+        if ((this.getModuleName() === 'autocomplete' || this.getModuleName() === 'multiselect') && (this.totalItemCount < (this.itemCount * 2))) {
+            this.skeletonCount = 0;
+            skeletonUpdated = false;
+        }
+        if (!this.list.classList.contains(dropDownBaseClasses.noData)) {
+            const isSkeletonCountChange = currentSkeletonCount !== this.skeletonCount;
+            if (currentSkeletonCount !== this.skeletonCount && skeletonUpdated) {
+                this.UpdateSkeleton(true, Math.abs(currentSkeletonCount - this.skeletonCount));
+            }
+            else {
+                this.UpdateSkeleton();
+            }
+            this.liCollections = this.list.querySelectorAll('.e-list-item');
+            if ((this.list.getElementsByClassName('e-virtual-ddl').length > 0)) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
+            }
+            else if (!this.list.querySelector('.e-virtual-ddl') && this.skeletonCount > 0 && this.list.querySelector('.e-dropdownbase')) {
+                var virualElement = this.createElement('div', {
+                    id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
+                });
+                this.list.querySelector('.e-dropdownbase').appendChild(virualElement);
+            }
+            if (this.list.getElementsByClassName('e-virtual-ddl-content').length > 0) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+            }
+        }
+    }
+    getSkeletonCount(retainSkeleton) {
+        this.virtualListHeight = this.listContainerHeight != null ? parseInt(this.listContainerHeight, 10) : this.virtualListHeight;
+        const actualCount = this.virtualListHeight > 0 ? Math.floor(this.virtualListHeight / this.listItemHeight) : 0;
+        this.skeletonCount = actualCount * 2 < this.itemCount ? this.itemCount : actualCount * 2;
+        this.itemCount = retainSkeleton ? this.itemCount : this.skeletonCount;
+        this.skeletonCount = Math.floor(this.skeletonCount / 2) + 2;
+    }
+    GetVirtualTrackHeight() {
+        let height = this.totalItemCount === this.viewPortInfo.endIndex ? this.totalItemCount * this.listItemHeight - this.itemCount * this.listItemHeight : this.totalItemCount * this.listItemHeight;
+        height = this.isVirtualTrackHeight ? 0 : height;
+        const heightDimension = `height: ${height - this.itemCount * this.listItemHeight}px;`;
+        if ((this.getModuleName() === 'autocomplete' || this.getModuleName() === 'multiselect') && this.skeletonCount === 0) {
+            return "height: 0px;";
+        }
+        return heightDimension;
+    }
+    getTransformValues() {
+        let translateY = this.viewPortInfo.startIndex * this.listItemHeight;
+        translateY = translateY - (this.skeletonCount * this.listItemHeight);
+        translateY = this.viewPortInfo.startIndex === 0 && this.listData && this.listData.length === 0 ? 0 : translateY;
+        const styleText = `transform: translate(0px, ${translateY}px);`;
+        return styleText;
+    }
+    UpdateSkeleton(isSkeletonCountChange, skeletonCount) {
+        let isContainSkeleton = this.list.querySelector('.e-virtual-ddl-content');
+        let isContainVirtualList = this.list.querySelector('.e-virtual-list');
+        if (isContainSkeleton && (!isContainVirtualList || isSkeletonCountChange) && this.isVirtualizationEnabled) {
+            const totalSkeletonCount = isSkeletonCountChange ? skeletonCount : this.skeletonCount;
+            for (let i = 0; i < totalSkeletonCount; i++) {
+                const liElement = this.createElement('li', { className: dropDownBaseClasses.virtualList, styles: 'overflow: inherit' });
+                if (this.isVirtualizationEnabled && this.itemTemplate) {
+                    liElement.style.height = this.listItemHeight + 'px';
+                }
+                let skeleton = new Skeleton({
+                    shape: "Text",
+                    height: "10px",
+                    width: "95%",
+                    cssClass: "e-skeleton-text",
+                });
+                skeleton.appendTo(this.createElement('div'));
+                liElement.appendChild(skeleton.element);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                isContainSkeleton.firstChild && isContainSkeleton.firstChild.insertBefore(liElement, isContainSkeleton.firstChild.children[0]);
+            }
+        }
+    }
     getLocaleName() {
         return 'drop-down-base';
     }
@@ -1068,7 +1368,7 @@ let DropDownBase = class DropDownBase extends Component {
                             this.trigger('actionComplete', e, (e) => {
                                 if (!this.virtualGroupDataSource && this.isVirtualizationEnabled) {
                                     this.isRemoteDataUpdated = true;
-                                    if ((this.getModuleName() === 'combobox' && this.isAllowFiltering && this.isVirtualizationEnabled && e.result)) {
+                                    if ((this.getModuleName() === 'combobox' && !this.initialRemoteRender && this.isAllowFiltering && this.isVirtualizationEnabled && e.result)) {
                                         e.result = e.result.result;
                                     }
                                     if (e.result.length > 0) {
@@ -1122,31 +1422,52 @@ let DropDownBase = class DropDownBase extends Component {
                     }
                     else {
                         this.isRequesting = false;
+                        let isReOrder = true;
                         let listItems;
                         if (this.isVirtualizationEnabled && !this.virtualGroupDataSource && this.fields.groupBy) {
                             let data = new DataManager(this.dataSource).executeLocal(new Query().group(this.fields.groupBy));
                             this.virtualGroupDataSource = data.records;
                         }
-                        let dataManager = this.isVirtualizationEnabled && this.virtualGroupDataSource ? new DataManager(this.virtualGroupDataSource) : new DataManager(eventArgs.data);
+                        let dataManager = this.isVirtualizationEnabled && this.virtualGroupDataSource && !this.isCustomDataUpdated ? new DataManager(this.virtualGroupDataSource) : new DataManager(eventArgs.data);
                         listItems = (this.getQuery(eventArgs.query)).executeLocal(dataManager);
-                        if (this.isVirtualizationEnabled && this.getModuleName() === 'autocomplete' && (listItems.count != 0 && listItems.count < (this.itemCount * 2))) {
+                        if (!this.virtualSelectAll) {
                             let newQuery = this.getQuery(eventArgs.query);
-                            if (newQuery) {
-                                for (let queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
-                                    if (newQuery.queries[queryElements].fn === 'onTake') {
-                                        newQuery.queries[queryElements].e.nos = listItems.count;
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            if (this.isVirtualizationEnabled && (listItems.count != 0 && listItems.count < (this.itemCount * 2))) {
+                                if (newQuery) {
+                                    for (let queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
+                                        if (newQuery.queries[queryElements].fn === 'onTake') {
+                                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                            newQuery.queries[queryElements].e.nos = listItems.count;
+                                            listItems = (newQuery).executeLocal(dataManager);
+                                        }
+                                        if (this.getModuleName() === 'multiselect' && (newQuery.queries[queryElements].e.condition == 'or' || newQuery.queries[queryElements].e.operator == 'equal')) {
+                                            isReOrder = false;
+                                        }
+                                    }
+                                    if (isReOrder) {
                                         listItems = (newQuery).executeLocal(dataManager);
-                                        break;
+                                        this.isVirtualTrackHeight = true;
+                                    }
+                                }
+                            }
+                            else {
+                                this.isVirtualTrackHeight = false;
+                                if (newQuery) {
+                                    for (let queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
+                                        if (this.getModuleName() === 'multiselect' && ((newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.condition == 'or') || (newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.operator == 'equal'))) {
+                                            isReOrder = false;
+                                        }
                                     }
                                 }
                             }
                         }
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        this.dataCount = listItems.count;
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        this.totalItemCount = listItems.count;
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        listItems = this.isVirtualizationEnabled ? listItems.result : listItems;
+                        if (isReOrder) {
+                            // eslint-disable @typescript-eslint/no-explicit-any
+                            this.dataCount = this.totalItemCount = this.virtualSelectAll ? listItems.length : listItems.count;
+                        }
+                        listItems = this.isVirtualizationEnabled && !this.virtualSelectAll ? listItems.result : listItems;
+                        // eslint-enable @typescript-eslint/no-explicit-any
                         const localDataArgs = { cancel: false, result: listItems };
                         this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;
                         this.trigger('actionComplete', localDataArgs, (localDataArgs) => {
@@ -1193,6 +1514,13 @@ let DropDownBase = class DropDownBase extends Component {
             this.raiseDataBound(listItems, e);
         }
     }
+    isObjectInArray(objectToFind, array) {
+        return array.some(item => {
+            return Object.keys(objectToFind).every(key => {
+                return item.hasOwnProperty(key) && item[key] === objectToFind[key];
+            });
+        });
+    }
     updateListValues() {
         // Used this method in component side.
     }
@@ -1233,6 +1561,7 @@ let DropDownBase = class DropDownBase extends Component {
         const listItems = [];
         this.onActionComplete(this.renderItems(listItems, fields), listItems);
         this.isRequested = false;
+        this.isRequesting = false;
         this.hideSpinner();
     }
     showSpinner() {
@@ -1253,7 +1582,7 @@ let DropDownBase = class DropDownBase extends Component {
     onActionComplete(ulElement, list, e) {
         /* eslint-enable @typescript-eslint/no-unused-vars */
         this.listData = list;
-        if (this.isVirtualizationEnabled) {
+        if (this.isVirtualizationEnabled && !this.isCustomDataUpdated) {
             this.notify("setGeneratedData", {
                 module: "VirtualScroll",
             });
@@ -1312,10 +1641,11 @@ let DropDownBase = class DropDownBase extends Component {
     getQuery(query) {
         return query ? query : this.query ? this.query : new Query();
     }
-    updateVirtualizationProperties(itemCount, filtering) {
+    updateVirtualizationProperties(itemCount, filtering, isCheckbox) {
         this.isVirtualizationEnabled = true;
         this.virtualizedItemsCount = itemCount;
         this.isAllowFiltering = filtering;
+        this.isCheckBoxSelection = isCheckbox;
     }
     /**
      * To render the template content for group header element.
@@ -1427,7 +1757,7 @@ let DropDownBase = class DropDownBase extends Component {
                 if (isCount) {
                     count++;
                 }
-                if (this.updateGroupHeader(index, liCollections, target)) {
+                if (this.fixedHeaderElement && this.updateGroupHeader(index, liCollections, target)) {
                     loadedGroupList++;
                     if (count >= this.getPageCount()) {
                         break;
@@ -1483,7 +1813,7 @@ let DropDownBase = class DropDownBase extends Component {
      * @param {FieldSettingsModel} fields - Maps the columns of the data table and binds the data to the component.
      * @returns {HTMLElement} Return the list items.
      */
-    renderItems(listData, fields) {
+    renderItems(listData, fields, isCheckBoxUpdate) {
         let ulElement;
         if (this.itemTemplate && listData) {
             let dataSource = listData;
@@ -1506,6 +1836,10 @@ let DropDownBase = class DropDownBase extends Component {
                 var virtualUlElement = this.list.querySelector('.e-virtual-ddl-content');
                 if ((listData.length >= this.virtualizedItemsCount && oldUlElement && virtualUlElement) || (oldUlElement && virtualUlElement && this.isAllowFiltering) || (oldUlElement && virtualUlElement && this.getModuleName() === 'autocomplete')) {
                     virtualUlElement.replaceChild(ulElement, oldUlElement);
+                    let reOrderList = this.list.querySelectorAll('.e-reorder');
+                    if (this.list.querySelector('.e-virtual-ddl-content') && reOrderList && reOrderList.length > 0 && !isCheckBoxUpdate) {
+                        this.list.querySelector('.e-virtual-ddl-content').removeChild(reOrderList[0]);
+                    }
                     this.updateListElements(listData);
                 }
                 else if ((!virtualUlElement)) {
@@ -1517,6 +1851,10 @@ let DropDownBase = class DropDownBase extends Component {
             }
         }
         else {
+            if (this.getModuleName() === 'multiselect' && this.virtualSelectAll) {
+                this.virtualSelectAllData = listData;
+                listData = listData.slice(this.virtualItemStartIndex, this.virtualItemEndIndex);
+            }
             ulElement = this.createListItems(listData, fields);
             if (this.isIncrementalRequest) {
                 this.incrementalLiCollections = ulElement.querySelectorAll('.' + dropDownBaseClasses.li);
@@ -1525,10 +1863,19 @@ let DropDownBase = class DropDownBase extends Component {
                 return ulElement;
             }
             if (this.isVirtualizationEnabled) {
-                var oldUlElement = this.list.querySelector('.e-list-parent');
+                var oldUlElement = this.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
                 var virtualUlElement = this.list.querySelector('.e-virtual-ddl-content');
-                if ((listData.length >= this.virtualizedItemsCount && oldUlElement && virtualUlElement) || (oldUlElement && virtualUlElement && this.isAllowFiltering) || (oldUlElement && virtualUlElement && this.getModuleName() === 'autocomplete')) {
-                    virtualUlElement.replaceChild(ulElement, oldUlElement);
+                var isRemovedUlelement = false;
+                if (!oldUlElement && this.list.querySelector('.e-list-parent' + '.e-reorder')) {
+                    oldUlElement = this.list.querySelector('.e-list-parent' + '.e-reorder');
+                }
+                if ((listData.length >= this.virtualizedItemsCount && oldUlElement && virtualUlElement) || (oldUlElement && virtualUlElement && this.isAllowFiltering) || (oldUlElement && virtualUlElement && (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'multiselect')) || isRemovedUlelement) {
+                    if (!this.appendUncheckList) {
+                        virtualUlElement.replaceChild(ulElement, oldUlElement);
+                    }
+                    else {
+                        virtualUlElement.appendChild(ulElement);
+                    }
                     this.updateListElements(listData);
                 }
                 else if ((!virtualUlElement)) {
@@ -1721,11 +2068,11 @@ let DropDownBase = class DropDownBase extends Component {
         this.render();
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    updateDataSource(props) {
+    updateDataSource(props, oldProps) {
         this.resetList(this.dataSource);
         this.totalItemCount = this.dataSource instanceof DataManager ? this.dataSource.dataSource.json.length : 0;
     }
-    setUpdateInitial(props, newProp) {
+    setUpdateInitial(props, newProp, oldProp) {
         this.isDataFetched = false;
         const updateData = {};
         for (let j = 0; props.length > j; j++) {
@@ -1741,7 +2088,7 @@ let DropDownBase = class DropDownBase extends Component {
             if (Object.keys(updateData).indexOf('dataSource') === -1) {
                 updateData.dataSource = this.dataSource;
             }
-            this.updateDataSource(updateData);
+            this.updateDataSource(updateData, oldProp);
         }
     }
     /**
@@ -2191,55 +2538,12 @@ let DropDownList = class DropDownList extends DropDownBase {
      */
     constructor(options, element) {
         super(options, element);
-        this.skeletonCount = 32;
         this.isListSearched = false;
         this.preventChange = false;
         this.isAngular = false;
-        this.virtualListHeight = 0;
-        this.isVirtualScrolling = false;
-        this.isPreventScrollAction = false;
-        this.scrollPreStartIndex = 0;
-        this.isScrollActionTriggered = false;
-        this.previousStartIndex = 0;
-        this.isMouseScrollAction = false;
-        this.isKeyBoardAction = false;
-        this.isUpwardScrolling = false;
-        this.startIndex = 0;
-        this.currentPageNumber = 0;
-        this.pageCount = 0;
-        this.isPreventKeyAction = false;
-        this.generatedDataObject = {};
-        this.incrementalQueryString = '';
-        this.incrementalEndIndex = 0;
-        this.incrementalStartIndex = 0;
-        this.incrementalPreQueryString = '';
         this.isTouched = false;
-        this.virtualListInfo = {
-            currentPageNumber: null,
-            direction: null,
-            sentinelInfo: {},
-            offsets: {},
-            startIndex: 0,
-            endIndex: 0,
-        };
-        this.viewPortInfo = {
-            currentPageNumber: null,
-            direction: null,
-            sentinelInfo: {},
-            offsets: {},
-            startIndex: 0,
-            endIndex: 0,
-        };
-        this.selectedValueInfo = {
-            currentPageNumber: null,
-            direction: null,
-            sentinelInfo: {},
-            offsets: {},
-            startIndex: 0,
-            endIndex: 0,
-        };
-        this.IsScrollerAtEnd = function () {
-            return this.list && this.list.scrollTop + this.list.clientHeight >= this.list.scrollHeight;
+        this.IsScrollerAtEnd = function () {
+            return this.list && this.list.scrollTop + this.list.clientHeight >= this.list.scrollHeight;
         };
     }
     /**
@@ -2263,7 +2567,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         this.isFilterFocus = false;
         this.beforePopupOpen = false;
         this.initial = true;
-        this.initRemoteRender = false;
+        this.initialRemoteRender = false;
         this.isNotSearchList = false;
         this.isTyped = false;
         this.isSelected = false;
@@ -2325,6 +2629,11 @@ let DropDownList = class DropDownList extends DropDownBase {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.totalItemCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
         }
+        if (this.enableVirtualization && this.isFiltering() && this.getModuleName() === 'combobox') {
+            this.UpdateSkeleton();
+            this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+            this.ulElement = this.list.querySelector('ul');
+        }
         this.unWireListEvents();
         this.wireListEvents();
     }
@@ -2372,8 +2681,8 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.isActive = true;
             this.resetSelection(properties);
         }
-        const dataItem = this.getItemData();
-        if (this.previousValue === dataItem.value) {
+        let dataItem = this.getItemData();
+        if ((!this.allowObjectBinding && (this.previousValue === dataItem.value)) || (this.allowObjectBinding && this.previousValue && this.isObjectInArray(this.previousValue, [this.allowCustom ? this.value ? this.value : dataItem : dataItem.value ? this.getDataByValue(dataItem.value) : dataItem]))) {
             return;
         }
         this.onChangeEvent(e);
@@ -2552,7 +2861,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.itemCount;
         this.renderList();
         if (this.dataSource instanceof DataManager) {
-            this.initRemoteRender = true;
+            this.initialRemoteRender = true;
         }
         else {
             this.updateValues();
@@ -2561,7 +2870,8 @@ let DropDownList = class DropDownList extends DropDownBase {
     updateValues() {
         this.selectedValueInfo = this.viewPortInfo;
         if (!isNullOrUndefined(this.value)) {
-            this.setSelection(this.getElementByValue(this.value), null);
+            const value = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue(((this.fields.value) ? this.fields.value : ''), this.value) : this.value;
+            this.setSelection(this.getElementByValue(value), null);
         }
         else if (this.text && isNullOrUndefined(this.value)) {
             const element = this.getElementByText(this.text);
@@ -2786,23 +3096,6 @@ let DropDownList = class DropDownList extends DropDownBase {
     isValidLI(li) {
         return (li && li.hasAttribute('role') && li.getAttribute('role') === 'option');
     }
-    updateIncrementalInfo(startIndex, endIndex) {
-        this.viewPortInfo.startIndex = startIndex;
-        this.viewPortInfo.endIndex = endIndex;
-        this.updateVirtualItemIndex();
-        this.isIncrementalRequest = true;
-        this.resetList(this.dataSource, this.fields, this.query);
-        this.isIncrementalRequest = false;
-    }
-    updateIncrementalView(startIndex, endIndex) {
-        this.viewPortInfo.startIndex = startIndex;
-        this.viewPortInfo.endIndex = endIndex;
-        this.updateVirtualItemIndex();
-        this.resetList(this.dataSource, this.fields, this.query);
-        this.UpdateSkeleton();
-        this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
-        this.ulElement = this.list.querySelector('ul');
-    }
     updateIncrementalItemIndex(startIndex, endIndex) {
         this.incrementalStartIndex = startIndex;
         this.incrementalEndIndex = endIndex;
@@ -2970,10 +3263,12 @@ let DropDownList = class DropDownList extends DropDownBase {
             const isTabAction = e.action === 'tab' || e.action === 'close';
             if (isNullOrUndefined(this.list) && !this.isRequested && !isTabAction && e.action !== 'escape') {
                 this.searchKeyEvent = e;
-                this.renderList(e);
-                this.UpdateSkeleton();
-                this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
-                this.ulElement = this.list.querySelector('ul');
+                if (!this.enableVirtualization || (this.enableVirtualization && this.getModuleName() !== 'autocomplete' && e.type !== 'mousedown' && (e.keyCode === 40 || e.keyCode === 38))) {
+                    this.renderList(e);
+                    this.UpdateSkeleton();
+                    this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+                    this.ulElement = this.list.querySelector('ul');
+                }
             }
             if (isNullOrUndefined(this.list) || (!isNullOrUndefined(this.liCollections) &&
                 isNavigation && this.liCollections.length === 0) || this.isRequested) {
@@ -3132,7 +3427,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 this.activeIndex = filterIndex;
             }
         }
-        if (this.allowFiltering && this.getModuleName() === 'dropdownlist') {
+        if (this.allowFiltering && this.getModuleName() === 'dropdownlist' && this.filterInput) {
             if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-item-focus')[0])) {
                 attributes(this.filterInput, { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-item-focus')[0].id });
             }
@@ -3142,11 +3437,6 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         e.preventDefault();
     }
-    updateVirtualItemIndex() {
-        this.virtualItemStartIndex = this.viewPortInfo.startIndex;
-        this.virtualItemEndIndex = this.viewPortInfo.endIndex;
-        this.virtualListInfo = this.viewPortInfo;
-    }
     updateHomeEndAction(e, isVirtualKeyAction) {
         if (this.getModuleName() === 'dropdownlist') {
             let findLi = 0;
@@ -3295,6 +3585,10 @@ let DropDownList = class DropDownList extends DropDownBase {
     pageDownSelection(steps, event, isVirtualKeyAction) {
         const list = this.getItems();
         let previousItem = steps <= list.length ? this.liCollections[steps - 1] : this.liCollections[list.length - 1];
+        if (this.enableVirtualization && this.skeletonCount > 0) {
+            steps = this.getModuleName() === 'dropdownlist' && this.allowFiltering ? steps + 1 : steps;
+            previousItem = steps < list.length ? this.liCollections[steps] : this.liCollections[list.length - 1];
+        }
         if ((this.enableVirtualization && this.activeIndex == null) || isVirtualKeyAction) {
             previousItem = steps <= list.length ? this.liCollections[steps + this.skeletonCount - 1] : this.liCollections[list.length - 1];
         }
@@ -3458,7 +3752,7 @@ let DropDownList = class DropDownList extends DropDownBase {
     selectEventCallback(li, e, preventSelect, selectedData, value) {
         this.previousItemData = (!isNullOrUndefined(this.itemData)) ? this.itemData : null;
         if (this.itemData != selectedData) {
-            this.previousValue = (!isNullOrUndefined(this.itemData)) ? typeof this.itemData == "object" ? this.checkFieldValue(this.itemData, this.fields.value.split('.')) : this.itemData : null;
+            this.previousValue = (!isNullOrUndefined(this.itemData)) ? typeof this.itemData == "object" && !this.allowObjectBinding ? this.checkFieldValue(this.itemData, this.fields.value.split('.')) : this.itemData : null;
         }
         this.item = li;
         this.itemData = selectedData;
@@ -3516,7 +3810,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (this.isFiltering() && clearElement) {
             clearElement.style.removeProperty('visibility');
         }
-        if (this.previousValue === dataItem.value) {
+        if ((!this.allowObjectBinding && (this.previousValue === dataItem.value)) || (this.allowObjectBinding && (this.previousValue != null && this.isObjectInArray(this.previousValue, [this.allowCustom && this.isObjectCustomValue ? this.value ? this.value : dataItem : dataItem.value ? this.getDataByValue(dataItem.value) : dataItem])))) {
             this.isSelected = false;
             return true;
         }
@@ -3536,27 +3830,28 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         else {
             this.setSelectOptions(li, e);
-            if (this.enableVirtualization) {
+            if (this.enableVirtualization && this.value) {
                 const fields = (this.fields.value) ? this.fields.value : '';
-                if (this.dataSource instanceof DataManager) {
-                    this.dataSource.executeQuery(new Query().where(new Predicate(fields, 'equal', this.value)))
-                        .then((e) => {
-                        if (e.result.length > 0) {
-                            this.itemData = e.result[0];
-                            const dataItem = this.getItemData();
-                            if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {
-                                this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
-                            }
+                let currentValue = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
+                if (this.dataSource instanceof DataManager && this.virtualGroupDataSource) {
+                    const getItem = new DataManager(this.virtualGroupDataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', currentValue)));
+                    if (getItem && getItem.length > 0) {
+                        this.itemData = getItem[0];
+                        const dataItem = this.getItemData();
+                        let value = this.allowObjectBinding ? this.getDataByValue(dataItem.value) : dataItem.value;
+                        if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {
+                            this.setProperties({ 'text': dataItem.text, 'value': value });
                         }
-                    });
+                    }
                 }
                 else {
-                    const getItem = new DataManager(this.dataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', this.value)));
+                    const getItem = new DataManager(this.dataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', currentValue)));
                     if (getItem && getItem.length > 0) {
                         this.itemData = getItem[0];
                         const dataItem = this.getItemData();
+                        let value = this.allowObjectBinding ? this.getDataByValue(dataItem.value) : dataItem.value;
                         if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {
-                            this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
+                            this.setProperties({ 'text': dataItem.text, 'value': value });
                         }
                     }
                 }
@@ -3670,10 +3965,20 @@ let DropDownList = class DropDownList extends DropDownBase {
      * @param {MouseEvent | KeyboardEvent | TouchEvent} eve - Specifies the event arguments.
      * @returns {void}
      */
-    onChangeEvent(eve) {
+    onChangeEvent(eve, isCustomValue) {
         const dataItem = this.getItemData();
-        const index = this.isSelectCustom ? null : this.activeIndex;
-        this.setProperties({ 'index': index, 'text': dataItem.text, 'value': dataItem.value }, true);
+        let index = this.isSelectCustom ? null : this.activeIndex;
+        if (this.enableVirtualization) {
+            let datas = this.dataSource instanceof DataManager ? this.virtualGroupDataSource : this.dataSource;
+            if (dataItem.value && datas && datas.length > 0) {
+                const foundIndex = datas.findIndex((data) => !isNullOrUndefined(dataItem.value) && getValue(this.fields.value, data) === dataItem.value);
+                if (foundIndex !== -1) {
+                    index = foundIndex;
+                }
+            }
+        }
+        let value = this.allowObjectBinding ? isCustomValue ? this.value : this.getDataByValue(dataItem.value) : dataItem.value;
+        this.setProperties({ 'index': index, 'text': dataItem.text, 'value': value }, true);
         this.detachChangeEvent(eve);
     }
     detachChanges(value) {
@@ -3700,7 +4005,7 @@ let DropDownList = class DropDownList extends DropDownBase {
     detachChangeEvent(eve) {
         this.isSelected = false;
         this.previousValue = this.value;
-        this.activeIndex = this.index;
+        this.activeIndex = this.enableVirtualization ? this.getIndexByValue(this.value) : this.index;
         this.typedString = !isNullOrUndefined(this.text) ? this.text : '';
         if (!this.initial) {
             const items = this.detachChanges(this.itemData);
@@ -3747,16 +4052,17 @@ let DropDownList = class DropDownList extends DropDownBase {
     }
     setHiddenValue() {
         if (!isNullOrUndefined(this.value)) {
+            let value = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
             if (this.hiddenElement.querySelector('option')) {
                 const selectedElement = this.hiddenElement.querySelector('option');
                 selectedElement.textContent = this.text;
-                selectedElement.setAttribute('value', this.value.toString());
+                selectedElement.setAttribute('value', value.toString());
             }
             else {
                 if (!isNullOrUndefined(this.hiddenElement)) {
                     this.hiddenElement.innerHTML = '<option selected>' + this.text + '</option>';
                     const selectedElement = this.hiddenElement.querySelector('option');
-                    selectedElement.setAttribute('value', this.value.toString());
+                    selectedElement.setAttribute('value', value.toString());
                 }
             }
         }
@@ -3773,6 +4079,7 @@ let DropDownList = class DropDownList extends DropDownBase {
     onFilterUp(e) {
         if (!(e.ctrlKey && e.keyCode === 86) && (this.isValidKey || e.keyCode === 40 || e.keyCode === 38)) {
             this.isValidKey = false;
+            this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;
             switch (e.keyCode) {
                 case 38: //up arrow
                 case 40: //down arrow
@@ -3829,42 +4136,6 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.isValidKey = false;
         }
     }
-    getFilteringSkeletonCount() {
-        const difference = this.dataCount - this.viewPortInfo.endIndex;
-        const currentSkeletonCount = this.skeletonCount;
-        this.getSkeletonCount(true);
-        this.skeletonCount = this.dataCount > this.itemCount * 2 ? this.skeletonCount : difference > this.skeletonCount ? this.skeletonCount : difference > 0 ? difference : 0;
-        let skeletonUpdated = true;
-        if (this.getModuleName() === 'autocomplete' && (this.totalItemCount != 0 && this.totalItemCount < (this.itemCount * 2))) {
-            this.skeletonCount = 0;
-            skeletonUpdated = false;
-        }
-        if (!this.list.classList.contains(dropDownBaseClasses.noData)) {
-            const isSkeletonCountChange = currentSkeletonCount !== this.skeletonCount;
-            if (currentSkeletonCount !== this.skeletonCount && skeletonUpdated) {
-                this.UpdateSkeleton(true, Math.abs(currentSkeletonCount - this.skeletonCount));
-            }
-            else {
-                this.UpdateSkeleton();
-            }
-            this.liCollections = this.list.querySelectorAll('.e-list-item');
-            if ((this.list.getElementsByClassName('e-virtual-ddl').length > 0)) {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
-            }
-            if (this.list.getElementsByClassName('e-virtual-ddl-content').length > 0) {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
-            }
-        }
-    }
-    getSkeletonCount(retainSkeleton) {
-        this.virtualListHeight = this.listHeight != null ? parseInt(this.listHeight, 10) : this.virtualListHeight;
-        const actualCount = this.virtualListHeight > 0 ? Math.floor(this.virtualListHeight / this.listItemHeight) : 0;
-        this.skeletonCount = actualCount * 2 < this.itemCount ? this.itemCount : actualCount * 2;
-        this.itemCount = retainSkeleton ? this.itemCount : this.skeletonCount;
-        this.skeletonCount = Math.floor(this.skeletonCount / 2) + 2;
-    }
     onFilterDown(e) {
         switch (e.keyCode) {
             case 13: //enter
@@ -3919,14 +4190,51 @@ let DropDownList = class DropDownList extends DropDownBase {
                     }
                 }
             }
-            if (this.allowFiltering || !this.isPopupOpen || !alreadySkipAdded) {
-                filterQuery.skip(this.virtualItemStartIndex);
+            let queryTakeValue = 0;
+            let querySkipValue = 0;
+            if (this.query && this.query.queries.length > 0) {
+                for (let queryElements = 0; queryElements < this.query.queries.length; queryElements++) {
+                    if (this.query.queries[queryElements].fn === 'onSkip') {
+                        querySkipValue = this.query.queries[queryElements].e.nos;
+                    }
+                    if (this.query.queries[queryElements].fn === 'onTake') {
+                        queryTakeValue = takeValue <= this.query.queries[queryElements].e.nos ? this.query.queries[queryElements].e.nos : takeValue;
+                    }
+                }
+            }
+            let skipExists = false;
+            let takeExists = false;
+            if (filterQuery && filterQuery.queries.length > 0) {
+                for (let queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
+                    if (filterQuery.queries[queryElements].fn === 'onSkip') {
+                        skipExists = true;
+                    }
+                    if (filterQuery.queries[queryElements].fn === 'onTake') {
+                        takeExists = true;
+                        filterQuery.queries[queryElements].e.nos = filterQuery.queries[queryElements].e.nos <= queryTakeValue ? queryTakeValue : filterQuery.queries[queryElements].e.nos;
+                    }
+                }
+            }
+            if (!skipExists && (this.allowFiltering || !this.isPopupOpen || !alreadySkipAdded)) {
+                if (querySkipValue > 0) {
+                    filterQuery.skip(querySkipValue);
+                }
+                else {
+                    filterQuery.skip(this.virtualItemStartIndex);
+                }
             }
             if (this.isIncrementalRequest) {
                 filterQuery.take(this.incrementalEndIndex);
             }
             else {
-                filterQuery.take(takeValue);
+                if (!takeExists) {
+                    if (queryTakeValue > 0) {
+                        filterQuery.take(queryTakeValue);
+                    }
+                    else {
+                        filterQuery.take(takeValue);
+                    }
+                }
             }
             filterQuery.requiresCount();
         }
@@ -4145,29 +4453,6 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.renderPopup();
         }
     }
-    UpdateSkeleton(isSkeletonCountChange, skeletonCount) {
-        let isContainSkeleton = this.list.querySelector('.e-virtual-ddl-content');
-        let isContainVirtualList = this.list.querySelector('.e-virtual-list');
-        if (isContainSkeleton && (!isContainVirtualList || isSkeletonCountChange) && this.enableVirtualization) {
-            const totalSkeletonCount = isSkeletonCountChange ? skeletonCount : this.skeletonCount;
-            for (let i = 0; i < totalSkeletonCount; i++) {
-                const liElement = this.createElement('li', { className: dropDownListClasses.virtualList, styles: 'overflow: inherit' });
-                if (this.enableVirtualization && this.itemTemplate) {
-                    liElement.style.height = this.listItemHeight + 'px';
-                }
-                let skeleton = new Skeleton({
-                    shape: "Text",
-                    height: "10px",
-                    width: "95%",
-                    cssClass: "e-skeleton-text",
-                });
-                skeleton.appendTo(this.createElement('div'));
-                liElement.appendChild(skeleton.element);
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                isContainSkeleton.firstChild.insertBefore(liElement, isContainSkeleton.firstChild.children[0]);
-            }
-        }
-    }
     getTakeValue() {
         return this.allowFiltering && this.getModuleName() === 'dropdownlist' && Browser.isDevice ? Math.round(window.outerHeight / this.listItemHeight) : this.itemCount;
     }
@@ -4202,17 +4487,22 @@ let DropDownList = class DropDownList extends DropDownBase {
             if (!isNullOrUndefined(ulElement)) {
                 attributes(ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false', 'aria-label': 'listbox' });
             }
-            if (this.initRemoteRender) {
+            if (this.initialRemoteRender) {
                 this.initial = true;
                 this.activeIndex = this.index;
-                this.initRemoteRender = false;
+                this.initialRemoteRender = false;
                 if (this.value && this.dataSource instanceof DataManager) {
                     const checkField = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;
+                    let value = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue(checkField, this.value) : this.value;
                     const fieldValue = this.fields.value.split('.');
-                    const checkVal = list.some((x) => isNullOrUndefined(x[checkField]) && fieldValue.length > 1 ?
-                        this.checkFieldValue(x, fieldValue) === this.value : x[checkField] === this.value);
+                    let checkVal = list.some((x) => isNullOrUndefined(x[checkField]) && fieldValue.length > 1 ?
+                        this.checkFieldValue(x, fieldValue) === value : x[checkField] === value);
+                    if (this.enableVirtualization && this.virtualGroupDataSource) {
+                        checkVal = this.virtualGroupDataSource.some((x) => isNullOrUndefined(x[checkField]) && fieldValue.length > 1 ?
+                            this.checkFieldValue(x, fieldValue) === value : x[checkField] === value);
+                    }
                     if (!checkVal) {
-                        this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField, 'equal', this.value)))
+                        this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField, 'equal', value)))
                             .then((e) => {
                             if (e.result.length > 0) {
                                 this.addItem(e.result, list.length);
@@ -4381,46 +4671,19 @@ let DropDownList = class DropDownList extends DropDownBase {
     updateSelectionList() {
         let selectedItem = this.list && this.list.querySelector('.' + 'e-active');
         if (!selectedItem && !isNullOrUndefined(this.value)) {
-            var findEle = this.findListElement(this.list, 'li', 'data-value', this.value);
+            let value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
+            var findEle = this.findListElement(this.list, 'li', 'data-value', value);
             if (findEle) {
                 findEle.classList.add('e-active');
             }
         }
     }
-    checkAndResetCache() {
-        if (this.enableVirtualization) {
-            this.generatedDataObject = {};
-            this.virtualItemStartIndex = this.virtualItemEndIndex = 0;
-            this.viewPortInfo = { currentPageNumber: null,
-                direction: null,
-                sentinelInfo: {},
-                offsets: {},
-                startIndex: 0,
-                endIndex: this.itemCount, };
-            this.selectedValueInfo = null;
-        }
-    }
     removeFocus() {
         const highlightedItem = this.list.querySelectorAll('.' + dropDownListClasses.focus);
         if (highlightedItem && highlightedItem.length) {
             removeClass(highlightedItem, dropDownListClasses.focus);
         }
     }
-    getTransformValues() {
-        let translateY = this.viewPortInfo.startIndex * this.listItemHeight;
-        translateY = translateY - (this.skeletonCount * this.listItemHeight);
-        translateY = this.viewPortInfo.startIndex === 0 && this.listData && this.listData.length === 0 ? 0 : translateY;
-        const styleText = `transform: translate(0px, ${translateY}px);`;
-        return styleText;
-    }
-    GetVirtualTrackHeight() {
-        const height = this.totalItemCount === this.viewPortInfo.endIndex ? this.totalItemCount * this.listItemHeight - this.itemCount * this.listItemHeight : this.totalItemCount * this.listItemHeight;
-        const heightDimension = `height: ${height - this.itemCount * this.listItemHeight}px;`;
-        if (this.getModuleName() === 'autocomplete' && this.skeletonCount === 0) {
-            return "height: 0px;";
-        }
-        return heightDimension;
-    }
     renderPopup(e) {
         if (this.popupObj && document.body.contains(this.popupObj.element)) {
             this.refreshPopup();
@@ -4435,7 +4698,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 popupEle.setAttribute('aria-label', this.element.id);
                 popupEle.setAttribute('role', 'dialog');
                 const searchBox = this.setSearchBox(popupEle);
-                this.listHeight = formatUnit(this.popupHeight);
+                this.listContainerHeight = formatUnit(this.popupHeight);
                 if (this.headerTemplate) {
                     this.setHeaderTemplate(popupEle);
                 }
@@ -4479,19 +4742,19 @@ let DropDownList = class DropDownList extends DropDownBase {
                     this.searchBoxHeight = 0;
                     if (!isNullOrUndefined(searchBox.container) && this.getModuleName() !== 'combobox' && this.getModuleName() !== 'autocomplete') {
                         this.searchBoxHeight = (searchBox.container.parentElement).getBoundingClientRect().height;
-                        this.listHeight = (parseInt(this.listHeight, 10) - (this.searchBoxHeight)).toString() + 'px';
+                        this.listContainerHeight = (parseInt(this.listContainerHeight, 10) - (this.searchBoxHeight)).toString() + 'px';
                     }
                     if (this.headerTemplate) {
                         this.header = this.header ? this.header : popupEle.querySelector('.e-ddl-header');
                         const height = Math.round(this.header.getBoundingClientRect().height);
-                        this.listHeight = (parseInt(this.listHeight, 10) - (height + this.searchBoxHeight)).toString() + 'px';
+                        this.listContainerHeight = (parseInt(this.listContainerHeight, 10) - (height + this.searchBoxHeight)).toString() + 'px';
                     }
                     if (this.footerTemplate) {
                         this.footer = this.footer ? this.footer : popupEle.querySelector('.e-ddl-footer');
                         const height = Math.round(this.footer.getBoundingClientRect().height);
-                        this.listHeight = (parseInt(this.listHeight, 10) - (height + this.searchBoxHeight)).toString() + 'px';
+                        this.listContainerHeight = (parseInt(this.listContainerHeight, 10) - (height + this.searchBoxHeight)).toString() + 'px';
                     }
-                    this.list.style.maxHeight = (parseInt(this.listHeight, 10) - 2).toString() + 'px'; // due to box-sizing property
+                    this.list.style.maxHeight = (parseInt(this.listContainerHeight, 10) - 2).toString() + 'px'; // due to box-sizing property
                     popupEle.style.maxHeight = formatUnit(this.popupHeight);
                 }
                 else {
@@ -4524,6 +4787,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                 this.getFocusElement();
                 this.checkCollision(popupEle);
                 if (Browser.isDevice) {
+                    if ((parseInt(this.popupWidth.toString(), 10) > window.outerWidth) && !(this.getModuleName() === 'dropdownlist' && this.allowFiltering)) {
+                        this.popupObj.element.classList.add('e-wide-popup');
+                    }
                     this.popupObj.element.classList.add(dropDownListClasses.device);
                     if (this.getModuleName() === 'dropdownlist' || (this.getModuleName() === 'combobox'
                         && !this.allowFiltering && this.isDropDownClick)) {
@@ -4794,6 +5060,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                             this.list.scrollTop += nextOffset;
                         }
                         else {
+                            if (this.enableVirtualization) {
+                                liCount = keyAction == "pageDown" ? this.getPageCount() : liCount;
+                            }
                             this.list.scrollTop += this.selectedLI.offsetHeight * liCount;
                         }
                         this.isPreventKeyAction = this.IsScrollerAtEnd() ? false : this.isPreventKeyAction;
@@ -4846,6 +5115,9 @@ let DropDownList = class DropDownList extends DropDownBase {
             else if (nextOffset < 0 || isPageUpKeyAction) {
                 var currentElementValue = this.selectedLI ? this.selectedLI.getAttribute('data-value') : null;
                 var liCount = keyAction == "pageUp" ? this.getPageCount() - 2 : 1;
+                if (this.enableVirtualization) {
+                    liCount = keyAction == "pageUp" ? this.getPageCount() : liCount;
+                }
                 if (this.enableVirtualization && this.isKeyBoardAction && firstElementValue && currentElementValue === firstElementValue && keyAction != "home" && !this.isVirtualScrolling) {
                     this.isUpwardScrolling = true;
                     this.isPreventKeyAction = true;
@@ -4942,6 +5214,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         let isFilterValue = !isNullOrUndefined(this.filterInput) && !isNullOrUndefined(this.filterInput.value) && this.filterInput.value !== '';
         const typedString = this.getModuleName() === 'combobox' ? this.typedString : null;
         this.isTyped = false;
+        this.isVirtualTrackHeight = false;
         if (!(this.popupObj && document.body.contains(this.popupObj.element) && this.beforePopupOpen)) {
             return;
         }
@@ -5030,8 +5303,8 @@ let DropDownList = class DropDownList extends DropDownBase {
                 }
             }
         });
-        if (this.isReact && this.isFiltering() && this.itemTemplate != null) {
-            this.actionCompleteData.ulElement = this.ulElement.cloneNode(true);
+        if (Browser.isDevice && !eventArgs.cancel && this.popupObj.element.classList.contains('e-wide-popup')) {
+            this.popupObj.element.classList.remove('e-wide-popup');
         }
         let dataSourceCount;
         if (this.dataSource instanceof DataManager) {
@@ -5196,6 +5469,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                 this.listItemHeight = this.getListHeight();
                 this.getSkeletonCount();
                 this.updateVirtualizationProperties(this.itemCount, this.allowFiltering);
+                if (this.index !== null) {
+                    this.activeIndex = this.index + this.skeletonCount;
+                }
             }
             this.initValue();
             this.selectedValueInfo = this.viewPortInfo;
@@ -5205,7 +5481,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         else if (this.element.tagName === 'SELECT' && this.element.options[0]) {
             const selectElement = this.element;
-            this.value = selectElement.options[selectElement.selectedIndex].value;
+            this.value = this.allowObjectBinding ? this.getDataByValue(selectElement.options[selectElement.selectedIndex].value) : selectElement.options[selectElement.selectedIndex].value;
             this.text = isNullOrUndefined(this.value) ? null : selectElement.options[selectElement.selectedIndex].textContent;
             this.initValue();
         }
@@ -5357,7 +5633,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.actionData = this.actionCompleteData;
         }
     }
-    updateDataSource(props) {
+    updateDataSource(props, oldProps) {
         if (this.inputElement.value !== '' || (!isNullOrUndefined(props) && (isNullOrUndefined(props.dataSource)
             || (!(props.dataSource instanceof DataManager) && props.dataSource.length === 0)))) {
             this.clearAll(null, props);
@@ -5367,7 +5643,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             EventHandler.add(this.list, 'scroll', this.setFloatingHeader, this);
         }
         if (!(!isNullOrUndefined(props) && (isNullOrUndefined(props.dataSource)
-            || (!(props.dataSource instanceof DataManager) && props.dataSource.length === 0))) || !(Array.isArray(props.dataSource) && props.dataSource.length === 0)) {
+            || (!(props.dataSource instanceof DataManager) && props.dataSource.length === 0))) || ((props.dataSource instanceof DataManager) || (!isNullOrUndefined(props) && Array.isArray(props.dataSource) && !isNullOrUndefined(oldProps) && Array.isArray(oldProps.dataSource) && props.dataSource.length !== oldProps.dataSource.length))) {
             this.typedString = '';
             this.resetList(this.dataSource);
         }
@@ -5376,9 +5652,11 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
     }
     checkCustomValue() {
-        this.itemData = this.getDataByValue(this.value);
+        const currentValue = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
+        this.itemData = this.getDataByValue(currentValue);
         const dataItem = this.getItemData();
-        this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
+        let value = this.allowObjectBinding ? this.itemData : dataItem.value;
+        this.setProperties({ 'text': dataItem.text, 'value': value });
     }
     updateInputFields() {
         if (this.getModuleName() === 'dropdownlist') {
@@ -5458,11 +5736,11 @@ let DropDownList = class DropDownList extends DropDownBase {
                     }
                     if (!this.list) {
                         if (this.dataSource instanceof DataManager) {
-                            this.initRemoteRender = true;
+                            this.initialRemoteRender = true;
                         }
                         this.renderList();
                     }
-                    if (!this.initRemoteRender) {
+                    if (!this.initialRemoteRender) {
                         const li = this.getElementByText(newProp.text);
                         if (!this.checkValidLi(li)) {
                             if (this.liCollections && this.liCollections.length === 100 &&
@@ -5499,6 +5777,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                         this.clearAll();
                         break;
                     }
+                    if (this.allowObjectBinding && !isNullOrUndefined(newProp.value) && !isNullOrUndefined(oldProp.value) && this.isObjectInArray(newProp.value, [oldProp.value])) {
+                        return;
+                    }
                     if (this.enableVirtualization) {
                         this.updateValues();
                         this.updateInputFields();
@@ -5511,12 +5792,13 @@ let DropDownList = class DropDownList extends DropDownBase {
                     this.notify('beforeValueChange', { newProp: newProp }); // gird component value type change
                     if (!this.list) {
                         if (this.dataSource instanceof DataManager) {
-                            this.initRemoteRender = true;
+                            this.initialRemoteRender = true;
                         }
                         this.renderList();
                     }
-                    if (!this.initRemoteRender) {
-                        const item = this.getElementByValue(newProp.value);
+                    if (!this.initialRemoteRender) {
+                        const value = this.allowObjectBinding && !isNullOrUndefined(newProp.value) ? getValue((this.fields.value) ? this.fields.value : '', newProp.value) : newProp.value;
+                        const item = this.getElementByValue(value);
                         if (!this.checkValidLi(item)) {
                             if (this.liCollections && this.liCollections.length === 100 &&
                                 this.getModuleName() === 'autocomplete' && this.listData.length > 100) {
@@ -5526,7 +5808,8 @@ let DropDownList = class DropDownList extends DropDownBase {
                                 const listLength = this.getItems().length;
                                 const checkField = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;
                                 this.typedString = '';
-                                this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField, 'equal', newProp.value)))
+                                let value = this.allowObjectBinding && !isNullOrUndefined(newProp.value) ? getValue(checkField, newProp.value) : newProp.value;
+                                this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField, 'equal', value)))
                                     .then((e) => {
                                     if (e.result.length > 0) {
                                         this.addItem(e.result, listLength);
@@ -5555,11 +5838,11 @@ let DropDownList = class DropDownList extends DropDownBase {
                     }
                     if (!this.list) {
                         if (this.dataSource instanceof DataManager) {
-                            this.initRemoteRender = true;
+                            this.initialRemoteRender = true;
                         }
                         this.renderList();
                     }
-                    if (!this.initRemoteRender && this.liCollections) {
+                    if (!this.initialRemoteRender && this.liCollections) {
                         const element = this.liCollections[newProp.index];
                         if (!this.checkValidLi(element)) {
                             if (this.liCollections && this.liCollections.length === 100 &&
@@ -5638,6 +5921,8 @@ let DropDownList = class DropDownList extends DropDownBase {
                 }
             }
             else if (prop === 'value') {
+                const fields = (this.fields.value) ? this.fields.value : '';
+                const value = this.allowObjectBinding && !isNullOrUndefined(newProp) ? getValue(fields, newProp) : newProp;
                 li = this.getElementByValue(newProp);
                 if (!this.checkValidLi(li)) {
                     this.setOldValue(oldProp);
@@ -5700,6 +5985,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (!this.enabled) {
             return;
         }
+        this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;
         if (this.isReact && this.getModuleName() === 'combobox' && this.itemTemplate && this.isCustomFilter && this.isAddNewItemTemplate) {
             this.renderList();
             this.isAddNewItemTemplate = false;
@@ -5720,6 +6006,9 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         else if (isNullOrUndefined(this.list) || !isUndefined(this.list) && (this.list.classList.contains(dropDownBaseClasses.noData) ||
             this.list.querySelectorAll('.' + dropDownBaseClasses.li).length <= 0)) {
+            if (this.isReact && this.isFiltering() && this.itemTemplate != null) {
+                this.isSecondClick = false;
+            }
             this.renderList(e);
         }
         if (this.enableVirtualization && this.listData && this.listData.length) {
@@ -5773,7 +6062,8 @@ let DropDownList = class DropDownList extends DropDownBase {
             }
             this.isEscapeKey = false;
             if (!isNullOrUndefined(this.index)) {
-                const element = this.findListElement(this.ulElement, 'li', 'data-value', this.value);
+                const value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
+                const element = this.findListElement(this.ulElement, 'li', 'data-value', value);
                 this.selectedLI = this.liCollections[this.index] || element;
                 if (this.selectedLI) {
                     this.updateSelectedItem(this.selectedLI, null, true);
@@ -5786,6 +6076,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 this.resetSelection();
             }
         }
+        this.isVirtualTrackHeight = false;
         this.closePopup(0, e);
         const dataItem = this.getItemData();
         let isSelectVal = !isNullOrUndefined(this.selectedLI);
@@ -5857,6 +6148,9 @@ let DropDownList = class DropDownList extends DropDownBase {
      */
     destroy() {
         this.isActive = false;
+        if (this.showClearButton) {
+            this.clearButton = document.getElementsByClassName('e-clear-icon')[0];
+        }
         resetIncrementalSearchValues(this.element.id);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (this.isReact) {
@@ -5912,6 +6206,14 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (this.inputElement && !isNullOrUndefined(this.inputElement.onchange)) {
             this.inputElement.onchange = null;
         }
+        if (this.inputElement && !isNullOrUndefined(this.inputElement.onselect)) {
+            this.inputElement.onselect = null;
+        }
+        Input.destroy({
+            element: this.inputElement,
+            floatLabelType: this.floatLabelType,
+            properties: this.properties
+        }, this.clearButton);
         if (this.isAngular) {
             this.inputElement = null;
         }
@@ -5926,7 +6228,7 @@ let DropDownList = class DropDownList extends DropDownBase {
     getItems() {
         if (!this.list) {
             if (this.dataSource instanceof DataManager) {
-                this.initRemoteRender = true;
+                this.initialRemoteRender = true;
             }
             this.renderList();
         }
@@ -6005,6 +6307,9 @@ __decorate$1([
 __decorate$1([
     Property(null)
 ], DropDownList.prototype, "value", void 0);
+__decorate$1([
+    Property(false)
+], DropDownList.prototype, "allowObjectBinding", void 0);
 __decorate$1([
     Property(null)
 ], DropDownList.prototype, "index", void 0);
@@ -6174,7 +6479,6 @@ let DropDownTree = class DropDownTree extends Component {
         this.filterTimer = null;
         this.isFilteredData = false;
         this.isFilterRestore = false;
-        // eslint-disable-next-line
         this.selectedData = [];
         this.filterDelayTime = 300;
         this.isClicked = false;
@@ -6271,7 +6575,7 @@ let DropDownTree = class DropDownTree extends Component {
                 this.inputEle.setAttribute('aria-expanded', 'false');
                 this.inputEle.setAttribute('role', 'combobox');
                 this.inputEle.setAttribute('aria-haspopup', 'tree');
-                this.inputEle.setAttribute('aria-controls', this.element.id + "_options");
+                this.inputEle.setAttribute('aria-controls', this.element.id + '_options');
             }
             if (isNullOrUndefined(this.inputEle.getAttribute('type'))) {
                 this.inputEle.setAttribute('type', 'text');
@@ -6314,7 +6618,9 @@ let DropDownTree = class DropDownTree extends Component {
         this.popupDiv.classList.add(DROPDOWN);
         this.tree = this.createElement('div', { id: this.element.id + '_tree' });
         this.popupDiv.appendChild(this.tree);
-        document.body.appendChild(this.popupDiv);
+        if (!this.destroyPopupOnHide) {
+            document.body.appendChild(this.popupDiv);
+        }
         this.wireTreeEvents();
         addClass([this.popupDiv], DDTHIDEICON);
         this.renderTree();
@@ -6419,6 +6725,7 @@ let DropDownTree = class DropDownTree extends Component {
                 if (value === '') {
                     this.isFilteredData = false;
                     this.isFilterRestore = true;
+                    this.isFromFilterChange = false;
                     fields = this.cloneFields(this.fields);
                 }
                 else if (args.preventDefaultAction) {
@@ -6457,7 +6764,7 @@ let DropDownTree = class DropDownTree extends Component {
                 this.treeObj.dataBind();
                 if (this.hasTemplate && this.portals && this.treeObj.portals) {
                     for (let i = 0; i < this.treeObj.portals.length; i++) {
-                        if (this.portals.indexOf(this.treeObj.portals[i]) == -1) {
+                        if (this.portals.indexOf(this.treeObj.portals[i]) === -1) {
                             this.portals.push(this.treeObj.portals[i]);
                         }
                     }
@@ -6496,7 +6803,6 @@ let DropDownTree = class DropDownTree extends Component {
         return filteredItems;
     }
     nestedFilter(value, filteredFields) {
-        // eslint-disable-next-line
         const matchedDataSource = [];
         for (let i = 0; i < this.treeData.length; i++) {
             // eslint-disable-next-line
@@ -6508,15 +6814,12 @@ let DropDownTree = class DropDownTree extends Component {
         filteredFields.dataSource = matchedDataSource;
         return filteredFields;
     }
-    // eslint-disable-next-line
     nestedChildFilter(value, node) {
-        // eslint-disable-next-line
         const children = node[this.fields.child];
         if (isNullOrUndefined(children)) {
             return (this.isMatchedNode(value, node)) ? node : null;
         }
         else {
-            // eslint-disable-next-line
             const matchedChildren = [];
             for (let i = 0; i < children.length; i++) {
                 // eslint-disable-next-line
@@ -6537,9 +6840,7 @@ let DropDownTree = class DropDownTree extends Component {
         }
     }
     selfReferencefilter(value, filteredFields) {
-        // eslint-disable-next-line
         const matchedData = [];
-        // eslint-disable-next-line
         const matchedDataSource = [];
         for (let i = 0; i < this.treeData.length; i++) {
             if (this.isMatchedNode(value, this.treeData[i])) {
@@ -6552,7 +6853,6 @@ let DropDownTree = class DropDownTree extends Component {
                 // eslint-disable-next-line
                 let parentId = matchedData[i][this.fields.parentValue];
                 while (!isNullOrUndefined(parentId)) {
-                    // eslint-disable-next-line
                     let parent = null;
                     for (let j = 0; j < this.treeData.length; j++) {
                         // eslint-disable-next-line
@@ -6575,7 +6875,6 @@ let DropDownTree = class DropDownTree extends Component {
         filteredFields.dataSource = matchedDataSource;
         return filteredFields;
     }
-    // eslint-disable-next-line
     isMatchedNode(value, node, isChild, isChildFiltering) {
         let checkValue;
         let isObjectValue = isChild && isChildFiltering && this.isChildObject();
@@ -6930,7 +7229,7 @@ let DropDownTree = class DropDownTree extends Component {
                         this.clickHandler(e);
                         break;
                     case 'moveDown':
-                        let focusedElement = this.treeObj.element.querySelector('li');
+                        const focusedElement = this.treeObj.element.querySelector('li');
                         focusedElement.focus();
                         addClass([focusedElement], ['e-node-focus']);
                 }
@@ -6968,7 +7267,6 @@ let DropDownTree = class DropDownTree extends Component {
             let remaining;
             let downIconWidth = 0;
             this.overFlowWrapper.innerHTML = '';
-            // eslint-disable-next-line
             const l10nLocale = { overflowCountTemplate: '+${count} more..', totalCountTemplate: '${count} selected' };
             this.l10n = new L10n(this.getLocaleName(), l10nLocale, this.locale);
             const remainContent = this.l10n.getConstant('overflowCountTemplate');
@@ -7251,7 +7549,6 @@ let DropDownTree = class DropDownTree extends Component {
         if (this.selectAllText !== 'Select All' || this.unSelectAllText !== 'Unselect All') {
             const template = unSelect ? this.unSelectAllText : this.selectAllText;
             this.selectAllSpan.textContent = '';
-            // eslint-disable-next-line
             const compiledString = compile(template);
             const templateName = unSelect ? 'unSelectAllText' : 'selectAllText';
             for (const item of compiledString({}, this, templateName, null, !this.isStringTemplate)) {
@@ -7275,11 +7572,11 @@ let DropDownTree = class DropDownTree extends Component {
                 if (htmlAttr === 'class') {
                     this.inputWrapper.classList.add(this.htmlAttributes[`${htmlAttr}`]);
                 }
-                else if (htmlAttr === 'disabled' && this.htmlAttributes[`${htmlAttr}`] === 'disabled') {
+                else if (htmlAttr === 'disabled') {
                     this.setProperties({ enabled: false }, true);
                     this.setEnable();
                 }
-                else if (htmlAttr === 'readonly' && !isNullOrUndefined(this.htmlAttributes[`${htmlAttr}`])) {
+                else if (htmlAttr === 'readonly') {
                     this.setProperties({ readonly: true }, true);
                     this.dataBind();
                 }
@@ -7339,7 +7636,6 @@ let DropDownTree = class DropDownTree extends Component {
     }
     setTreeValue() {
         if (this.value !== null && this.value.length !== 0) {
-            // eslint-disable-next-line
             let data;
             if (this.showCheckBox || this.allowMultiSelection) {
                 for (let i = 0; i < this.value.length; i++) {
@@ -7369,7 +7665,6 @@ let DropDownTree = class DropDownTree extends Component {
             return;
         }
         if (this.text !== null) {
-            // eslint-disable-next-line
             let data;
             const valArr = [];
             if (this.showCheckBox || this.allowMultiSelection) {
@@ -7437,7 +7732,7 @@ let DropDownTree = class DropDownTree extends Component {
         }
         else {
             if (this.showCheckBox) {
-                let difference = this.value.filter((e) => {
+                const difference = this.value.filter((e) => {
                     return this.treeObj.checkedNodes.indexOf(e) === -1;
                 });
                 if (difference.length > 0 || this.treeSettings.autoCheck) {
@@ -7459,9 +7754,7 @@ let DropDownTree = class DropDownTree extends Component {
             this.triggerChangeEvent();
         }
     }
-    // eslint-disable-next-line
     getItems(givenText) {
-        // eslint-disable-next-line
         let data;
         if (this.treeDataType === 1) {
             for (let i = 0; i < this.treeItems.length; i++) {
@@ -7478,9 +7771,7 @@ let DropDownTree = class DropDownTree extends Component {
         }
         return data;
     }
-    // eslint-disable-next-line
     getNestedItems(data, field, givenText) {
-        // eslint-disable-next-line
         let newData;
         for (let i = 0, objlen = data.length; i < objlen; i++) {
             // eslint-disable-next-line
@@ -7491,7 +7782,6 @@ let DropDownTree = class DropDownTree extends Component {
             else if (typeof field.child === 'string' && !isNullOrUndefined(getValue(field.child, data[i]))) {
                 // eslint-disable-next-line
                 const childData = getValue(field.child, data[i]);
-                // eslint-disable-next-line
                 newData = this.getNestedItems(childData, this.getChildType(field), givenText);
                 if (newData !== undefined) {
                     break;
@@ -7534,7 +7824,7 @@ let DropDownTree = class DropDownTree extends Component {
             nodeTemplate: this.itemTemplate
         });
         this.treeObj.root = this.root ? this.root : this;
-        this.treeObj.appendTo('#' + this.tree.id);
+        this.treeObj.appendTo(this.tree);
     }
     /* To render the popup element */
     renderPopup() {
@@ -7591,9 +7881,13 @@ let DropDownTree = class DropDownTree extends Component {
                 this.isFirstRender = false;
                 /* eslint-disable */
                 if (this.hasTemplate && this.portals) {
-                    this.portals = this.portals.concat(this.treeObj.portals);
+                    if (this.treeObj.portals) {
+                        this.portals = this.portals.concat(this.treeObj.portals.filter((item) => !this.portals.includes(item)));
+                    }
                     /* eslint-enable */
-                    this.renderReactTemplates();
+                    if (this.isReact) {
+                        this.renderReactTemplates(this.reactCallBack);
+                    }
                 }
             }
             if (!isCancelled) {
@@ -7604,7 +7898,15 @@ let DropDownTree = class DropDownTree extends Component {
                 this.popupObj.refreshPosition();
                 if (!(this.showCheckBox && this.showSelectAll) && (!this.popupDiv.classList.contains(NODATA)
                     && this.treeItems.length > 0)) {
-                    let focusedElement = this.treeObj.element.querySelector('li');
+                    let focusedElement;
+                    if (this.value != null && this.text != null) {
+                        this.treeObj.element.querySelector('li').setAttribute('tabindex', '-1');
+                        focusedElement = this.treeObj.element.querySelector('[data-uid="' + this.value[0] + '"]');
+                        focusedElement.setAttribute('tabindex', '0');
+                    }
+                    else {
+                        focusedElement = this.treeObj.element.querySelector('li');
+                    }
                     focusedElement.focus();
                     addClass([focusedElement], ['e-node-focus']);
                 }
@@ -7622,6 +7924,10 @@ let DropDownTree = class DropDownTree extends Component {
             }
         });
     }
+    reactCallBack() {
+        this.updatePopupHeight();
+        this.popupObj.refreshPosition();
+    }
     updatePopupHeight() {
         if (this.isFirstRender) {
             return;
@@ -7879,7 +8185,6 @@ let DropDownTree = class DropDownTree extends Component {
         }
         return null;
     }
-    // eslint-disable-next-line
     getTreeDataType(ds, field) {
         if (this.fields.dataSource instanceof DataManager) {
             for (let i = 0; i < ds.length; i++) {
@@ -7889,8 +8194,9 @@ let DropDownTree = class DropDownTree extends Component {
             }
             return 2;
         }
-        if (isNullOrUndefined(this.fields.dataSource))
+        if (isNullOrUndefined(this.fields.dataSource)) {
             this.fields.dataSource = [];
+        }
         for (let i = 0, len = this.fields.dataSource.length; i < len; i++) {
             if ((typeof field.child === 'string') && !isNullOrUndefined(getValue(field.child, this.fields.dataSource[i]))) {
                 return 2;
@@ -7911,9 +8217,7 @@ let DropDownTree = class DropDownTree extends Component {
         this.treeObj.dataBind();
     }
     getEventArgs(args) {
-        // eslint-disable-next-line
         const checkData = args.data;
-        // eslint-disable-next-line
         const selectData = args.nodeData;
         let state;
         if (this.showCheckBox) {
@@ -7998,7 +8302,6 @@ let DropDownTree = class DropDownTree extends Component {
         const target = args.event.target;
         if ((target.classList.contains('e-fullrow') || target.classList.contains('e-list-text')) && this.showCheckBox) {
             this.isClicked = true;
-            // eslint-disable-next-line
             const getNodeDetails = this.treeObj.getNode(args.node);
             if (getNodeDetails.isChecked === 'true') {
                 this.treeObj.uncheckAll([args.node]);
@@ -8050,7 +8353,7 @@ let DropDownTree = class DropDownTree extends Component {
     onNodeExpanded(args) {
         if (this.hasTemplate && this.portals && this.treeObj.portals) {
             for (let i = 0; i < this.treeObj.portals.length; i++) {
-                if (this.portals.indexOf(this.treeObj.portals[i]) == -1) {
+                if (this.portals.indexOf(this.treeObj.portals[i]) === -1) {
                     this.portals.push(this.treeObj.portals[i]);
                 }
             }
@@ -8148,7 +8451,7 @@ let DropDownTree = class DropDownTree extends Component {
     }
     setMultiSelectValue(newValues) {
         if (!this.isFilteredData) {
-            this.setProperties({ value: this.isFromFilterChange && newValues && newValues.length == 0 ? this.value : newValues }, true);
+            this.setProperties({ value: this.isFromFilterChange && newValues && newValues.length === 0 ? this.value : newValues }, true);
             this.isFromFilterChange = false;
             if (newValues && newValues.length !== 0 && !this.showCheckBox) {
                 this.treeObj.selectedNodes = this.value.slice();
@@ -8198,9 +8501,7 @@ let DropDownTree = class DropDownTree extends Component {
         }
         this.updateSelectedValues();
     }
-    // eslint-disable-next-line
     getSelectedData(value) {
-        // eslint-disable-next-line
         let data = null;
         if (this.isFilteredData) {
             for (let i = 0; i < this.selectedData.length; i++) {
@@ -8230,7 +8531,7 @@ let DropDownTree = class DropDownTree extends Component {
         }
         else if (this.treeDataType === 1) {
             for (let i = 0, objlen = this.treeItems.length; i < objlen; i++) {
-                let dataId = getValue(this.fields.value, this.treeItems[i]);
+                const dataId = getValue(this.fields.value, this.treeItems[i]);
                 if (!isNullOrUndefined(this.treeItems[i]) && !isNullOrUndefined(dataId) && dataId.toString() === id) {
                     return this.treeItems[i];
                 }
@@ -8247,19 +8548,19 @@ let DropDownTree = class DropDownTree extends Component {
             return newChildItems;
         }
         for (let i = 0, objlen = obj.length; i < objlen; i++) {
-            let dataValue = getValue(mapper.value, obj[i]);
+            const dataValue = getValue(mapper.value, obj[i]);
             if (obj[i] && dataValue && dataValue.toString() === id) {
                 return obj[i];
             }
             else if (typeof mapper.child === 'string' && !isNullOrUndefined(getValue(mapper.child, obj[i]))) {
-                let childNodeData = getValue(mapper.child, obj[i]);
+                const childNodeData = getValue(mapper.child, obj[i]);
                 newChildItems = this.getChildNodeData(childNodeData, this.getChildMapperFields(mapper), id);
                 if (newChildItems !== undefined) {
                     break;
                 }
             }
             else if (this.fields.dataSource instanceof DataManager && !isNullOrUndefined(getValue('child', obj[i]))) {
-                let child = 'child';
+                const child = 'child';
                 newChildItems = this.getChildNodeData(getValue(child, obj[i]), this.getChildMapperFields(mapper), id);
                 if (newChildItems !== undefined) {
                     break;
@@ -8287,7 +8588,6 @@ let DropDownTree = class DropDownTree extends Component {
         let temp;
         let text;
         let textValue = '';
-        // eslint-disable-next-line
         let selectedData;
         this.hiddenElement.innerHTML = '';
         let hiddenInputValue = '';
@@ -8383,7 +8683,7 @@ let DropDownTree = class DropDownTree extends Component {
             addClass([this.inputWrapper], SHOW_CHIP);
         }
         const chip = this.createElement('span', {
-            className: CHIP,
+            className: CHIP
         });
         if (!this.inputEle.classList.contains(CHIP_INPUT)) {
             addClass([this.inputEle], CHIP_INPUT);
@@ -8425,7 +8725,6 @@ let DropDownTree = class DropDownTree extends Component {
             this.header = this.createElement('div');
             addClass([this.header], HEADER);
         }
-        // eslint-disable-next-line
         const compiledString = this.templateComplier(this.headerTemplate);
         let tempArr = compiledString({}, this, 'headerTemplate', this.headerTemplateId, this.isStringTemplate, undefined, this.header);
         if (tempArr) {
@@ -8434,7 +8733,6 @@ let DropDownTree = class DropDownTree extends Component {
         }
         this.popupEle.insertBefore(this.header, this.checkAllParent ? this.checkAllParent : this.popupDiv);
     }
-    // eslint-disable-next-line
     templateComplier(template) {
         if (template) {
             // eslint-disable-next-line
@@ -8460,7 +8758,6 @@ let DropDownTree = class DropDownTree extends Component {
             this.footer = this.createElement('div');
             addClass([this.footer], FOOTER);
         }
-        // eslint-disable-next-line
         const compiledString = this.templateComplier(this.footerTemplate);
         let tempArr = compiledString({}, this, 'footerTemplate', this.footerTemplateId, this.isStringTemplate, undefined, this.footer);
         if (tempArr) {
@@ -8519,7 +8816,7 @@ let DropDownTree = class DropDownTree extends Component {
         this.ensurePlaceHolder();
     }
     resetValue(isDynamicChange) {
-        if (this.value == [] && this.text == null) {
+        if (this.value === [] && this.text == null) {
             return;
         }
         Input.setValue(null, this.inputEle, this.floatLabelType);
@@ -8658,7 +8955,6 @@ let DropDownTree = class DropDownTree extends Component {
             const template = actionFailure ? this.actionFailureTemplate : this.noRecordsTemplate;
             const templateId = actionFailure ? this.actionFailureTemplateId : this.noRecordsTemplateId;
             const templatestring = actionFailure ? 'actionFailureTemplate' : 'noRecordsTemplate';
-            // eslint-disable-next-line
             const compiledString = this.templateComplier(template);
             let tempArr = compiledString({}, this, templatestring, templateId, this.isStringTemplate, undefined, this.noRecord);
             if (tempArr) {
@@ -8667,7 +8963,6 @@ let DropDownTree = class DropDownTree extends Component {
             }
         }
         else {
-            // eslint-disable-next-line
             const l10nLocale = { noRecordsTemplate: 'No Records Found', actionFailureTemplate: 'The Request Failed' };
             this.l10n = new L10n(this.getLocaleName(), l10nLocale, this.locale);
             this.noRecord.innerHTML = actionFailure ?
@@ -8898,10 +9193,10 @@ let DropDownTree = class DropDownTree extends Component {
                     this.updateTreeSettings(newProp);
                     break;
                 case 'customTemplate':
-                    if (this.mode !== "Custom") {
+                    if (this.mode !== 'Custom') {
                         return;
                     }
-                    this.chipCollection.innerHTML = "";
+                    this.chipCollection.innerHTML = '';
                     this.setTagValues();
                     break;
                 case 'sortOrder':
@@ -9051,6 +9346,16 @@ let DropDownTree = class DropDownTree extends Component {
             this.filterObj = null;
         }
     }
+    destroyPopup() {
+        this.isPopupOpen = false;
+        if (this.isReact) {
+            this.clearTemplate();
+        }
+        if (this.popupObj) {
+            this.popupObj.destroy();
+            detach(this.popupObj.element);
+        }
+    }
     /**
      * Ensures visibility of the Dropdown Tree item by using item value or item element.
      * If many Dropdown Tree items are present, and we are in need to find a particular item, then the `ensureVisible` property
@@ -9068,7 +9373,6 @@ let DropDownTree = class DropDownTree extends Component {
      * @param  {string | Element} item - Specifies the value of Dropdown Tree item/ Dropdown Tree item element
      * @returns {'{[key: string]: Object }[]'} - returns the updated data source of the Dropdown Tree.
      */
-    // eslint-disable-next-line
     getData(item) {
         return this.treeObj.getTreeData(item);
     }
@@ -9093,6 +9397,10 @@ let DropDownTree = class DropDownTree extends Component {
                 }
             }
             this.trigger('close', eventArgs);
+            if (this.destroyPopupOnHide) {
+                this.isFirstRender = true;
+                this.destroyPopup();
+            }
         }
     }
     /**
@@ -9143,7 +9451,7 @@ __decorate$2([
     Property('')
 ], DropDownTree.prototype, "cssClass", void 0);
 __decorate$2([
-    Property("${value.length} item(s) selected")
+    Property('${value.length} item(s) selected')
 ], DropDownTree.prototype, "customTemplate", void 0);
 __decorate$2([
     Property(',')
@@ -9209,7 +9517,10 @@ __decorate$2([
     Property(false)
 ], DropDownTree.prototype, "showCheckBox", void 0);
 __decorate$2([
-    Property(false)
+    Property(true)
+], DropDownTree.prototype, "destroyPopupOnHide", void 0);
+__decorate$2([
+    Property(true)
 ], DropDownTree.prototype, "enableHtmlSanitizer", void 0);
 __decorate$2([
     Property(true)
@@ -9394,8 +9705,12 @@ let ComboBox = class ComboBox extends DropDownList {
         this.setHiddenValue();
     }
     valueMuteChange(value) {
+        value = this.allowObjectBinding && !isNullOrUndefined(value) ? getValue((this.fields.value) ? this.fields.value : '', value) : value;
         const inputValue = isNullOrUndefined(value) ? null : value.toString();
         Input.setValue(inputValue, this.inputElement, this.floatLabelType, this.showClearButton);
+        if (this.allowObjectBinding) {
+            value = this.getDataByValue(value);
+        }
         this.setProperties({ value: value, text: value, index: null }, true);
         this.activeIndex = this.index;
         const fields = this.fields;
@@ -9404,20 +9719,50 @@ let ComboBox = class ComboBox extends DropDownList {
         dataItem[fields.value] = isNullOrUndefined(value) ? null : value.toString();
         this.itemData = dataItem;
         this.item = null;
-        if (this.previousValue !== this.value) {
+        if ((!this.allowObjectBinding && (this.previousValue !== this.value)) || (this.allowObjectBinding && this.previousValue && this.value && !this.isObjectInArray(this.previousValue, [this.value]))) {
             this.detachChangeEvent(null);
         }
     }
     updateValues() {
         if (!isNullOrUndefined(this.value)) {
-            const li = this.getElementByValue(this.value);
+            let currentValue = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
+            const li = this.getElementByValue(currentValue);
+            let doesItemExist = !isNullOrUndefined(li) ? true : false;
+            if (this.enableVirtualization && this.value) {
+                const fields = (this.fields.value) ? this.fields.value : '';
+                let currentValue = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
+                if (this.dataSource instanceof DataManager && this.virtualGroupDataSource) {
+                    const getItem = new DataManager(this.virtualGroupDataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', currentValue)));
+                    if (getItem && getItem.length > 0) {
+                        this.itemData = getItem[0];
+                        doesItemExist = true;
+                        const dataItem = this.getItemData();
+                        let value = this.allowObjectBinding ? this.getDataByValue(dataItem.value) : dataItem.value;
+                        if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {
+                            this.setProperties({ 'text': dataItem.text, 'value': value });
+                        }
+                    }
+                }
+                else {
+                    const getItem = new DataManager(this.dataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', currentValue)));
+                    if (getItem && getItem.length > 0) {
+                        this.itemData = getItem[0];
+                        doesItemExist = true;
+                        const dataItem = this.getItemData();
+                        let value = this.allowObjectBinding ? this.getDataByValue(dataItem.value) : dataItem.value;
+                        if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {
+                            this.setProperties({ 'text': dataItem.text, 'value': value });
+                        }
+                    }
+                }
+            }
             if (li) {
                 this.setSelection(li, null);
             }
-            else if (this.allowCustom) {
+            else if ((!this.enableVirtualization && this.allowCustom) || (this.allowCustom && this.enableVirtualization && !doesItemExist)) {
                 this.valueMuteChange(this.value);
             }
-            else {
+            else if (!this.enableVirtualization || (this.enableVirtualization && !doesItemExist)) {
                 this.valueMuteChange(null);
             }
         }
@@ -9526,7 +9871,7 @@ let ComboBox = class ComboBox extends DropDownList {
                     this.updateIncrementalView(0, this.itemCount);
                 }
                 activeItem = Search(inputValue, this.incrementalLiCollections, this.filterType, true, dataSource, this.fields, type);
-                while (isNullOrUndefined(activeItem) && this.incrementalEndIndex < this.totalItemCount) {
+                while (isNullOrUndefined(activeItem.item) && this.incrementalEndIndex < this.totalItemCount) {
                     this.incrementalStartIndex = this.incrementalEndIndex;
                     this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount : this.incrementalEndIndex + 100;
                     this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);
@@ -9536,6 +9881,7 @@ let ComboBox = class ComboBox extends DropDownList {
                     }
                     activeItem = Search(inputValue, this.incrementalLiCollections, this.filterType, true, dataSource, this.fields, type);
                     if (!isNullOrUndefined(activeItem)) {
+                        activeItem.index = activeItem.index + this.incrementalStartIndex;
                         break;
                     }
                     if (isNullOrUndefined(activeItem) && this.incrementalEndIndex >= this.totalItemCount) {
@@ -9621,10 +9967,12 @@ let ComboBox = class ComboBox extends DropDownList {
         }
     }
     checkCustomValue() {
-        this.itemData = this.getDataByValue(this.value);
+        const value = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
+        this.itemData = this.getDataByValue(value);
         const dataItem = this.getItemData();
+        const setValue$$1 = this.allowObjectBinding ? this.itemData : dataItem.value;
         if (!(this.allowCustom && isNullOrUndefined(dataItem.value) && isNullOrUndefined(dataItem.text))) {
-            this.setProperties({ 'value': dataItem.value }, !this.allowCustom);
+            this.setProperties({ 'value': setValue$$1 }, !this.allowCustom);
         }
     }
     /**
@@ -9674,10 +10022,10 @@ let ComboBox = class ComboBox extends DropDownList {
             const currentValue = this.getTextByValue(activeElement.getAttribute('data-value')).toString();
             const currentFillValue = this.getFormattedValue(activeElement.getAttribute('data-value'));
             if (this.getModuleName() === 'combobox') {
-                if (!this.isSelected && this.previousValue !== currentFillValue) {
+                if (!this.isSelected && ((!this.allowObjectBinding && this.previousValue !== currentFillValue)) || (this.allowObjectBinding && this.previousValue && currentFillValue && !this.isObjectInArray(this.previousValue, [this.getDataByValue(currentFillValue)]))) {
                     this.updateSelectedItem(activeElement, null);
                     this.isSelected = true;
-                    this.previousValue = this.getFormattedValue(activeElement.getAttribute('data-value'));
+                    this.previousValue = this.allowObjectBinding ? this.getDataByValue(this.getFormattedValue(activeElement.getAttribute('data-value'))) : this.getFormattedValue(activeElement.getAttribute('data-value'));
                 }
                 else {
                     this.updateSelectedItem(activeElement, null, true);
@@ -9846,15 +10194,17 @@ let ComboBox = class ComboBox extends DropDownList {
         super.dropDownClick(e);
     }
     customValue(e) {
-        const value = this.getValueByText(this.inputElement.value);
+        let value = this.getValueByText(this.inputElement.value);
         if (!this.allowCustom && this.inputElement.value !== '') {
             const previousValue = this.previousValue;
             const currentValue = this.value;
+            value = this.allowObjectBinding ? this.getDataByValue(value) : value;
             this.setProperties({ value: value });
             if (isNullOrUndefined(this.value)) {
                 Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);
             }
-            if (this.autofill && previousValue === this.value && currentValue !== this.value) {
+            const newValue = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
+            if (this.autofill && ((!this.allowObjectBinding && previousValue === this.value) || (this.allowObjectBinding && previousValue && this.isObjectInArray(previousValue, [this.value]))) && ((!this.allowObjectBinding && currentValue !== this.value) || (this.allowObjectBinding && currentValue && !this.isObjectInArray(currentValue, [this.value])))) {
                 this.onChangeEvent(null);
             }
         }
@@ -9864,6 +10214,7 @@ let ComboBox = class ComboBox extends DropDownList {
                 const value = this.inputElement.value === '' ? null : this.inputElement.value;
                 // eslint-disable-next-line max-len
                 const eventArgs = { text: value, item: {} };
+                this.isObjectCustomValue = true;
                 if (!this.initial) {
                     this.trigger('customValueSpecifier', eventArgs, (eventArgs) => {
                         this.updateCustomValueCallback(value, eventArgs, previousValue, e);
@@ -9875,8 +10226,9 @@ let ComboBox = class ComboBox extends DropDownList {
             }
             else {
                 this.isSelectCustom = false;
+                value = this.allowObjectBinding ? this.getDataByValue(value) : value;
                 this.setProperties({ value: value });
-                if (previousValue !== this.value) {
+                if ((!this.allowObjectBinding && previousValue !== this.value) || (this.allowObjectBinding && previousValue && this.value && !this.isObjectInArray(previousValue, [this.value]))) {
                     this.onChangeEvent(e);
                 }
             }
@@ -9897,16 +10249,28 @@ let ComboBox = class ComboBox extends DropDownList {
             setValue(fields.value, value, dataItem);
         }
         this.itemData = dataItem;
+        const emptyObject = {};
+        if (this.allowObjectBinding) {
+            let keys = this.listData && this.listData.length > 0 ? Object.keys(this.listData[0]) : Object.keys(this.itemData);
+            if ((!(this.listData && this.listData.length > 0)) && (this.getModuleName() === 'autocomplete' || (this.getModuleName() === 'combobox' && this.allowFiltering))) {
+                keys = this.firstItem ? Object.keys(this.firstItem) : Object.keys(this.itemData);
+            }
+            // Create an empty object with predefined keys
+            keys.forEach(key => {
+                emptyObject[key] = ((key === fields.value) || (key === fields.text)) ? getValue(fields.value, this.itemData) : null;
+            });
+        }
         const changeData = {
             text: getValue(fields.text, this.itemData),
-            value: getValue(fields.value, this.itemData),
+            value: this.allowObjectBinding ? emptyObject : getValue(fields.value, this.itemData),
             index: null
         };
         this.setProperties(changeData, true);
         this.setSelection(null, null);
         this.isSelectCustom = true;
-        if (previousValue !== this.value) {
-            this.onChangeEvent(e);
+        this.isObjectCustomValue = false;
+        if ((!this.allowObjectBinding && (previousValue !== this.value)) || (this.allowObjectBinding && ((previousValue == null && this.value !== null) || (previousValue && !this.isObjectInArray(previousValue, [this.value]))))) {
+            this.onChangeEvent(e, true);
         }
     }
     /**
@@ -9920,7 +10284,7 @@ let ComboBox = class ComboBox extends DropDownList {
     onPropertyChanged(newProp, oldProp) {
         if (this.getModuleName() === 'combobox') {
             this.checkData(newProp);
-            this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp);
+            this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp, oldProp);
         }
         for (const prop of Object.keys(newProp)) {
             switch (prop) {
@@ -10068,7 +10432,8 @@ let ComboBox = class ComboBox extends DropDownList {
                 this.customValue(e);
             }
         }
-        if (isNullOrUndefined(this.listData) && this.allowCustom && !isNullOrUndefined(inputValue) && inputValue !== this.value) {
+        let value = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
+        if (isNullOrUndefined(this.listData) && this.allowCustom && !isNullOrUndefined(inputValue) && inputValue !== value) {
             this.customValue();
         }
         super.hidePopup(e);
@@ -10201,6 +10566,9 @@ __decorate$3([
 __decorate$3([
     Property(null)
 ], ComboBox.prototype, "value", void 0);
+__decorate$3([
+    Property(false)
+], ComboBox.prototype, "allowObjectBinding", void 0);
 ComboBox = __decorate$3([
     NotifyPropertyChanges
 ], ComboBox);
@@ -10260,8 +10628,9 @@ let AutoComplete = class AutoComplete extends ComboBox {
     }
     getQuery(query) {
         const filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();
-        const filterType = (this.queryString === '' && !isNullOrUndefined(this.value)) ? 'equal' : this.filterType;
-        const queryString = (this.queryString === '' && !isNullOrUndefined(this.value)) ? this.value : this.queryString;
+        let value = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
+        const filterType = (this.queryString === '' && !isNullOrUndefined(value)) ? 'equal' : this.filterType;
+        const queryString = (this.queryString === '' && !isNullOrUndefined(value)) ? value : this.queryString;
         if (this.isFiltered) {
             return filterQuery;
         }
@@ -10287,9 +10656,48 @@ let AutoComplete = class AutoComplete extends ComboBox {
             filterQuery.take(this.suggestionCount);
         }
         if (this.enableVirtualization && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource))) {
+            let queryTakeValue = 0;
+            let querySkipValue = 0;
+            if (this.query && this.query.queries.length > 0) {
+                for (let queryElements = 0; queryElements < this.query.queries.length; queryElements++) {
+                    if (this.query.queries[queryElements].fn === 'onSkip') {
+                        querySkipValue = this.query.queries[queryElements].e.nos;
+                    }
+                    if (this.query.queries[queryElements].fn === 'onTake') {
+                        queryTakeValue = takeValue <= this.query.queries[queryElements].e.nos ? this.query.queries[queryElements].e.nos : takeValue;
+                    }
+                }
+            }
+            let skipExists = false;
+            let takeExists = false;
+            if (filterQuery && filterQuery.queries.length > 0) {
+                for (let queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
+                    if (filterQuery.queries[queryElements].fn === 'onSkip') {
+                        skipExists = true;
+                    }
+                    if (filterQuery.queries[queryElements].fn === 'onTake') {
+                        takeExists = true;
+                        filterQuery.queries[queryElements].e.nos = filterQuery.queries[queryElements].e.nos <= queryTakeValue ? queryTakeValue : filterQuery.queries[queryElements].e.nos;
+                    }
+                }
+            }
             var takeValue = this.getTakeValue();
-            filterQuery.skip(this.virtualItemStartIndex);
-            filterQuery.take(takeValue);
+            if (!skipExists) {
+                if (querySkipValue > 0 && this.virtualItemStartIndex <= querySkipValue) {
+                    filterQuery.skip(querySkipValue);
+                }
+                else {
+                    filterQuery.skip(this.virtualItemStartIndex);
+                }
+            }
+            if (!takeExists) {
+                if (queryTakeValue > 0 && takeValue <= queryTakeValue) {
+                    filterQuery.take(queryTakeValue);
+                }
+                else {
+                    filterQuery.take(takeValue);
+                }
+            }
             filterQuery.requiresCount();
         }
         return filterQuery;
@@ -10297,6 +10705,7 @@ let AutoComplete = class AutoComplete extends ComboBox {
     searchLists(e) {
         this.isTyped = true;
         this.isDataFetched = this.isSelectCustom = false;
+        this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;
         this.checkAndResetCache();
         if (isNullOrUndefined(this.list)) {
             super.renderList(e, true);
@@ -10489,6 +10898,10 @@ let AutoComplete = class AutoComplete extends ComboBox {
     setInputValue(newProp, oldProp) {
         let oldValue = oldProp && oldProp.text ? oldProp.text : oldProp ? oldProp.value : oldProp;
         let value = newProp && newProp.text ? newProp.text : newProp && newProp.value ? newProp.value : this.value;
+        if (this.allowObjectBinding) {
+            oldValue = !isNullOrUndefined(oldValue) ? getValue((this.fields.value) ? this.fields.value : '', oldValue) : oldValue;
+            value = !isNullOrUndefined(value) ? getValue((this.fields.value) ? this.fields.value : '', value) : value;
+        }
         if (value && this.typedString === '' && !this.allowCustom && !(this.dataSource instanceof DataManager)) {
             let checkFields_1 = this.typeOfData(this.dataSource).typeof === 'string' ? '' : this.fields.value;
             const listLength = this.getItems().length;
@@ -10497,7 +10910,7 @@ let AutoComplete = class AutoComplete extends ComboBox {
             new DataManager(this.dataSource).executeQuery(query.where(new Predicate(checkFields_1, 'equal', value)))
                 .then(function (e) {
                 if (e.result.length > 0) {
-                    _this.value = checkFields_1 !== '' ? e.result[0][_this.fields.value].toString() : e.result[0].toString();
+                    _this.value = checkFields_1 !== '' ? _this.allowObjectBinding ? e.result[0] : e.result[0][_this.fields.value].toString() : e.result[0].toString();
                     _this.addItem(e.result, listLength);
                     _this.updateValues();
                 }
@@ -10905,8 +11318,12 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.selectAllEventEle = [];
         this.resetMainList = null;
         this.resetFilteredData = false;
+        this.preventSetCurrentData = false;
         this.scrollFocusStatus = false;
         this.keyDownStatus = false;
+        this.IsScrollerAtEnd = function () {
+            return this.list && this.list.scrollTop + this.list.clientHeight >= this.list.scrollHeight;
+        };
     }
     enableRTL(state) {
         if (state) {
@@ -10922,6 +11339,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     }
     requiredModules() {
         const modules = [];
+        if (this.enableVirtualization) {
+            modules.push({ args: [this], member: 'VirtualScroll' });
+        }
         if (this.mode === 'CheckBox') {
             this.isGroupChecking = this.enableGroupCheckBox;
             if (this.enableGroupCheckBox) {
@@ -11060,6 +11480,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 attributes(this.inputElement, { 'aria-expanded': 'true', 'aria-owns': this.element.id + '_popup', 'aria-controls': this.element.id });
                 this.updateAriaActiveDescendant();
                 if (this.isFirstClick) {
+                    if (this.enableVirtualization && this.mode === 'CheckBox' && this.value) {
+                        this.updateVirtualReOrderList();
+                    }
                     this.loadTemplate();
                 }
                 if (this.mode === 'CheckBox' && this.showSelectAll) {
@@ -11068,6 +11491,33 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             }
         });
     }
+    updateVirtualReOrderList(isCheckBoxUpdate) {
+        let query = this.getForQuery(this.value, true).clone();
+        this.resetList(this.dataSource, this.fields, query);
+        this.UpdateSkeleton();
+        this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+        this.virtualItemCount = this.itemCount;
+        if (this.mode !== 'CheckBox') {
+            this.totalItemCount = this.value && this.value.length ? this.totalItemCount - this.value.length : this.totalItemCount;
+        }
+        if (!this.list.querySelector('.e-virtual-ddl')) {
+            var virualElement = this.createElement('div', {
+                id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
+            });
+            this.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);
+        }
+        else {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
+        }
+        if (this.list.querySelector('.e-virtual-ddl-content')) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+        }
+        if (isCheckBoxUpdate) {
+            this.loadTemplate();
+        }
+    }
     updateListItems(listItems, mainListItems) {
         for (let i = 0; i < listItems.length; i++) {
             this.findGroupStart(listItems[i]);
@@ -11077,19 +11527,33 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     }
     loadTemplate() {
         this.refreshListItems(null);
+        if (this.enableVirtualization && this.list && this.mode === 'CheckBox') {
+            var reOrderList = this.list.querySelectorAll('.e-reorder')[0];
+            if (this.list.querySelector('.e-virtual-ddl-content') && reOrderList) {
+                this.list.querySelector('.e-virtual-ddl-content').removeChild(reOrderList);
+            }
+        }
         if (this.mode === 'CheckBox') {
             this.removeFocus();
         }
         this.notify('reOrder', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', e: this });
+        this.isPreventScrollAction = true;
     }
     setScrollPosition() {
         if (((!this.hideSelectedItem && this.mode !== 'CheckBox') || (this.mode === 'CheckBox' && !this.enableSelectionOrder)) &&
             (!isNullOrUndefined(this.value) && (this.value.length > 0))) {
-            const valueEle = this.findListElement((this.hideSelectedItem ? this.ulElement : this.list), 'li', 'data-value', this.value[this.value.length - 1]);
+            const value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value[this.value.length - 1]) : this.value[this.value.length - 1];
+            const valueEle = this.findListElement((this.hideSelectedItem ? this.ulElement : this.list), 'li', 'data-value', value);
             if (!isNullOrUndefined(valueEle)) {
                 this.scrollBottom(valueEle);
             }
         }
+        if (this.enableVirtualization) {
+            const focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
+            if (focusedItem) {
+                this.scrollBottom(focusedItem);
+            }
+        }
     }
     focusAtFirstListItem() {
         if (this.ulElement && this.ulElement.querySelector('li.'
@@ -11100,9 +11564,15 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 return;
             }
             else {
-                element = this.ulElement.querySelector('li.'
-                    + dropDownBaseClasses.li + ':not(.'
-                    + HIDE_LIST + ')');
+                if (this.enableVirtualization) {
+                    element = this.ulElement.querySelector('li.'
+                        + dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)');
+                }
+                else {
+                    element = this.ulElement.querySelector('li.'
+                        + dropDownBaseClasses.li + ':not(.'
+                        + HIDE_LIST + ')');
+                }
             }
             if (element !== null) {
                 this.removeFocus();
@@ -11117,7 +11587,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         else {
             if (this.value && this.value.length) {
-                Search(this.value[this.value.length - 1], this.liCollections, 'StartsWith', this.ignoreCase);
+                const value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[this.value.length - 1]) : this.value[this.value.length - 1];
+                Search(value, this.liCollections, 'StartsWith', this.ignoreCase);
             }
             else {
                 activeElement = null;
@@ -11125,7 +11596,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         if (activeElement && activeElement.item !== null) {
             this.addListFocus(activeElement.item);
-            if (((this.allowCustomValue || this.allowFiltering) && this.isPopupOpen() && this.closePopupOnSelect) || this.closePopupOnSelect) {
+            if (((this.allowCustomValue || this.allowFiltering) && this.isPopupOpen() && this.closePopupOnSelect && !this.enableVirtualization) || this.closePopupOnSelect && !this.enableVirtualization) {
                 this.scrollBottom(activeElement.item, activeElement.index);
             }
         }
@@ -11167,9 +11638,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         const elements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP$1);
         const value = elements[elements.length - 1].getAttribute('data-value');
         if (!isNullOrUndefined(this.value)) {
-            this.tempValues = this.value.slice();
+            this.tempValues = this.allowObjectBinding ? this.value.slice() : this.value.slice();
         }
-        let customValue = this.getFormattedValue(value);
+        let customValue = this.allowObjectBinding ? this.getDataByValue(value) : this.getFormattedValue(value);
         if (this.allowCustomValue && (value !== 'false' && customValue === false || (!isNullOrUndefined(customValue) &&
             customValue.toString() === 'NaN'))) {
             customValue = value;
@@ -11195,15 +11666,43 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         return this.targetInputElement.value;
     }
-    getForQuery(valuecheck) {
+    getForQuery(valuecheck, isCheckbox) {
         let predicate;
         const field = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;
-        for (let i = 0; i < valuecheck.length; i++) {
-            if (i === 0) {
-                predicate = new Predicate(field, 'equal', valuecheck[i]);
+        if (this.enableVirtualization) {
+            if (isCheckbox) {
+                for (let i = 0; i < valuecheck.length; i++) {
+                    const value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', valuecheck[i]) : valuecheck[i];
+                    if (i === 0) {
+                        predicate = new Predicate(field, 'equal', value);
+                    }
+                    else {
+                        predicate = predicate.or(field, 'equal', value);
+                    }
+                }
+                return new Query().where(predicate);
             }
             else {
-                predicate = predicate.or(field, 'equal', valuecheck[i]);
+                for (let i = 0; i < valuecheck.length; i++) {
+                    const value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', valuecheck[i]) : valuecheck[i];
+                    if (i === 0) {
+                        predicate = new Predicate(field, 'notequal', value);
+                    }
+                    else {
+                        predicate = predicate.and(field, 'notequal', value);
+                    }
+                }
+                return new Query().where(predicate);
+            }
+        }
+        else {
+            for (let i = 0; i < valuecheck.length; i++) {
+                if (i === 0) {
+                    predicate = new Predicate(field, 'equal', valuecheck[i]);
+                }
+                else {
+                    predicate = predicate.or(field, 'equal', valuecheck[i]);
+                }
             }
         }
         if (this.dataSource instanceof DataManager && this.dataSource.adaptor instanceof JsonAdaptor) {
@@ -11215,14 +11714,20 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     }
     /* eslint-disable @typescript-eslint/no-unused-vars */
     onActionComplete(ulElement, list, e, isUpdated) {
+        if (this.dataSource instanceof DataManager && !isNullOrUndefined(e) && !this.virtualGroupDataSource) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.totalItemCount = e.count;
+        }
         /* eslint-enable @typescript-eslint/no-unused-vars */
         super.onActionComplete(ulElement, list, e);
+        this.skeletonCount = this.totalItemCount != 0 && this.totalItemCount < (this.itemCount * 2) ? 0 : this.skeletonCount;
         this.updateSelectElementData(this.allowFiltering);
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         const proxy = this;
-        if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
+        if (!isNullOrUndefined(this.value) && !this.allowCustomValue && !this.enableVirtualization) {
             for (let i = 0; i < this.value.length; i++) {
-                const checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', proxy.value[i]);
+                const value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', proxy.value[i]) : proxy.value[i];
+                const checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', value);
                 if (!checkEle && !(this.dataSource instanceof DataManager)) {
                     this.value.splice(i, 1);
                     i -= 1;
@@ -11310,7 +11815,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             dropDownBaseClasses.selected;
         if (!isNullOrUndefined(this.value)) {
             for (let index = 0; !isNullOrUndefined(this.value[index]); index++) {
-                value = this.value[index];
+                value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value[index]) : this.value[index];
                 element = this.findListElement(this.list, 'li', 'data-value', value);
                 if (element) {
                     addClass([element], className);
@@ -11409,13 +11914,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     checkSelectAll() {
         const groupItemLength = this.list.querySelectorAll('li.e-list-group-item.e-active').length;
         const listItem = this.list.querySelectorAll('li.e-list-item');
-        const searchCount = this.list.querySelectorAll('li.' + dropDownBaseClasses.li).length;
+        const searchCount = this.enableVirtualization ? this.list.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-virtual-list)').length : this.list.querySelectorAll('li.' + dropDownBaseClasses.li).length;
         let searchActiveCount = this.list.querySelectorAll('li.' + dropDownBaseClasses.selected).length;
         if (this.enableGroupCheckBox && !isNullOrUndefined(this.fields.groupBy)) {
             searchActiveCount = searchActiveCount - groupItemLength;
         }
-        if ((searchCount === searchActiveCount || searchActiveCount === this.maximumSelectionLength)
-            && (this.mode === 'CheckBox' && this.showSelectAll)) {
+        if ((!this.enableVirtualization && ((searchCount === searchActiveCount || searchActiveCount === this.maximumSelectionLength)
+            && (this.mode === 'CheckBox' && this.showSelectAll))) || (this.enableVirtualization && this.mode === 'CheckBox' && this.showSelectAll && this.virtualSelectAll && this.value && this.value.length === this.totalItemCount)) {
             this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'check' });
         }
         else if ((searchCount !== searchActiveCount) && (this.mode === 'CheckBox' && this.showSelectAll)) {
@@ -11452,7 +11957,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         this.isValidKey = (this.isPopupOpen() && e.keyCode === 8) || this.isValidKey;
         this.isValidKey = e.ctrlKey && e.keyCode === 86 ? false : this.isValidKey;
-        if (this.isValidKey) {
+        if (this.isValidKey && this.inputElement) {
             this.isValidKey = false;
             this.expandTextbox();
             this.showOverAllClear();
@@ -11482,7 +11987,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             return filterQuery;
         }
         if (this.filterAction) {
-            if (this.targetElement() !== null) {
+            if ((this.targetElement() !== null && !this.enableVirtualization) || (this.enableVirtualization && this.targetElement() !== null && this.targetElement().trim() !== '')) {
                 const dataType = this.typeOfData(this.dataSource).typeof;
                 if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
                     filterQuery.where('', this.filterType, this.targetElement(), this.ignoreCase, this.ignoreAccent);
@@ -11492,21 +11997,89 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     filterQuery.where(!isNullOrUndefined(fields.text) ? fields.text : '', this.filterType, this.targetElement(), this.ignoreCase, this.ignoreAccent);
                 }
             }
+            if (this.enableVirtualization && (this.viewPortInfo.endIndex != 0) && !this.virtualSelectAll) {
+                return this.virtualFilterQuery(filterQuery);
+            }
             return filterQuery;
         }
         else {
+            if (this.enableVirtualization && (this.viewPortInfo.endIndex != 0) && !this.virtualSelectAll && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource))) {
+                return this.virtualFilterQuery(filterQuery);
+            }
             return query ? query : this.query ? this.query : new Query();
         }
     }
+    virtualFilterQuery(filterQuery) {
+        var takeValue = this.getTakeValue();
+        var isReOrder = true;
+        var isSkip = true;
+        var isTake = true;
+        for (let queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
+            if (this.getModuleName() === 'multiselect' && ((filterQuery.queries[queryElements].e && filterQuery.queries[queryElements].e.condition == 'or') || (filterQuery.queries[queryElements].e && filterQuery.queries[queryElements].e.operator == 'equal'))) {
+                isReOrder = false;
+            }
+            if (filterQuery.queries[queryElements].fn === 'onSkip') {
+                isSkip = false;
+            }
+            if (filterQuery.queries[queryElements].fn === 'onTake') {
+                isTake = false;
+            }
+        }
+        if ((this.allowFiltering && isSkip) || !isReOrder || (!this.allowFiltering && isSkip)) {
+            if (!isReOrder) {
+                filterQuery.skip(this.viewPortInfo.startIndex);
+            }
+            else {
+                filterQuery.skip(this.virtualItemStartIndex);
+            }
+        }
+        if (isTake) {
+            if (this.isIncrementalRequest) {
+                filterQuery.take(this.incrementalEndIndex);
+            }
+            else {
+                filterQuery.take(takeValue);
+            }
+        }
+        filterQuery.requiresCount();
+        return filterQuery;
+    }
+    getTakeValue() {
+        return this.allowFiltering && Browser.isDevice ? Math.round(window.outerHeight / this.listItemHeight) : this.itemCount;
+    }
     dataUpdater(dataSource, query, fields) {
         this.isDataFetched = false;
+        let isNoData = this.list.classList.contains(dropDownBaseClasses.noData);
         if (this.targetElement().trim() === '') {
-            const list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
+            const list = this.enableVirtualization ? this.list.cloneNode(true) : this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
             if (this.backCommand) {
                 this.remoteCustomValue = false;
                 if (this.allowCustomValue && list.querySelectorAll('li').length == 0 && this.mainData.length > 0) {
                     this.mainData = [];
                 }
+                if (this.enableVirtualization) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    this.totalItemCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
+                    this.resetList(dataSource, fields, query);
+                    if (this.mode !== 'CheckBox') {
+                        this.totalItemCount = this.value && this.value.length ? this.totalItemCount - this.value.length : this.totalItemCount;
+                    }
+                    this.UpdateSkeleton();
+                    if ((isNoData || this.allowCustomValue) && !this.list.classList.contains(dropDownBaseClasses.noData)) {
+                        if (!this.list.querySelector('.e-virtual-ddl-content')) {
+                            this.list.appendChild(this.createElement('div', {
+                                className: 'e-virtual-ddl-content',
+                                styles: this.getTransformValues()
+                            })).appendChild(this.list.querySelector('.e-list-parent'));
+                        }
+                        if (!this.list.querySelector('.e-virtual-ddl')) {
+                            var virualElement = this.createElement('div', {
+                                id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
+                            });
+                            document.getElementsByClassName('e-popup')[0].querySelector('.e-dropdownbase').appendChild(virualElement);
+                        }
+                    }
+                }
                 this.onActionComplete(list, this.mainData);
                 if (this.value && this.value.length) {
                     this.refreshSelection();
@@ -11518,7 +12091,30 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             }
         }
         else {
+            if (this.enableVirtualization && this.allowFiltering) {
+                this.isPreventScrollAction = true;
+                this.list.scrollTop = 0;
+                this.previousStartIndex = 0;
+                this.virtualListInfo = null;
+            }
             this.resetList(dataSource, fields, query);
+            if (this.enableVirtualization && (isNoData || this.allowCustomValue) && !this.list.classList.contains(dropDownBaseClasses.noData)) {
+                if (!this.list.querySelector('.e-virtual-ddl-content')) {
+                    this.list.appendChild(this.createElement('div', {
+                        className: 'e-virtual-ddl-content',
+                        styles: this.getTransformValues()
+                    })).appendChild(this.list.querySelector('.e-list-parent'));
+                }
+                if (this.mode !== 'CheckBox') {
+                    this.totalItemCount = this.value && this.value.length ? this.totalItemCount - this.value.length : this.totalItemCount;
+                }
+                if (!this.list.querySelector('.e-virtual-ddl')) {
+                    var virualElement = this.createElement('div', {
+                        id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
+                    });
+                    document.getElementsByClassName('e-popup')[0].querySelector('.e-dropdownbase').appendChild(virualElement);
+                }
+            }
             if (this.allowCustomValue) {
                 if (!(dataSource instanceof DataManager)) {
                     this.checkForCustomValue(query, fields);
@@ -11529,6 +12125,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 }
             }
         }
+        if (this.enableVirtualization && this.allowFiltering) {
+            this.getFilteringSkeletonCount();
+        }
         this.refreshPopup();
         if (this.mode === 'CheckBox') {
             this.removeFocus();
@@ -11542,7 +12141,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             const customData = (!isNullOrUndefined(this.mainData) && this.mainData.length > 0) ?
                 this.mainData[0] : this.mainData;
             if (customData && typeof (customData) !== 'string' && typeof (customData) !== 'number' && typeof (customData) !== 'boolean') {
-                const dataItem = {};
+                let dataItem = {};
                 setValue(field.text, value, dataItem);
                 if (typeof getValue((this.fields.value ? this.fields.value : 'value'), customData)
                     === 'number') {
@@ -11551,9 +12150,34 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 else {
                     setValue(field.value, value, dataItem);
                 }
-                const tempData = JSON.parse(JSON.stringify(this.listData));
-                tempData.splice(0, 0, dataItem);
-                this.resetList(tempData, field, query);
+                const emptyObject = {};
+                if (this.allowObjectBinding) {
+                    let keys = this.listData && this.listData.length > 0 ? Object.keys(this.listData[0]) : this.firstItem ? Object.keys(this.firstItem) : Object.keys(dataItem);
+                    // Create an empty object with predefined keys
+                    keys.forEach(key => {
+                        emptyObject[key] = ((key === fields.value) || (key === fields.text)) ? getValue(fields.value, dataItem) : null;
+                    });
+                }
+                dataItem = this.allowObjectBinding ? emptyObject : dataItem;
+                if (this.enableVirtualization) {
+                    this.virtualCustomData = dataItem;
+                    let tempData = this.virtualGroupDataSource ? JSON.parse(JSON.stringify(this.virtualGroupDataSource)) : JSON.parse(JSON.stringify(this.dataSource));
+                    let totalData = [];
+                    if (this.virtualCustomSelectData && this.virtualCustomSelectData.length > 0) {
+                        totalData = tempData.concat(this.virtualCustomSelectData);
+                    }
+                    tempData.splice(0, 0, dataItem);
+                    this.isCustomDataUpdated = true;
+                    this.viewPortInfo.startIndex = this.virtualItemStartIndex = 0;
+                    this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.itemCount;
+                    this.resetList(tempData, field, query);
+                    this.isCustomDataUpdated = false;
+                }
+                else {
+                    const tempData = JSON.parse(JSON.stringify(this.listData));
+                    tempData.splice(0, 0, dataItem);
+                    this.resetList(tempData, field, query);
+                }
             }
             else if (this.listData) {
                 const tempData = JSON.parse(JSON.stringify(this.listData));
@@ -11587,6 +12211,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     }
     wrapperClick(e) {
         this.setDynValue = false;
+        this.keyboardEvent = null;
+        this.isKeyBoardAction = false;
         if (!this.enabled) {
             return;
         }
@@ -11786,8 +12412,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (this.initStatus && this.validateValues(newValue, oldValue)) {
             const eventArgs = {
                 e: event,
-                oldValue: oldVal,
-                value: newVal,
+                oldValue: this.allowObjectBinding ? oldVal : oldVal,
+                value: this.allowObjectBinding ? newVal : newVal,
                 isInteracted: event ? true : false,
                 element: this.element,
                 event: event
@@ -11803,13 +12429,14 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 this.dispatchEvent(this.hiddenElement, 'change');
             }
         }
+        this.selectedValueInfo = this.viewPortInfo;
     }
     updateTempValue() {
         if (!this.value) {
             this.tempValues = this.value;
         }
         else {
-            this.tempValues = this.value.slice();
+            this.tempValues = this.allowObjectBinding ? this.value.slice() : this.value.slice();
         }
     }
     updateAriaActiveDescendant() {
@@ -11817,26 +12444,44 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             attributes(this.inputElement, { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-item-focus')[0].id });
         }
     }
-    getPagingCount() {
-        const height = this.list.classList.contains(dropDownBaseClasses.noData) ? null :
-            getComputedStyle(this.getItems()[0], null).getPropertyValue('height');
-        return Math.round(this.list.offsetHeight / parseInt(height, 10));
-    }
-    pageUpSelection(steps) {
+    pageUpSelection(steps, isVirtualKeyAction) {
         const collection = this.list.querySelectorAll('li.'
             + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
-        const previousItem = steps >= 0 ? collection[steps + 1] : collection[0];
-        this.addListFocus(previousItem);
-        this.scrollBottom(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')));
+        let previousItem = steps >= 0 ? collection[steps + 1] : collection[0];
+        if (this.enableVirtualization && isVirtualKeyAction) {
+            previousItem = steps >= 0 && this.viewPortInfo.startIndex != 0 ? this.liCollections[steps + this.skeletonCount + 1] : this.liCollections[this.skeletonCount];
+        }
+        if (!isNullOrUndefined(previousItem) && previousItem.classList.contains('e-virtual-list')) {
+            previousItem = this.liCollections[this.skeletonCount];
+        }
+        if (this.enableVirtualization) {
+            if (!isNullOrUndefined(previousItem) && !previousItem.classList.contains('e-item-focus')) {
+                this.addListFocus(previousItem);
+                this.scrollTop(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')), this.keyboardEvent.keyCode);
+            }
+            else if (this.viewPortInfo.startIndex == 0) {
+                this.scrollTop(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')), this.keyboardEvent.keyCode);
+            }
+        }
+        else {
+            this.addListFocus(previousItem);
+            this.scrollTop(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')), this.keyboardEvent.keyCode);
+        }
     }
-    pageDownSelection(steps) {
+    pageDownSelection(steps, isVirtualKeyAction) {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const list = this.getItems();
         const collection = this.list.querySelectorAll('li.'
             + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
-        const previousItem = steps <= collection.length ? collection[steps - 1] : collection[collection.length - 1];
+        let previousItem = steps <= collection.length ? collection[steps - 1] : collection[collection.length - 1];
+        if (this.enableVirtualization && this.skeletonCount > 0) {
+            previousItem = steps < list.length ? this.liCollections[steps] : this.liCollections[list.length - 1];
+        }
+        if (this.enableVirtualization && isVirtualKeyAction) {
+            previousItem = steps <= list.length ? this.liCollections[steps] : this.liCollections[list.length - 1];
+        }
         this.addListFocus(previousItem);
-        this.scrollBottom(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')));
+        this.scrollBottom(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')), false, this.keyboardEvent.keyCode);
     }
     getItems() {
         if (!this.list) {
@@ -11954,21 +12599,110 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             }
         }
     }
-    homeNavigation(isHome) {
+    homeNavigation(isHome, isVirtualKeyAction) {
         this.removeFocus();
+        if (this.enableVirtualization) {
+            if (isHome) {
+                if (this.enableVirtualization && this.viewPortInfo.startIndex !== 0) {
+                    this.viewPortInfo.startIndex = 0;
+                    this.viewPortInfo.endIndex = this.itemCount;
+                    this.updateVirtualItemIndex();
+                    this.resetList(this.dataSource, this.fields, this.query);
+                }
+            }
+            else {
+                if (this.enableVirtualization && ((!this.value && this.viewPortInfo.endIndex !== this.totalItemCount) || (this.value && this.value.length > 0 && this.viewPortInfo.endIndex !== this.totalItemCount + this.value.length))) {
+                    this.viewPortInfo.startIndex = this.totalItemCount - this.itemCount;
+                    this.viewPortInfo.endIndex = this.totalItemCount;
+                    this.updateVirtualItemIndex();
+                    let query = new Query().clone();
+                    if (this.value && this.value.length > 0) {
+                        query = this.getForQuery(this.value).clone();
+                        query = query.skip(this.totalItemCount - this.itemCount);
+                    }
+                    this.resetList(this.dataSource, this.fields, query);
+                }
+            }
+        }
+        this.UpdateSkeleton();
         const scrollEle = this.ulElement.querySelectorAll('li.' + dropDownBaseClasses.li
             + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
         if (scrollEle.length > 0) {
-            const element = scrollEle[(isHome) ? 0 : (scrollEle.length - 1)];
+            let element = scrollEle[(isHome) ? 0 : (scrollEle.length - 1)];
+            if (this.enableVirtualization && isHome) {
+                element = scrollEle[this.skeletonCount];
+            }
+            this.removeFocus();
             element.classList.add(dropDownBaseClasses.focus);
-            this.scrollBottom(element);
+            if (this.enableVirtualization && isHome) {
+                this.scrollTop(element, undefined, this.keyboardEvent.keyCode);
+            }
+            else if (!isVirtualKeyAction) {
+                this.scrollBottom(element, undefined, false, this.keyboardEvent.keyCode);
+            }
             this.updateAriaActiveDescendant();
         }
     }
+    updateSelectionList() {
+        if (!isNullOrUndefined(this.value) && this.value.length) {
+            for (let index = 0; index < this.value.length; index++) {
+                const value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[index]) : this.value[index];
+                let selectedItem = this.getElementByValue(value);
+                if (selectedItem && !selectedItem.classList.contains(dropDownBaseClasses.selected)) {
+                    selectedItem.classList.add('e-active');
+                }
+            }
+        }
+    }
+    handleVirtualKeyboardActions(e, pageCount) {
+        const focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
+        let activeIndex;
+        this.isKeyBoardAction = true;
+        switch (e.keyCode) {
+            case 40:
+                this.arrowDown(e, true);
+                break;
+            case 38:
+                this.arrowUp(e, true);
+                break;
+            case 33:
+                e.preventDefault();
+                if (focusedItem) {
+                    var count = (this.getPageCount() * 2) - 4;
+                    activeIndex = Math.round(count);
+                    activeIndex = this.getIndexByValue(focusedItem.getAttribute('data-value'));
+                    this.pageUpSelection(activeIndex - this.getPageCount(), true);
+                    this.updateAriaAttribute();
+                }
+                break;
+            case 34:
+                e.preventDefault();
+                if (focusedItem) {
+                    activeIndex = this.getIndexByValue(focusedItem.getAttribute('data-value'));
+                    this.pageDownSelection(activeIndex + this.getPageCount() + 1, true);
+                    this.updateAriaAttribute();
+                }
+                break;
+            case 35:
+            case 36:
+                this.isMouseScrollAction = true;
+                this.homeNavigation((e.keyCode === 36) ? true : false, true);
+                this.isPreventScrollAction = true;
+                break;
+        }
+        this.keyboardEvent = null;
+        this.isScrollChanged = true;
+        this.isKeyBoardAction = false;
+    }
     onKeyDown(e) {
         if (this.readonly || !this.enabled && this.mode !== 'CheckBox') {
             return;
         }
+        this.preventSetCurrentData = false;
+        this.keyboardEvent = e;
+        if (this.isPreventKeyAction && this.enableVirtualization) {
+            e.preventDefault();
+        }
         this.keyCode = e.keyCode;
         this.keyDownStatus = true;
         if (e.keyCode > 111 && e.keyCode < 124) {
@@ -11981,16 +12715,18 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         else if (this.isPopupOpen()) {
             const focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
             let activeIndex;
+            this.isKeyBoardAction = true;
             switch (e.keyCode) {
                 case 36:
                 case 35:
+                    this.isMouseScrollAction = true;
                     this.homeNavigation((e.keyCode === 36) ? true : false);
                     break;
                 case 33:
                     e.preventDefault();
                     if (focusedItem) {
-                        this.getIndexByValue(focusedItem.getAttribute('data-value'));
-                        this.pageUpSelection(activeIndex - this.getPagingCount());
+                        activeIndex = this.getIndexByValue(focusedItem.getAttribute('data-value'));
+                        this.pageUpSelection(activeIndex - this.getPageCount() - 1);
                         this.updateAriaAttribute();
                     }
                     return;
@@ -11998,7 +12734,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     e.preventDefault();
                     if (focusedItem) {
                         this.getIndexByValue(focusedItem.getAttribute('data-value'));
-                        this.pageDownSelection(activeIndex + this.getPagingCount());
+                        this.pageDownSelection(activeIndex + this.getPageCount());
                         this.updateAriaAttribute();
                     }
                     return;
@@ -12064,10 +12800,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (!(this.mode === 'CheckBox' && this.showSelectAll)) {
             this.refreshPopup();
         }
+        this.isKeyBoardAction = false;
     }
-    arrowDown(e) {
+    arrowDown(e, isVirtualKeyAction) {
         e.preventDefault();
-        this.moveByList(1);
+        this.moveByList(1, isVirtualKeyAction);
         this.keyAction = true;
         if (document.activeElement.classList.contains(FILTERINPUT)
             || (this.mode === 'CheckBox' && !this.allowFiltering && document.activeElement !== this.list)) {
@@ -12075,7 +12812,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         this.updateAriaAttribute();
     }
-    arrowUp(e) {
+    arrowUp(e, isVirtualKeyAction) {
         e.preventDefault();
         this.keyAction = true;
         let list = this.list.querySelectorAll('li.'
@@ -12093,7 +12830,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.keyAction = false;
             this.notify('inputFocus', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'focus' });
         }
-        this.moveByList(-1);
+        this.moveByList(-1, isVirtualKeyAction);
         this.updateAriaAttribute();
     }
     spaceKeySelection(e) {
@@ -12144,8 +12881,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         else if (e.keyCode === 8 && this.mode === 'Delimiter') {
             if (this.value && this.value.length) {
                 e.preventDefault();
-                const temp = this.value[this.value.length - 1];
-                this.removeValue(temp, e);
+                const temp = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[this.value.length - 1]) : this.value[this.value.length - 1];
+                this.removeValue(this.value[this.value.length - 1], e);
                 this.updateDelimeter(this.delimiterChar, e);
                 this.focusAtLastListItem(temp);
             }
@@ -12159,7 +12896,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
     }
     escapeAction() {
-        const temp = this.tempValues ? this.tempValues.slice() : [];
+        let temp = this.tempValues ? this.tempValues.slice() : [];
+        if (this.allowObjectBinding) {
+            temp = this.tempValues ? this.tempValues.slice() : [];
+        }
         if (this.value && this.validateValues(this.value, temp)) {
             if (this.mode !== 'CheckBox') {
                 this.value = temp;
@@ -12181,36 +12921,100 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         this.makeTextBoxEmpty();
     }
-    scrollBottom(selectedLI, activeIndex) {
+    scrollBottom(selectedLI, activeIndex, isInitialSelection = false, keyCode = null) {
+        if ((!isNullOrUndefined(selectedLI) && selectedLI.classList.contains('e-virtual-list')) || (this.enableVirtualization && isNullOrUndefined(selectedLI))) {
+            selectedLI = this.liCollections[this.skeletonCount];
+        }
+        this.isUpwardScrolling = false;
+        let virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
+        let lastElementValue = this.list.querySelector('li:last-of-type') ? this.list.querySelector('li:last-of-type').getAttribute('data-value') : null;
+        let selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? selectedLI.offsetTop + (this.virtualListInfo.startIndex * selectedLI.offsetHeight) : selectedLI.offsetTop;
         const currentOffset = this.list.offsetHeight;
-        const nextBottom = selectedLI.offsetTop + selectedLI.offsetHeight - this.list.scrollTop;
-        const nextOffset = this.list.scrollTop + nextBottom - currentOffset;
-        let boxRange = (selectedLI.offsetTop + selectedLI.offsetHeight - this.list.scrollTop);
+        let nextBottom = selectedLiOffsetTop - (virtualListCount * selectedLI.offsetHeight) + selectedLI.offsetHeight - this.list.scrollTop;
+        let nextOffset = this.list.scrollTop + nextBottom - currentOffset;
+        let isScrollerCHanged = false;
+        let boxRange = selectedLiOffsetTop - (virtualListCount * selectedLI.offsetHeight) + selectedLI.offsetHeight - this.list.scrollTop;
         boxRange = this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?
             boxRange - this.fixedHeaderElement.offsetHeight : boxRange;
-        if (activeIndex === 0) {
+        if (activeIndex === 0 && !this.enableVirtualization) {
             this.list.scrollTop = 0;
         }
-        else if (nextBottom > currentOffset) {
-            this.list.scrollTop = nextOffset;
-        }
-        else if (!(boxRange > 0 && this.list.offsetHeight > boxRange)) {
-            this.list.scrollTop = nextOffset;
+        else if (nextBottom > currentOffset || !(boxRange > 0 && this.list.offsetHeight > boxRange)) {
+            let currentElementValue = selectedLI ? selectedLI.getAttribute('data-value') : null;
+            var liCount = keyCode == 34 ? this.getPageCount() - 1 : 1;
+            if (!this.enableVirtualization || this.isKeyBoardAction || isInitialSelection) {
+                if (this.isKeyBoardAction && this.enableVirtualization && lastElementValue && currentElementValue === lastElementValue && keyCode != 35 && !this.isVirtualScrolling) {
+                    this.isPreventKeyAction = true;
+                    this.list.scrollTop += selectedLI.offsetHeight * liCount;
+                    this.isPreventKeyAction = this.IsScrollerAtEnd() ? false : this.isPreventKeyAction;
+                    this.isKeyBoardAction = false;
+                    this.isPreventScrollAction = false;
+                }
+                else if (this.enableVirtualization && keyCode == 35) {
+                    this.isPreventKeyAction = false;
+                    this.isKeyBoardAction = false;
+                    this.isPreventScrollAction = false;
+                    this.list.scrollTop = this.list.scrollHeight;
+                }
+                else {
+                    if (keyCode == 34 && this.enableVirtualization && !this.isVirtualScrolling) {
+                        this.isPreventKeyAction = false;
+                        this.isKeyBoardAction = false;
+                        this.isPreventScrollAction = false;
+                        nextOffset = nextOffset + (selectedLI.offsetHeight * liCount);
+                    }
+                    this.list.scrollTop = nextOffset;
+                }
+            }
+            else {
+                this.list.scrollTop = this.virtualListInfo && this.virtualListInfo.startIndex ? this.virtualListInfo.startIndex * this.listItemHeight : 0;
+            }
+            isScrollerCHanged = this.isKeyBoardAction;
+            
         }
+        this.isKeyBoardAction = isScrollerCHanged;
     }
-    scrollTop(selectedLI, activeIndex) {
-        let nextOffset = selectedLI.offsetTop - this.list.scrollTop;
+    scrollTop(selectedLI, activeIndex, keyCode = null) {
+        let virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
+        let selectedLiOffsetTop = (this.virtualListInfo && this.virtualListInfo.startIndex) ? selectedLI.offsetTop + (this.virtualListInfo.startIndex * selectedLI.offsetHeight) : selectedLI.offsetTop;
+        let nextOffset = selectedLiOffsetTop - (virtualListCount * selectedLI.offsetHeight) - this.list.scrollTop;
+        let firstElementValue = this.list.querySelector('li.e-list-item:not(.e-virtual-list)') ? this.list.querySelector('li.e-list-item:not(.e-virtual-list)').getAttribute('data-value') : null;
         nextOffset = this.fields.groupBy && !isUndefined(this.fixedHeaderElement) ?
             nextOffset - this.fixedHeaderElement.offsetHeight : nextOffset;
-        const boxRange = (selectedLI.offsetTop + selectedLI.offsetHeight - this.list.scrollTop);
-        if (activeIndex === 0) {
+        let boxRange = (selectedLiOffsetTop - (virtualListCount * selectedLI.offsetHeight) + selectedLI.offsetHeight - this.list.scrollTop);
+        let isPageUpKeyAction = this.enableVirtualization && this.getModuleName() === 'autocomplete' && nextOffset <= 0;
+        if (activeIndex === 0 && !this.enableVirtualization) {
             this.list.scrollTop = 0;
         }
-        else if (nextOffset < 0) {
-            this.list.scrollTop = this.list.scrollTop + nextOffset;
+        else if (nextOffset < 0 || isPageUpKeyAction) {
+            var currentElementValue = selectedLI ? selectedLI.getAttribute('data-value') : null;
+            var liCount = keyCode == 33 ? this.getPageCount() - 2 : 1;
+            if (this.enableVirtualization && this.isKeyBoardAction && firstElementValue && currentElementValue === firstElementValue && keyCode != 36 && !this.isVirtualScrolling) {
+                this.isUpwardScrolling = true;
+                this.isPreventKeyAction = true;
+                this.list.scrollTop -= selectedLI.offsetHeight * liCount;
+                this.isPreventKeyAction = this.list.scrollTop != 0 ? this.isPreventKeyAction : false;
+                this.isKeyBoardAction = false;
+                this.isPreventScrollAction = false;
+            }
+            else if (this.enableVirtualization && keyCode == 36) {
+                this.isPreventScrollAction = false;
+                this.isPreventKeyAction = true;
+                this.isKeyBoardAction = false;
+                this.list.scrollTo(0, 0);
+            }
+            else {
+                if (keyCode == 33 && this.enableVirtualization && !this.isVirtualScrolling) {
+                    this.isPreventKeyAction = false;
+                    this.isKeyBoardAction = false;
+                    this.isPreventScrollAction = false;
+                    nextOffset = nextOffset - (selectedLI.offsetHeight * liCount);
+                }
+                this.list.scrollTop = this.list.scrollTop + nextOffset;
+            }
         }
         else if (!(boxRange > 0 && this.list.offsetHeight > boxRange)) {
-            this.list.scrollTop = selectedLI.offsetTop - (this.fields.groupBy && !isUndefined(this.fixedHeaderElement) ?
+            this.list.scrollTop = selectedLI.offsetTop - (this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?
                 this.fixedHeaderElement.offsetHeight : 0);
         }
     }
@@ -12297,7 +13101,19 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if ((this.allowFiltering || (this.mode === 'CheckBox' && this.enableSelectionOrder === true)
             || this.allowCustomValue) && this.mainList && this.listData) {
             const list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
-            this.onActionComplete(list, this.mainData);
+            if (this.enableVirtualization) {
+                if (this.allowCustomValue && this.virtualCustomData && data == null && this.virtualCustomData && this.viewPortInfo && this.viewPortInfo.startIndex === 0 && this.viewPortInfo.endIndex === this.itemCount) {
+                    this.virtualCustomData = null;
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    this.renderItems(this.mainData, this.fields);
+                }
+                else {
+                    this.onActionComplete(this.list, this.listData);
+                }
+            }
+            else {
+                this.onActionComplete(list, this.mainData);
+            }
             this.focusAtLastListItem(data);
             if (this.value && this.value.length) {
                 this.refreshSelection();
@@ -12312,14 +13128,15 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         let temp;
         if (selectedElem !== null) {
             if (!isNullOrUndefined(this.value)) {
-                this.tempValues = this.value.slice();
+                this.tempValues = this.allowObjectBinding ? this.value.slice() : this.value.slice();
             }
             temp = selectedElem.nextElementSibling;
             if (temp !== null) {
                 this.removeChipSelection();
                 this.addChipSelection(temp, e);
             }
-            this.removeValue(selectedElem.getAttribute('data-value'), e);
+            const currentChip = this.allowObjectBinding ? this.getDataByValue(selectedElem.getAttribute('data-value')) : selectedElem.getAttribute('data-value');
+            this.removeValue(currentChip, e);
             this.makeTextBoxEmpty();
         }
         if (this.closePopupOnSelect) {
@@ -12346,7 +13163,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             selectAllParent.classList.remove('e-item-focus');
         }
     }
-    moveByList(position) {
+    moveByList(position, isVirtualKeyAction) {
         if (this.list) {
             let elements = this.list.querySelectorAll('li.'
                 + dropDownBaseClasses.li
@@ -12356,7 +13173,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     + dropDownBaseClasses.li + ',li.' + dropDownBaseClasses.group
                     + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
             }
-            const selectedElem = this.list.querySelector('li.' + dropDownBaseClasses.focus);
+            let selectedElem = this.list.querySelector('li.' + dropDownBaseClasses.focus);
+            if (this.enableVirtualization && isVirtualKeyAction && !isNullOrUndefined(this.currentFocuedListElement)) {
+                selectedElem = this.getElementByValue(this.getFormattedValue(this.currentFocuedListElement.getAttribute('data-value')));
+            }
             let temp = -1;
             const selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
             if (this.mode === 'CheckBox' && this.showSelectAll && position == 1 && !isNullOrUndefined(selectAllParent) && !selectAllParent.classList.contains('e-item-focus') && this.list.getElementsByClassName('e-item-focus').length == 0 && this.liCollections.length > 1) {
@@ -12385,22 +13205,56 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 if (position > 0) {
                     if (temp < (elements.length - 1)) {
                         this.removeFocus();
-                        this.addListFocus(elements[++temp]);
-                        this.updateCheck(elements[temp]);
-                        this.scrollBottom(elements[temp], temp);
+                        if (this.enableVirtualization && isVirtualKeyAction) {
+                            this.addListFocus(elements[temp]);
+                        }
+                        else {
+                            this.addListFocus(elements[++temp]);
+                        }
+                        if (temp > -1) {
+                            this.updateCheck(elements[temp]);
+                            this.scrollBottom(elements[temp], temp);
+                            this.currentFocuedListElement = elements[temp];
+                        }
                     }
                 }
                 else {
                     if (temp > 0) {
-                        this.removeFocus();
-                        this.addListFocus(elements[--temp]);
-                        this.updateCheck(elements[temp]);
-                        this.scrollTop(elements[temp], temp);
+                        if (this.enableVirtualization) {
+                            let isVirtualElement = elements[temp - 1].classList.contains('e-virtual-list');
+                            const elementIndex = isVirtualKeyAction ? temp : temp - 1;
+                            if (isVirtualKeyAction || !isVirtualElement) {
+                                this.removeFocus();
+                            }
+                            if (isVirtualKeyAction || !isVirtualElement) {
+                                this.addListFocus(elements[elementIndex]);
+                                this.updateCheck(elements[elementIndex]);
+                                this.scrollTop(elements[elementIndex], temp);
+                                this.currentFocuedListElement = elements[elementIndex];
+                            }
+                        }
+                        else {
+                            this.removeFocus();
+                            this.addListFocus(elements[--temp]);
+                            this.updateCheck(elements[temp]);
+                            this.scrollTop(elements[temp], temp);
+                        }
                     }
                 }
             }
         }
     }
+    getElementByValue(value) {
+        let item;
+        const listItems = this.getItems();
+        for (const liItem of listItems) {
+            if (this.getFormattedValue(liItem.getAttribute('data-value')) === value) {
+                item = liItem;
+                break;
+            }
+        }
+        return item;
+    }
     updateCheck(element) {
         if (this.mode === 'CheckBox' && this.enableGroupCheckBox &&
             !isNullOrUndefined(this.fields.groupBy)) {
@@ -12462,7 +13316,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (this.enabled && !this.readonly) {
             const element = e.target.parentElement;
             const customVal = element.getAttribute('data-value');
-            let value = this.getFormattedValue(customVal);
+            let value = this.allowObjectBinding ? this.getDataByValue(customVal) : this.getFormattedValue(customVal);
             if (this.allowCustomValue && ((customVal !== 'false' && value === false) ||
                 (!isNullOrUndefined(value) && value.toString() === 'NaN'))) {
                 value = customVal;
@@ -12474,6 +13328,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 this.inputElement.focus();
             }
             this.removeValue(value, e);
+            value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', value) : value;
             if (isNullOrUndefined(this.findListElement(this.list, 'li', 'data-value', value)) && this.mainList && this.listData) {
                 const list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
                 this.onActionComplete(list, this.mainData);
@@ -12508,7 +13363,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.expandTextbox();
     }
     removeAllItems(value, eve, isClearAll, element, mainElement) {
-        let index = this.value.indexOf(value);
+        let index = this.allowObjectBinding ? this.indexOfObjectInArray(value, this.value) : this.value.indexOf(value);
         const removeVal = this.value.slice(0);
         removeVal.splice(index, 1);
         this.setProperties({ value: [].concat([], removeVal) }, true);
@@ -12523,7 +13378,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             e: this, index: index
         });
         this.invokeCheckboxSelection(element, eve, isClearAll);
-        this.updateMainList(true, value, mainElement);
+        const currentValue = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
+        this.updateMainList(true, currentValue, mainElement);
         this.updateChipStatus();
     }
     invokeCheckboxSelection(element, eve, isClearAll) {
@@ -12539,9 +13395,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
     }
     removeValue(value, eve, length, isClearAll) {
-        let index = this.value.indexOf(this.getFormattedValue(value));
+        let index = this.allowObjectBinding ? this.indexOfObjectInArray(value, this.value) : this.value.indexOf(this.getFormattedValue(value));
         if (index === -1 && this.allowCustomValue && !isNullOrUndefined(value)) {
-            index = this.value.indexOf(value.toString());
+            index = this.allowObjectBinding ? this.indexOfObjectInArray(value, this.value) : this.value.indexOf(value.toString());
         }
         const targetEle = eve && eve.target;
         isClearAll = (isClearAll || targetEle && targetEle.classList.contains('e-close-hooker')) ? true : null;
@@ -12549,7 +13405,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             HIDE_LIST :
             dropDownBaseClasses.selected;
         if (index !== -1) {
-            const element = this.findListElement(this.list, 'li', 'data-value', value);
+            const currentValue = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
+            const element = this.findListElement(this.list, 'li', 'data-value', currentValue);
             const val = this.getDataByValue(value);
             const eventArgs = {
                 e: eve,
@@ -12563,11 +13420,20 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     this.removeIndex++;
                 }
                 else {
-                    const removeVal = this.value.slice(0);
+                    this.virtualSelectAll = false;
+                    let removeVal = this.value.slice(0);
+                    if (this.enableVirtualization && isClearAll) {
+                        removeVal = [];
+                    }
                     removeVal.splice(index, 1);
                     this.setProperties({ value: [].concat([], removeVal) }, true);
+                    if (this.enableVirtualization) {
+                        let currentText = index == 0 ? this.text.replace(this.text.split(this.delimiterChar)[index] + this.delimiterChar, '') : this.text.replace(this.delimiterChar + this.text.split(this.delimiterChar)[index], '');
+                        this.setProperties({ text: currentText.toString() }, true);
+                    }
                     if (element !== null) {
-                        const hideElement = this.findListElement(this.mainList, 'li', 'data-value', value);
+                        const currentValue = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
+                        const hideElement = this.findListElement(this.mainList, 'li', 'data-value', currentValue);
                         element.setAttribute('aria-selected', 'false');
                         removeClass([element], className);
                         if (hideElement) {
@@ -12581,15 +13447,16 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         });
                         this.invokeCheckboxSelection(element, eve, isClearAll);
                     }
+                    const currentValue = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
                     if (this.hideSelectedItem && this.fields.groupBy && element) {
-                        this.hideGroupItem(value);
+                        this.hideGroupItem(currentValue);
                     }
                     if (this.hideSelectedItem && this.fixedHeaderElement && this.fields.groupBy && this.mode !== 'CheckBox' &&
                         this.isPopupOpen()) {
                         super.scrollStop();
                     }
-                    this.updateMainList(true, value);
-                    this.removeChip(value);
+                    this.updateMainList(true, currentValue);
+                    this.removeChip(currentValue, isClearAll);
                     this.updateChipStatus();
                     const limit = this.value && this.value.length ? this.value.length : 0;
                     if (limit < this.maximumSelectionLength) {
@@ -12625,6 +13492,14 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     if (isClearAll && (length === 1 || length === null)) {
                         this.clearAllCallback(eve, isClearAll);
                     }
+                    if (this.isPopupOpen() && element && element.parentElement.classList.contains('e-reorder')) {
+                        if (this.hideSelectedItem && this.value && Array.isArray(this.value) && this.value.length > 0) {
+                            this.totalItemsCount();
+                        }
+                        this.notify("setCurrentViewDataAsync", {
+                            module: "VirtualScroll",
+                        });
+                    }
                 }
             });
         }
@@ -12655,11 +13530,16 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             }
         }
     }
-    removeChip(value) {
+    removeChip(value, isClearAll) {
         if (this.chipCollectionWrapper) {
-            const element = this.findListElement(this.chipCollectionWrapper, 'span', 'data-value', value);
-            if (element) {
-                remove(element);
+            if (this.enableVirtualization && isClearAll) {
+                let childElements = this.chipCollectionWrapper.querySelectorAll('.e-chips');
+            }
+            else {
+                const element = this.findListElement(this.chipCollectionWrapper, 'span', 'data-value', value);
+                if (element) {
+                    remove(element);
+                }
             }
         }
     }
@@ -12693,12 +13573,40 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.hideOverAllClear();
         }
     }
+    indexOfObjectInArray(objectToFind, array) {
+        for (let i = 0; i < array.length; i++) {
+            const item = array[i];
+            if (Object.keys(objectToFind).every(key => item.hasOwnProperty(key) && item[key] === objectToFind[key])) {
+                return i; // Return the index if the object is found
+            }
+        }
+        return -1; // Return -1 if the object is not found
+    }
     addValue(value, text, eve) {
         if (!this.value) {
             this.value = [];
         }
-        if (this.value.indexOf(value) < 0) {
-            this.setProperties({ value: [].concat([], this.value, [value]) }, true);
+        let currentValue = this.allowObjectBinding ? this.getDataByValue(value) : value;
+        if ((this.allowObjectBinding && !this.isObjectInArray(value, this.value)) || (!this.allowObjectBinding && this.value.indexOf(currentValue) < 0)) {
+            this.setProperties({ value: [].concat([], this.value, [currentValue]) }, true);
+            if (this.enableVirtualization) {
+                let data = this.viewWrapper.innerHTML;
+                let temp;
+                data += (this.value.length === 1) ? '' : this.delimiterChar + ' ';
+                temp = this.getOverflowVal(this.value.length - 1);
+                data += temp;
+                temp = this.viewWrapper.innerHTML;
+                this.updateWrapperText(this.viewWrapper, data);
+            }
+            if (this.enableVirtualization && this.mode === 'CheckBox') {
+                let temp;
+                let currentText = [];
+                const value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[this.value.length - 1]) : this.value[this.value.length - 1];
+                temp = this.getTextByValue(value);
+                var textValues = this.text != null ? this.text + ',' + temp : temp;
+                currentText.push(textValues);
+                this.setProperties({ text: currentText.toString() }, true);
+            }
         }
         const element = this.findListElement(this.list, 'li', 'data-value', value);
         this.removeFocus();
@@ -12726,6 +13634,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     dispatchSelect(value, eve, element, isNotTrigger, length) {
         const list = this.listData;
         if (this.initStatus && !isNotTrigger) {
+            value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
             const val = this.getDataByValue(value);
             const eventArgs = {
                 e: eve,
@@ -12754,7 +13663,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     if (this.allowCustomValue && this.isServerRendered && this.listData !== list) {
                         this.listData = list;
                     }
-                    this.updateListSelectEventCallback(value, element, eve);
+                    value = this.allowObjectBinding ? this.getDataByValue(value) : value;
+                    if ((this.enableVirtualization && value) || !this.enableVirtualization) {
+                        this.updateListSelectEventCallback(value, element, eve);
+                    }
                     if (this.hideSelectedItem && this.fixedHeaderElement && this.fields.groupBy && this.mode !== 'CheckBox') {
                         super.scrollStop();
                     }
@@ -12838,7 +13750,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             chipContent.innerText = data;
         }
         else {
-            chipContent.innerHTML = this.encodeHtmlEntities(data);
+            chipContent.innerHTML = this.encodeHtmlEntities(data.toString());
         }
         chip.appendChild(chipContent);
         const eventArgs = {
@@ -12923,6 +13835,37 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     overAllHeight -= this.header.offsetHeight;
                 }
                 append([this.list], this.popupWrapper);
+                if (!this.list.classList.contains(dropDownBaseClasses.noData) && this.getItems()[1]) {
+                    this.listItemHeight = this.getItems()[1].offsetHeight;
+                }
+                if (this.enableVirtualization && !this.list.classList.contains(dropDownBaseClasses.noData)) {
+                    if (!this.list.querySelector('.e-virtual-ddl-content') && this.list.querySelector('.e-list-parent')) {
+                        this.list.appendChild(this.createElement('div', {
+                            className: 'e-virtual-ddl-content',
+                            styles: this.getTransformValues()
+                        })).appendChild(this.list.querySelector('.e-list-parent'));
+                    }
+                    else if (this.list.querySelector('.e-virtual-ddl-content')) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+                    }
+                    this.UpdateSkeleton();
+                    this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+                    this.virtualItemCount = this.itemCount;
+                    if (this.mode !== 'CheckBox') {
+                        this.totalItemCount = this.value && this.value.length ? this.totalItemCount - this.value.length : this.totalItemCount;
+                    }
+                    if (!this.list.querySelector('.e-virtual-ddl')) {
+                        var virualElement = this.createElement('div', {
+                            id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
+                        });
+                        this.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);
+                    }
+                    else {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
+                    }
+                }
                 if (this.footerTemplate) {
                     this.setFooterTemplate();
                     overAllHeight -= this.footer.offsetHeight;
@@ -12995,21 +13938,41 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         }
                         this.popupObj.wireScrollEvents();
                         if (!(this.mode !== 'CheckBox' && (this.allowFiltering || this.allowCustomValue) &&
-                            this.targetElement().trim() !== '')) {
+                            this.targetElement().trim() !== '') && !this.enableVirtualization) {
                             this.loadTemplate();
+                            if (this.enableVirtualization && this.mode === 'CheckBox') {
+                                this.UpdateSkeleton();
+                            }
                         }
+                        this.isPreventScrollAction = true;
                         this.setScrollPosition();
                         if (this.allowFiltering) {
                             this.notify('inputFocus', {
                                 module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'focus'
                             });
                         }
+                        if (this.enableVirtualization) {
+                            this.notify("bindScrollEvent", {
+                                module: "VirtualScroll",
+                                component: this.getModuleName(),
+                                enable: this.enableVirtualization,
+                            });
+                            setTimeout(() => {
+                                if (this.value) {
+                                    this.updateSelectionList();
+                                }
+                                else if (this.viewPortInfo && this.viewPortInfo.offsets.top) {
+                                    this.list.scrollTop = this.viewPortInfo.offsets.top;
+                                }
+                            }, 5);
+                        }
                     }, targetExitViewport: () => {
                         if (!Browser.isDevice) {
                             this.hidePopup();
                         }
                     }
                 });
+                this.popupContentElement = this.popupObj.element.querySelector('.e-content');
                 if (this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering) {
                     this.notify('deviceSearchBox', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
                 }
@@ -13067,6 +14030,53 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         append([this.footer], this.popupWrapper);
         EventHandler.add(this.footer, 'mousedown', this.onListMouseDown, this);
     }
+    updateInitialData() {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let currentData = this.selectData;
+        let ulElement = this.renderItems(currentData, this.fields);
+        this.list.scrollTop = 0;
+        this.virtualListInfo = {
+            currentPageNumber: null,
+            direction: null,
+            sentinelInfo: {},
+            offsets: {},
+            startIndex: 0,
+            endIndex: 0,
+        };
+        this.previousStartIndex = 0;
+        this.previousEndIndex = 0;
+        if (this.dataSource instanceof DataManager) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.totalItemCount = this.dataCount = this.virtualGroupDataSource && this.virtualGroupDataSource.length ? this.virtualGroupDataSource.length : 0;
+        }
+        else {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.totalItemCount = this.dataCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
+        }
+        if (this.mode !== 'CheckBox') {
+            this.totalItemCount = this.value && this.value.length ? this.totalItemCount - this.value.length : this.totalItemCount;
+        }
+        this.getSkeletonCount();
+        this.UpdateSkeleton();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (this.list.getElementsByClassName('e-virtual-ddl')[0]) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
+        }
+        else if (!this.list.querySelector('.e-virtual-ddl') && this.skeletonCount > 0) {
+            var virualElement = this.createElement('div', {
+                id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
+            });
+            this.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);
+        }
+        this.listData = currentData;
+        this.liCollections = this.list.querySelectorAll('.e-list-item');
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (this.list.getElementsByClassName('e-virtual-ddl-content')[0]) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+        }
+    }
     clearAll(e) {
         if (this.enabled && !this.readonly) {
             let temp;
@@ -13087,6 +14097,24 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             else {
                 this.clearAllCallback(e);
             }
+            this.checkAndResetCache();
+            if (this.enableVirtualization) {
+                this.updateInitialData();
+                if (this.chipCollectionWrapper) {
+                    this.chipCollectionWrapper.innerHTML = '';
+                }
+                if (!this.isCustomDataUpdated) {
+                    this.notify("setGeneratedData", {
+                        module: "VirtualScroll",
+                    });
+                }
+            }
+            if (this.enableVirtualization) {
+                this.list.scrollTop = 0;
+                this.virtualListInfo = null;
+                this.previousStartIndex = 0;
+                this.previousEndIndex = 0;
+            }
         }
     }
     clearAllCallback(e, isClearAll) {
@@ -13185,6 +14213,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     }
     search(e) {
         this.resetFilteredData = true;
+        this.preventSetCurrentData = false;
+        this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;
         if (!isNullOrUndefined(e)) {
             this.keyCode = e.keyCode;
         }
@@ -13201,6 +14231,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 if (this.allowCustomValue) {
                     this.isRemoteSelection = true;
                 }
+                if (!this.backCommand) {
+                    this.checkAndResetCache();
+                }
                 const eventArgs = {
                     preventDefaultAction: false,
                     text: this.targetElement(),
@@ -13227,12 +14260,83 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             else if (this.allowCustomValue) {
                 let query = new Query();
                 query = this.allowFiltering && (text !== '') ? query.where(this.fields.text, 'startswith', text, this.ignoreCase, this.ignoreAccent) : query;
-                this.dataUpdater(this.mainData, query, this.fields);
+                if (this.enableVirtualization) {
+                    if (this.dataSource instanceof DataManager) {
+                        this.dataUpdater(this.virtualGroupDataSource, query, this.fields);
+                    }
+                    else {
+                        this.dataUpdater(this.dataSource, query, this.fields);
+                    }
+                }
+                else {
+                    this.dataUpdater(this.mainData, query, this.fields);
+                }
+                this.UpdateSkeleton();
             }
             else {
                 const liCollections = this.list.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-hide-listitem)');
-                const activeElement = Search(this.targetElement(), liCollections, 'StartsWith', this.ignoreCase);
-                if (activeElement && activeElement.item !== null) {
+                const type = this.typeOfData(this.listData).typeof;
+                let activeElement = Search(this.targetElement(), liCollections, 'StartsWith', this.ignoreCase);
+                if (this.enableVirtualization && this.targetElement().trim() !== '' && !this.allowFiltering) {
+                    var updatingincrementalindex = false;
+                    if ((this.viewPortInfo.endIndex >= this.incrementalEndIndex && this.incrementalEndIndex <= this.totalItemCount) || this.incrementalEndIndex == 0) {
+                        updatingincrementalindex = true;
+                        this.incrementalStartIndex = 0;
+                        this.incrementalEndIndex = 100 > this.totalItemCount ? this.totalItemCount : 100;
+                        this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);
+                        updatingincrementalindex = false;
+                    }
+                    if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {
+                        this.updateIncrementalView(0, this.itemCount);
+                    }
+                    activeElement = Search(this.targetElement(), this.incrementalLiCollections, this.filterType, true, this.listData, this.fields, type);
+                    while (isNullOrUndefined(activeElement) && this.incrementalEndIndex < this.totalItemCount) {
+                        this.incrementalStartIndex = this.incrementalEndIndex;
+                        this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount : this.incrementalEndIndex + 100;
+                        this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);
+                        updatingincrementalindex = true;
+                        if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {
+                            this.updateIncrementalView(0, this.itemCount);
+                        }
+                        activeElement = Search(this.targetElement(), this.incrementalLiCollections, this.filterType, true, this.listData, this.fields, type);
+                        if (!isNullOrUndefined(activeElement)) {
+                            break;
+                        }
+                        if (isNullOrUndefined(activeElement) && this.incrementalEndIndex >= this.totalItemCount) {
+                            this.incrementalStartIndex = 0;
+                            this.incrementalEndIndex = 100 > this.totalItemCount ? this.totalItemCount : 100;
+                            break;
+                        }
+                    }
+                    if (activeElement.index) {
+                        if ((!(this.viewPortInfo.startIndex >= activeElement.index)) || (!(activeElement.index >= this.viewPortInfo.endIndex))) {
+                            var startIndex = activeElement.index - ((this.itemCount / 2) - 2) > 0 ? activeElement.index - ((this.itemCount / 2) - 2) : 0;
+                            var endIndex = startIndex + this.itemCount > this.totalItemCount ? this.totalItemCount : startIndex + this.itemCount;
+                            if (startIndex != this.viewPortInfo.startIndex) {
+                                this.updateIncrementalView(startIndex, endIndex);
+                            }
+                        }
+                    }
+                    if (!isNullOrUndefined(activeElement.item)) {
+                        var index_1 = this.getIndexByValue(activeElement.item.getAttribute('data-value')) - this.skeletonCount;
+                        if (index_1 > this.itemCount / 2) {
+                            var startIndex = this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) < this.totalItemCount ? this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) : this.totalItemCount;
+                            var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ? this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;
+                            this.updateIncrementalView(startIndex, endIndex);
+                        }
+                        activeElement.item = this.getElementByValue(activeElement.item.getAttribute('data-value'));
+                    }
+                    else {
+                        this.updateIncrementalView(0, this.itemCount);
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+                        this.list.scrollTop = 0;
+                    }
+                    if (activeElement && activeElement.item) {
+                        activeElement.item = this.getElementByValue(activeElement.item.getAttribute('data-value'));
+                    }
+                }
+                if (activeElement && activeElement.item) {
                     this.addListFocus(activeElement.item);
                     this.list.scrollTop =
                         activeElement.item.offsetHeight * activeElement.index;
@@ -13245,11 +14349,15 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 }
             }
         }
+        if (this.enableVirtualization && this.allowFiltering) {
+            this.getFilteringSkeletonCount();
+        }
     }
     preRender() {
         if (this.allowFiltering === null) {
             this.allowFiltering = (this.mode === 'CheckBox') ? true : false;
         }
+        this.preventSetCurrentData = false;
         this.initializeData();
         this.updateDataAttribute(this.htmlAttributes);
         super.preRender();
@@ -13271,6 +14379,14 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.isCustomRendered = false;
         this.isRemoteSelection = false;
         this.isSelectAllTarget = true;
+        this.viewPortInfo = {
+            currentPageNumber: null,
+            direction: null,
+            sentinelInfo: {},
+            offsets: {},
+            startIndex: 0,
+            endIndex: this.itemCount,
+        };
     }
     updateData(delimiterChar, e) {
         let data = '';
@@ -13278,7 +14394,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         const text = [];
         let temp;
         const tempData = this.listData;
-        this.listData = this.mainData;
+        if (!this.enableVirtualization) {
+            this.listData = this.mainData;
+        }
         if (!isNullOrUndefined(this.hiddenElement)) {
             this.hiddenElement.innerHTML = '';
         }
@@ -13286,16 +14404,32 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             let valueLength = this.value.length;
             let hiddenElementContent = '';
             for (let index = 0; index < valueLength; index++) {
-                const valueItem = this.value[index];
-                const listValue = this.findListElement((!isNullOrUndefined(this.mainList) ? this.mainList : this.ulElement), 'li', 'data-value', valueItem);
-                if (isNullOrUndefined(listValue) && !this.allowCustomValue) {
+                const valueItem = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value[index]) : this.value[index];
+                let listValue = this.findListElement((!isNullOrUndefined(this.mainList) ? this.mainList : this.ulElement), 'li', 'data-value', valueItem);
+                if (this.enableVirtualization) {
+                    listValue = this.findListElement((!isNullOrUndefined(this.list) ? this.list : this.ulElement), 'li', 'data-value', valueItem);
+                }
+                if (isNullOrUndefined(listValue) && !this.allowCustomValue && !this.enableVirtualization) {
                     this.value.splice(index, 1);
                     index -= 1;
                     valueLength -= 1;
                 }
                 else {
                     if (this.listData) {
-                        temp = this.getTextByValue(valueItem);
+                        if (this.enableVirtualization) {
+                            if (delim) {
+                                data = this.delimiterWrapper && this.delimiterWrapper.innerHTML == "" ? data : this.delimiterWrapper.innerHTML;
+                            }
+                            const value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[this.value.length - 1]) : this.value[this.value.length - 1];
+                            temp = this.getTextByValue(value);
+                            let textValues = this.text != null && this.text != "" ? this.text + ',' + temp : temp;
+                            data += temp + delimiterChar + ' ';
+                            text.push(textValues);
+                            break;
+                        }
+                        else {
+                            temp = this.getTextByValue(valueItem);
+                        }
                     }
                     else {
                         temp = valueItem;
@@ -13309,7 +14443,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 this.hiddenElement.innerHTML = hiddenElementContent;
             }
         }
-        this.setProperties({ text: text.toString() }, true);
+        let isChipRemove = e && e.target && e.target.classList.contains('e-chips-close');
+        if (!this.enableVirtualization || (this.enableVirtualization && this.mode !== 'CheckBox' && !isChipRemove)) {
+            this.setProperties({ text: text.toString() }, true);
+        }
         if (delim) {
             this.updateWrapperText(this.delimiterWrapper, data);
             this.delimiterWrapper.setAttribute('id', getUniqueID('delim_val'));
@@ -13338,7 +14475,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 }
             }
             if (textVal && textVal.length) {
-                this.setProperties({ value: textVal }, true);
+                const value = this.allowObjectBinding ? this.getDataByValue(textVal) : textVal;
+                this.setProperties({ value: value }, true);
             }
         }
         else {
@@ -13351,10 +14489,12 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             isEmptyData = true;
         }
         super.render(null, isEmptyData);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.totalItemCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
         this.unwireListEvents();
         this.wireListEvents();
     }
-    initialValueUpdate() {
+    initialValueUpdate(listItems) {
         if (this.list) {
             let text;
             let element;
@@ -13365,12 +14505,34 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.removeListSelection();
             if (!isNullOrUndefined(this.value)) {
                 for (let index = 0; !isNullOrUndefined(this.value[index]); index++) {
-                    value = this.value[index];
+                    value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[index]) : this.value[index];
                     element = this.findListElement(this.hideSelectedItem ? this.ulElement : this.list, 'li', 'data-value', value);
-                    text = this.getTextByValue(value);
-                    if ((element && (element.getAttribute('aria-selected') !== 'true')) ||
+                    let isCustomData = false;
+                    if (this.enableVirtualization) {
+                        text = null;
+                        if (listItems != null && listItems.length > 0) {
+                            for (let i = 0; i < listItems.length; i++) {
+                                if (getValue((this.fields.value ? this.fields.value : 'value'), listItems[i]) === value) {
+                                    text = getValue(this.fields.text, listItems[i]);
+                                    break;
+                                }
+                            }
+                        }
+                        if (isNullOrUndefined(text) && this.allowCustomValue) {
+                            text = this.getTextByValue(value);
+                            isCustomData = true;
+                        }
+                    }
+                    else {
+                        text = this.getTextByValue(value);
+                    }
+                    if (((element && (element.getAttribute('aria-selected') !== 'true')) ||
                         (element && (element.getAttribute('aria-selected') === 'true' && this.hideSelectedItem) &&
-                            (this.mode === 'Box' || this.mode === 'Default'))) {
+                            (this.mode === 'Box' || this.mode === 'Default'))) || (this.enableVirtualization && value != null && text != null && !isCustomData)) {
+                        let currentText = [];
+                        var textValues = this.text != null ? this.text + ',' + text : text;
+                        currentText.push(textValues);
+                        this.setProperties({ text: currentText.toString() }, true);
                         this.addChip(text, value);
                         this.addListSelection(element);
                     }
@@ -13381,12 +14543,24 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         setValue(this.fields.value, value, newValue);
                         const noDataEle = this.popupWrapper.querySelector('.' + dropDownBaseClasses.noData);
                         this.addItem(newValue, indexItem);
+                        if (this.enableVirtualization) {
+                            if (this.virtualCustomSelectData && this.virtualCustomSelectData.length >= 0) {
+                                this.virtualCustomSelectData.push(newValue);
+                            }
+                            else {
+                                this.virtualCustomSelectData = [newValue];
+                            }
+                        }
                         element = element ? element : this.findListElement(this.hideSelectedItem ? this.ulElement : this.list, 'li', 'data-value', value);
                         if (this.popupWrapper.contains(noDataEle)) {
                             this.list.setAttribute('style', noDataEle.getAttribute('style'));
                             this.popupWrapper.replaceChild(this.list, noDataEle);
                             this.wireListEvents();
                         }
+                        let currentText = [];
+                        var textValues = this.text != null ? this.text + ',' + text : text;
+                        currentText.push(textValues);
+                        this.setProperties({ text: currentText.toString() }, true);
                         this.addChip(text, value);
                         this.addListSelection(element);
                     }
@@ -13416,7 +14590,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     updateActionCompleteData(li, item) {
-        if (this.value && this.value.indexOf(li.getAttribute('data-value')) > -1) {
+        if (this.value && ((!this.allowObjectBinding && this.value.indexOf(li.getAttribute('data-value')) > -1) || (this.allowObjectBinding && this.isObjectInArray(this.getDataByValue(li.getAttribute('data-value')), this.value)))) {
             this.mainList = this.ulElement;
             if (this.hideSelectedItem) {
                 addClass([li], HIDE_LIST);
@@ -13454,13 +14628,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     }
     updateListSelection(li, e, length) {
         const customVal = li.getAttribute('data-value');
-        let value = this.getFormattedValue(customVal);
+        let value = this.allowObjectBinding ? this.getDataByValue(customVal) : this.getFormattedValue(customVal);
         if (this.allowCustomValue && ((customVal !== 'false' && value === false) ||
             (!isNullOrUndefined(value) && value.toString() === 'NaN'))) {
             value = customVal;
         }
         this.removeHover();
-        if (!this.value || this.value.indexOf(value) === -1) {
+        if (!this.value || ((!this.allowObjectBinding && this.value.indexOf(value) === -1) || (this.allowObjectBinding && this.indexOfObjectInArray(value, this.value) === -1))) {
             this.dispatchSelect(value, e, li, (li.getAttribute('aria-selected') === 'true'), length);
         }
         else {
@@ -13468,9 +14642,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
     }
     updateListSelectEventCallback(value, li, e) {
+        value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
         const text = this.getTextByValue(value);
-        if ((this.allowCustomValue || this.allowFiltering) && !this.findListElement(this.mainList, 'li', 'data-value', value)) {
-            const temp = li.cloneNode(true);
+        if ((this.allowCustomValue || this.allowFiltering) && !this.findListElement(this.mainList, 'li', 'data-value', value) && (!this.enableVirtualization || (this.enableVirtualization && this.virtualCustomData))) {
+            const temp = li ? li.cloneNode(true) : li;
             const fieldValue = this.fields.value ? this.fields.value : 'value';
             if (this.allowCustomValue && this.mainData.length && typeof getValue(fieldValue, this.mainData[0]) === 'number') {
                 value = !isNaN(parseFloat(value.toString())) ? parseFloat(value.toString()) : value;
@@ -13482,10 +14657,22 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             };
             this.trigger('customValueSelection', eventArgs, (eventArgs) => {
                 if (!eventArgs.cancel) {
-                    append([temp], this.mainList);
-                    this.mainData.push(data);
-                    this.remoteCustomValue = false;
-                    this.addValue(value, text, e);
+                    if (this.enableVirtualization && this.virtualCustomData) {
+                        if (this.virtualCustomSelectData && this.virtualCustomSelectData.length >= 0) {
+                            this.virtualCustomSelectData.push(data);
+                        }
+                        else {
+                            this.virtualCustomSelectData = [data];
+                        }
+                        this.remoteCustomValue = false;
+                        this.addValue(value, text, e);
+                    }
+                    else {
+                        append([temp], this.mainList);
+                        this.mainData.push(data);
+                        this.remoteCustomValue = false;
+                        this.addValue(value, text, e);
+                    }
                 }
             });
         }
@@ -13594,8 +14781,12 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     onMouseClick(e) {
         this.keyCode = null;
         this.scrollFocusStatus = false;
+        this.keyboardEvent = null;
         let target = e.target;
         const li = closest(target, '.' + dropDownBaseClasses.li);
+        if (this.enableVirtualization && li && li.classList.contains('e-virtual-list')) {
+            return;
+        }
         const headerLi = closest(target, '.' + dropDownBaseClasses.group);
         if (headerLi && this.enableGroupCheckBox && this.mode === 'CheckBox' && this.fields.groupBy) {
             target = target.classList.contains('e-list-group-item') ? target.firstElementChild.lastElementChild
@@ -13672,6 +14863,39 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             else {
                 e.preventDefault();
             }
+            if (this.enableVirtualization && this.hideSelectedItem) {
+                let visibleListElements = this.list.querySelectorAll('li.'
+                    + dropDownBaseClasses.li
+                    + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)' + ':not(.e-virtual-list)');
+                if (visibleListElements.length) {
+                    const actualCount = this.virtualListHeight > 0 ? Math.floor(this.virtualListHeight / this.listItemHeight) : 0;
+                    if (visibleListElements.length < (actualCount + 2)) {
+                        let query = this.getForQuery(this.value).clone();
+                        query = query.skip(this.virtualItemStartIndex);
+                        this.resetList(this.dataSource, this.fields, query);
+                        this.UpdateSkeleton();
+                        this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+                        this.virtualItemCount = this.itemCount;
+                        if (this.mode !== 'CheckBox') {
+                            this.totalItemCount = this.value && this.value.length ? this.totalItemCount - this.value.length : this.totalItemCount;
+                        }
+                        if (!this.list.querySelector('.e-virtual-ddl')) {
+                            var virualElement = this.createElement('div', {
+                                id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
+                            });
+                            this.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);
+                        }
+                        else {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
+                        }
+                        if (this.list.querySelector('.e-virtual-ddl-content')) {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+                        }
+                    }
+                }
+            }
             this.refreshPlaceHolder();
             this.deselectHeader();
         }
@@ -13909,7 +15133,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             let remaining;
             let downIconWidth = 0;
             let overAllContainer;
-            this.updateWrapperText(this.viewWrapper, data);
+            if (!this.enableVirtualization) {
+                this.updateWrapperText(this.viewWrapper, data);
+            }
             const l10nLocale = {
                 noRecordsTemplate: 'No records found',
                 actionFailureTemplate: 'Request failed',
@@ -13940,11 +15166,21 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.checkClearIconWidth();
             if (!isNullOrUndefined(this.value)) {
                 for (let index = 0; !isNullOrUndefined(this.value[index]); index++) {
-                    data += (index === 0) ? '' : this.delimiterChar + ' ';
-                    temp = this.getOverflowVal(index);
-                    data += temp;
-                    temp = this.viewWrapper.innerHTML;
-                    this.updateWrapperText(this.viewWrapper, data);
+                    let items = this.text && this.text.split(this.delimiterChar);
+                    if (!this.enableVirtualization) {
+                        data += (index === 0) ? '' : this.delimiterChar + ' ';
+                        temp = this.getOverflowVal(index);
+                        data += temp;
+                        temp = this.viewWrapper.innerHTML;
+                        this.updateWrapperText(this.viewWrapper, data);
+                    }
+                    else if (items) {
+                        data += (index === 0) ? '' : this.delimiterChar + ' ';
+                        temp = items[index];
+                        data += temp;
+                        temp = this.viewWrapper.innerHTML;
+                        this.updateWrapperText(this.viewWrapper, data);
+                    }
                     wrapperleng = this.viewWrapper.offsetWidth +
                         parseInt(window.getComputedStyle(this.viewWrapper).paddingRight, 10);
                     overAllContainer = this.componentWrapper.offsetWidth -
@@ -14047,18 +15283,19 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     getOverflowVal(index) {
         let temp;
         if (this.mainData && this.mainData.length) {
+            const value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[index]) : this.value[index];
             if (this.mode === 'CheckBox') {
                 const newTemp = this.listData;
                 this.listData = this.mainData;
-                temp = this.getTextByValue(this.value[index]);
+                temp = this.getTextByValue(value);
                 this.listData = newTemp;
             }
             else {
-                temp = this.getTextByValue(this.value[index]);
+                temp = this.getTextByValue(value);
             }
         }
         else {
-            temp = this.value[index];
+            temp = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[index]) : this.value[index];
         }
         return temp;
     }
@@ -14175,7 +15412,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             preventSelectEvent: false
         };
         this.trigger('beforeSelectAll', beforeSelectArgs);
-        if (li && li.length) {
+        if ((li && li.length) || (this.enableVirtualization && !state)) {
             let index = 0;
             let count = 0;
             if (this.enableGroupCheckBox) {
@@ -14185,37 +15422,127 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 count = state ? this.maximumSelectionLength - (this.value ? this.value.length : 0) : this.maximumSelectionLength;
             }
             if (!beforeSelectArgs.preventSelectEvent) {
-                this.isSelectAllTarget = (length === index + 1);
-                while (index < length && index <= 50 && index < count) {
-                    this.updateListSelection(li[index], event, length - index);
-                    if (this.enableGroupCheckBox) {
-                        this.findGroupStart(li[index]);
-                    }
-                    index++;
-                }
-                if (length > 50) {
-                    setTimeout(() => {
-                        while (index < length && index < count) {
-                            this.isSelectAllTarget = (length === index + 1);
-                            this.updateListSelection(li[index], event, length - index);
-                            if (this.enableGroupCheckBox) {
-                                this.findGroupStart(li[index]);
+                if (this.enableVirtualization) {
+                    if (state) {
+                        this.virtualSelectAll = true;
+                        this.resetList(this.dataSource, this.fields, new Query().skip(this.viewPortInfo.startIndex));
+                        if (this.virtualSelectAllData instanceof Array) {
+                            for (var i = 0; i < this.virtualSelectAllData.length; i++) {
+                                if (li[this.skeletonCount + i]) {
+                                    let value = this.allowObjectBinding ? this.getDataByValue(li[this.skeletonCount + i].getAttribute('data-value')) : this.getFormattedValue(li[this.skeletonCount + i].getAttribute('data-value'));
+                                    if (((!this.allowObjectBinding && this.value && this.value.indexOf(value) === 1) || (this.allowObjectBinding && this.indexOfObjectInArray(value, this.value) === 1))) {
+                                        continue;
+                                    }
+                                    this.updateListSelection(li[this.skeletonCount + i], event, length - i);
+                                }
+                                else {
+                                    if (this.fields) {
+                                        let value = getValue(this.fields.value, this.virtualSelectAllData[i]);
+                                        value = this.allowObjectBinding ? this.getDataByValue(value) : value;
+                                        if (((!this.allowObjectBinding && this.value && this.value.indexOf(value) === 1) || (this.allowObjectBinding && this.indexOfObjectInArray(value, this.value) === 1))) {
+                                            continue;
+                                        }
+                                        if (this.value && value != null && Array.isArray(this.value) && ((!this.allowObjectBinding && this.value.indexOf(value) < 0) || (this.allowObjectBinding && !this.isObjectInArray(value, this.value)))) {
+                                            this.dispatchSelect(value, event, null, false, length);
+                                        }
+                                    }
+                                }
                             }
+                            if (this.virtualSelectAllData && this.value.length != this.virtualSelectAllData.length && this.virtualItemStartIndex != 0) {
+                                if (this.virtualItemStartIndex > this.itemCount) {
+                                    for (var i = 0; i < this.itemCount; i++) {
+                                        if (this.fields) {
+                                            let value = getValue(this.fields.value, this.virtualSelectAllData[i]);
+                                            value = this.allowObjectBinding ? this.getDataByValue(value) : value;
+                                            if (this.value && value != null && Array.isArray(this.value) && ((!this.allowObjectBinding && this.value.indexOf(value) < 0) || (this.allowObjectBinding && !this.isObjectInArray(value, this.value)))) {
+                                                this.setProperties({ value: [].concat([], this.value, this.allowObjectBinding ? [this.virtualSelectAllData[i]] : [value]) }, true);
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                            else {
+                                for (var i = 0; i < this.virtualItemStartIndex; i++) {
+                                    if (this.fields) {
+                                        var value = getValue(this.fields.value, this.virtualSelectAllData[i]);
+                                        value = this.allowObjectBinding ? this.getDataByValue(value) : value;
+                                        if (Array.isArray(this.value) && ((!this.allowObjectBinding && this.value.indexOf(value) < 0) || (this.allowObjectBinding && !this.isObjectInArray(value, this.value)))) {
+                                            this.setProperties({ value: [].concat([], this.value, this.allowObjectBinding ? [this.virtualSelectAllData[i]] : [value]) }, true);
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    else {
+                        while (index < this.value.length && index <= 50 && index < count && this.value.length > 0) {
+                            this.removeValue(this.value[index], event, this.value.length - index);
                             index++;
                         }
-                        this.updatedataValueItems(event);
-                        if (!this.changeOnBlur) {
-                            this.updateValueState(event, this.value, this.tempValues);
-                            this.isSelectAll = this.isSelectAll ? !this.isSelectAll : this.isSelectAll;
+                        if (length > 50) {
+                            setTimeout(() => {
+                                while (index < this.value.length && index < count && this.value.length > 0) {
+                                    this.removeValue(value[index], event, this.value.length - index);
+                                    index++;
+                                }
+                                this.updatedataValueItems(event);
+                                if (!this.changeOnBlur) {
+                                    this.updateValueState(event, this.value, this.tempValues);
+                                    this.isSelectAll = this.isSelectAll ? !this.isSelectAll : this.isSelectAll;
+                                }
+                                this.updateHiddenElement();
+                            }, 0);
                         }
-                        this.updateHiddenElement();
-                        if (this.popupWrapper && li[index - 1].classList.contains('e-item-focus')) {
-                            const selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
-                            if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
-                                li[index - 1].classList.remove('e-item-focus');
-                            }
+                        this.value = [];
+                        this.virtualSelectAll = false;
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        let ulElement = this.renderItems(this.listData, this.fields);
+                    }
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const virtualTrackElement = this.list.getElementsByClassName('e-virtual-ddl')[0];
+                    if (virtualTrackElement) {
+                        (virtualTrackElement).style = this.GetVirtualTrackHeight();
+                    }
+                    this.UpdateSkeleton();
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const virtualContentElement = this.list.getElementsByClassName('e-virtual-ddl-content')[0];
+                    if (virtualContentElement) {
+                        (virtualContentElement).style = this.getTransformValues();
+                    }
+                }
+                else {
+                    while (index < length && index <= 50 && index < count) {
+                        this.isSelectAllTarget = (length === index + 1);
+                        this.updateListSelection(li[index], event, length - index);
+                        if (this.enableGroupCheckBox) {
+                            this.findGroupStart(li[index]);
                         }
-                    }, 0);
+                        index++;
+                    }
+                    if (length > 50) {
+                        setTimeout(() => {
+                            while (index < length && index < count) {
+                                this.isSelectAllTarget = (length === index + 1);
+                                this.updateListSelection(li[index], event, length - index);
+                                if (this.enableGroupCheckBox) {
+                                    this.findGroupStart(li[index]);
+                                }
+                                index++;
+                            }
+                            this.updatedataValueItems(event);
+                            if (!this.changeOnBlur) {
+                                this.updateValueState(event, this.value, this.tempValues);
+                                this.isSelectAll = this.isSelectAll ? !this.isSelectAll : this.isSelectAll;
+                            }
+                            this.updateHiddenElement();
+                            if (this.popupWrapper && li[index - 1].classList.contains('e-item-focus')) {
+                                const selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
+                                if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
+                                    li[index - 1].classList.remove('e-item-focus');
+                                }
+                            }
+                        }, 0);
+                    }
                 }
             }
             else {
@@ -14223,12 +15550,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     this.removeHover();
                     let customVal = li[i].getAttribute('data-value');
                     let value = this.getFormattedValue(customVal);
+                    value = this.allowObjectBinding ? this.getDataByValue(value) : value;
                     let mainElement = this.mainList ? this.mainList.querySelectorAll(state ?
                         'li.e-list-item:not([aria-selected="true"]):not(.e-reorder-hide)' :
                         'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide)')[i] : null;
                     if (state) {
                         this.value = !this.value ? [] : this.value;
-                        if (this.value.indexOf(value) < 0) {
+                        if ((!this.allowObjectBinding && this.value.indexOf(value) < 0) || (this.allowObjectBinding && !this.isObjectInArray(value, this.value))) {
                             this.setProperties({ value: [].concat([], this.value, [value]) }, true);
                         }
                         this.removeFocus();
@@ -14372,6 +15700,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             }
             this.selectAllItem(state, event);
         }
+        this.virtualSelectAll = false;
     }
     /**
      * Get the properties to be maintained in the persisted state.
@@ -14538,12 +15867,31 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         this.renderPopup();
     }
+    totalItemsCount() {
+        let dataSourceCount;
+        if (this.dataSource instanceof DataManager) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            dataSourceCount = this.virtualGroupDataSource && this.virtualGroupDataSource.length ? this.virtualGroupDataSource.length : 0;
+        }
+        else {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            dataSourceCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
+        }
+        if (this.mode === 'CheckBox') {
+            this.totalItemCount = dataSourceCount != 0 ? dataSourceCount : this.totalItemCount;
+        }
+        else {
+            this.totalItemCount = dataSourceCount != 0 ? dataSourceCount - this.value.length : this.totalItemCount;
+        }
+    }
     presentItemValue(ulElement) {
         let valuecheck = [];
         for (let i = 0; i < this.value.length; i++) {
-            let checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', this.value[i]);
+            const value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value[i]) : this.value[i];
+            let checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', value);
             if (!checkEle) {
-                valuecheck.push(this.value[i]);
+                const checkvalue = this.allowObjectBinding ? this.getDataByValue(this.value[i]) : this.value[i];
+                valuecheck.push(checkvalue);
             }
         }
         return valuecheck;
@@ -14654,6 +16002,31 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     if (this.mode === 'CheckBox' && this.showSelectAll) {
                         EventHandler.remove(this.popupObj.element, 'click', this.clickHandler);
                     }
+                    if (this.enableVirtualization && this.mode === 'CheckBox') {
+                        this.viewPortInfo.startIndex = this.virtualItemStartIndex = 0;
+                        this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.viewPortInfo.startIndex > 0 ? this.viewPortInfo.endIndex : this.itemCount;
+                        this.previousStartIndex = 0;
+                        this.previousEndIndex = 0;
+                    }
+                    let dataSourceCount;
+                    if (this.dataSource instanceof DataManager) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        dataSourceCount = this.virtualGroupDataSource && this.virtualGroupDataSource.length ? this.virtualGroupDataSource.length : 0;
+                    }
+                    else {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        dataSourceCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
+                    }
+                    if (this.enableVirtualization && (this.allowFiltering || this.allowCustomValue) && this.value != null && this.targetElement() && this.totalItemCount !== dataSourceCount) {
+                        this.updateInitialData();
+                        this.checkAndResetCache();
+                    }
+                    if (this.virtualCustomData && this.viewPortInfo && this.viewPortInfo.startIndex === 0 && this.viewPortInfo.endIndex === this.itemCount) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        this.renderItems(this.mainData, this.fields);
+                    }
+                    this.virtualCustomData = null;
+                    this.isVirtualTrackHeight = false;
                 }
             });
         }
@@ -14667,6 +16040,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (!this.enabled) {
             return;
         }
+        this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;
         const args = { cancel: false };
         this.trigger('beforeOpen', args, (args) => {
             if (!args.cancel) {
@@ -14689,6 +16063,46 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     return;
                 }
                 this.onPopupShown(e);
+                if (this.enableVirtualization && this.listData && this.listData.length) {
+                    if (!isNullOrUndefined(this.value) && (this.getModuleName() === 'dropdownlist' || this.getModuleName() === 'combobox')) {
+                        this.removeHover();
+                    }
+                    if (!this.beforePopupOpen) {
+                        if (this.hideSelectedItem && this.value && Array.isArray(this.value) && this.value.length > 0) {
+                            this.totalItemsCount();
+                        }
+                        if (!this.preventSetCurrentData && !isNullOrUndefined(this.viewPortInfo.startIndex) && !isNullOrUndefined(this.viewPortInfo.endIndex)) {
+                            this.notify("setCurrentViewDataAsync", {
+                                component: this.getModuleName(),
+                                module: "VirtualScroll",
+                            });
+                        }
+                    }
+                }
+                if (this.enableVirtualization && !this.allowFiltering && this.selectedValueInfo != null && this.selectedValueInfo.startIndex > 0 && this.value != null) {
+                    this.notify("dataProcessAsync", {
+                        module: "VirtualScroll",
+                        isOpen: true,
+                    });
+                }
+                if (this.enableVirtualization) {
+                    this.updatevirtualizationList();
+                }
+                else {
+                    if (this.value && this.value.length) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        let element;
+                        const listItems = this.getItems();
+                        for (const value of this.value) {
+                            const checkValue = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', value) : value;
+                            element = this.getElementByValue(checkValue);
+                            if (element) {
+                                this.addListSelection(element);
+                            }
+                        }
+                    }
+                }
+                this.preventSetCurrentData = true;
             }
         });
     }
@@ -14840,6 +16254,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.wireEvent();
         this.enable(this.enabled);
         this.enableRTL(this.enableRtl);
+        if (this.enableVirtualization) {
+            this.updateVirtualizationProperties(this.itemCount, this.allowFiltering, this.mode === 'CheckBox');
+        }
+        this.listItemHeight = this.getListHeight();
+        this.getSkeletonCount();
+        this.viewPortInfo.startIndex = this.virtualItemStartIndex = 0;
+        this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.viewPortInfo.startIndex > 0 ? this.viewPortInfo.endIndex : this.itemCount;
         this.checkInitialValue();
         if (this.element.hasAttribute('data-val')) {
             this.element.setAttribute('data-val', 'false');
@@ -14851,6 +16272,22 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         this.renderComplete();
     }
+    getListHeight() {
+        let listParent = this.createElement('div', {
+            className: 'e-dropdownbase'
+        });
+        let item = this.createElement('li', {
+            className: 'e-list-item'
+        });
+        let listParentHeight = formatUnit(this.popupHeight);
+        listParent.style.height = (parseInt(listParentHeight, 10)).toString() + 'px';
+        listParent.appendChild(item);
+        document.body.appendChild(listParent);
+        this.virtualListHeight = listParent.getBoundingClientRect().height;
+        let listItemHeight = Math.ceil(item.getBoundingClientRect().height);
+        listParent.remove();
+        return listItemHeight;
+    }
     checkInitialValue() {
         const isData = this.dataSource instanceof Array ? (this.dataSource.length > 0)
             : !isNullOrUndefined(this.dataSource);
@@ -14866,7 +16303,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 const opt = optionsElement[index];
                 if (!isNullOrUndefined(opt.getAttribute('selected'))) {
                     if (opt.getAttribute('value')) {
-                        valueCol.push(opt.getAttribute('value'));
+                        let value = this.allowObjectBinding ? this.getDataByValue(opt.getAttribute('value')) : opt.getAttribute('value');
+                        valueCol.push(value);
                     }
                     else {
                         textCol += (opt.text + this.delimiterChar);
@@ -14893,14 +16331,40 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.initialTextUpdate();
         }
         if (this.value && this.value.length) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let listItems;
+            if (this.enableVirtualization) {
+                const fields = (this.fields.value) ? this.fields.value : '';
+                let predicate;
+                for (let i = 0; i < this.value.length; i++) {
+                    const value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value[i]) : this.value[i];
+                    if (i === 0) {
+                        predicate = new Predicate(fields, 'equal', value);
+                    }
+                    else {
+                        predicate = predicate.or(fields, 'equal', value);
+                    }
+                }
+                if (this.dataSource instanceof DataManager) {
+                    this.dataSource.executeQuery(new Query().where(predicate))
+                        .then((e) => {
+                        if (e.result.result.length > 0) {
+                            listItems = e.result.result;
+                        }
+                    });
+                }
+                else {
+                    listItems = new DataManager(this.dataSource).executeLocal(new Query().where(predicate));
+                }
+            }
             if (!(this.dataSource instanceof DataManager)) {
-                this.initialValueUpdate();
+                this.initialValueUpdate(listItems);
                 this.initialUpdate();
             }
             else {
                 this.setInitialValue = () => {
                     this.initStatus = false;
-                    this.initialValueUpdate();
+                    this.initialValueUpdate(listItems);
                     this.initialUpdate();
                     this.setInitialValue = null;
                     this.initStatus = true;
@@ -14922,6 +16386,33 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.inputElement.focus();
         }
     }
+    updatevirtualizationList() {
+        if (this.value && this.value.length) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let element;
+            const listItems = this.getItems();
+            for (const value of this.value) {
+                const checkValue = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', value) : value;
+                element = this.getElementByValue(checkValue);
+                if (element) {
+                    this.addListSelection(element);
+                }
+            }
+            if (this.enableVirtualization && this.hideSelectedItem) {
+                let visibleListElements = this.list.querySelectorAll('li.'
+                    + dropDownBaseClasses.li
+                    + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)' + ':not(.e-virtual-list)');
+                if (visibleListElements.length) {
+                    var actualCount = this.virtualListHeight > 0 ? Math.floor(this.virtualListHeight / this.listItemHeight) : 0;
+                    if (visibleListElements.length < (actualCount + 2)) {
+                        var query = this.getForQuery(this.value).clone();
+                        query = query.skip(this.viewPortInfo.startIndex);
+                        this.resetList(this.dataSource, this.fields, query);
+                    }
+                }
+            }
+        }
+    }
     setFloatLabelType() {
         removeFloating(this.overAllWrapper, this.componentWrapper, this.searchWrapper, this.inputElement, this.value, this.floatLabelType, this.placeholder);
         if (this.floatLabelType !== 'Never') {
@@ -14955,6 +16446,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (this.mode !== 'Box' && !(this.setDynValue && this.mode === 'Default' && this.inputFocus)) {
             this.updateDelimView();
         }
+        this.viewPortInfo.startIndex = this.virtualItemStartIndex = 0;
+        this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.itemCount;
         this.updateCssClass();
         this.updateHTMLAttribute();
         this.updateReadonly(this.readonly);
@@ -15052,6 +16545,9 @@ __decorate$5([
 __decorate$5([
     Property(true)
 ], MultiSelect.prototype, "enableHtmlSanitizer", void 0);
+__decorate$5([
+    Property(false)
+], MultiSelect.prototype, "enableVirtualization", void 0);
 __decorate$5([
     Property([])
 ], MultiSelect.prototype, "dataSource", void 0);
@@ -15130,6 +16626,9 @@ __decorate$5([
 __decorate$5([
     Property(null)
 ], MultiSelect.prototype, "value", void 0);
+__decorate$5([
+    Property(false)
+], MultiSelect.prototype, "allowObjectBinding", void 0);
 __decorate$5([
     Property(true)
 ], MultiSelect.prototype, "hideSelectedItem", void 0);
@@ -15357,7 +16856,7 @@ class CheckBoxSelection {
                 }
                 EventHandler.add(this.checkAllParent, 'mousedown', this.clickHandler, this);
             }
-            if (this.parent.list.classList.contains('e-nodata') || (this.parent.listData && this.parent.listData.length <= 1 &&
+            if (this.parent.list.classList.contains('e-nodata') || (this.parent.listData && this.parent.listData.length <= 1 && !this.parent.enableVirtualization &&
                 !(this.parent.isDynamicDataChange)) || (this.parent.isDynamicDataChange &&
                 this.parent.listData && this.parent.listData.length <= 1)) {
                 this.checkAllParent.style.display = 'none';
@@ -15718,7 +17217,13 @@ class CheckBoxSelection {
                 });
                 remLi = this.parent.ulElement.querySelectorAll('li.e-active');
                 addClass(remLi, 'e-reorder-hide');
-                prepend([ulEle], this.parent.list);
+                if (this.parent.enableVirtualization) {
+                    var virtualUlElement = this.parent.list.querySelector('.e-virtual-ddl-content');
+                    prepend([ulEle], virtualUlElement);
+                }
+                else {
+                    prepend([ulEle], this.parent.list);
+                }
             }
             this.parent.focusAtFirstListItem();
         }
@@ -16091,7 +17596,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             }
         }
         this.initWrapper();
-        this.setSelection();
+        this.setSelection(this.value, true, false, !this.isRendered);
         this.initDraggable();
         this.mainList = this.ulElement;
         if (this.initLoad) {
@@ -17728,7 +19233,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             });
         }
     }
-    setSelection(values = this.value, isSelect = true, isText = false) {
+    setSelection(values = this.value, isSelect = true, isText = false, canFocus = true) {
         let li;
         let liselect;
         if (values) {
@@ -17757,13 +19262,17 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                     if (!isSelect && liselect || isSelect && !liselect && li) {
                         if (this.selectionSettings.showCheckbox) {
                             this.notify('updatelist', { li: li, module: 'listbox' });
-                            li.focus();
+                            if (canFocus) {
+                                li.focus();
+                            }
                         }
                         else {
                             if (isSelect) {
                                 li.classList.add(cssClass.selected);
                                 li.setAttribute('aria-selected', 'true');
-                                li.focus();
+                                if (canFocus) {
+                                    li.focus();
+                                }
                             }
                             else {
                                 li.classList.remove(cssClass.selected);
@@ -18246,6 +19755,8 @@ let Mention = class Mention extends DropDownBase {
         this.isPopupOpen = false;
         this.isCollided = false;
         this.lineBreak = false;
+        this.isRTE = false;
+        this.keyEventName = 'mousedown';
     }
     /**
      * Execute before render the list items
@@ -18291,7 +19802,7 @@ let Mention = class Mention extends DropDownBase {
     }
     bindCommonEvent() {
         if (!Browser.isDevice) {
-            this.inputElement.addEventListener('keydown', this.keyDownHandler.bind(this), true);
+            this.inputElement.addEventListener('keydown', this.keyDownHandler.bind(this), !this.isRTE);
         }
     }
     /**
@@ -18321,6 +19832,10 @@ let Mention = class Mention extends DropDownBase {
                 return parentElement.querySelector('.e-content');
             }
         }
+        if (targetElement && targetElement.parentElement && targetElement.parentElement.classList.contains('e-rte-content')) {
+            this.isRTE = true;
+            this.keyEventName = 'click';
+        }
         return targetElement;
     }
     /**
@@ -18462,7 +19977,7 @@ let Mention = class Mention extends DropDownBase {
     }
     unBindCommonEvent() {
         if (!Browser.isDevice) {
-            this.inputElement.removeEventListener('keydown', this.keyDownHandler.bind(this), true);
+            this.inputElement.removeEventListener('keydown', this.keyDownHandler.bind(this), !this.isRTE);
         }
     }
     onKeyUp(e) {
@@ -18473,7 +19988,7 @@ let Mention = class Mention extends DropDownBase {
         }
         this.isTyped = e.code !== 'Enter' && e.code !== 'Space' && e.code !== 'ArrowDown' && e.code !== 'ArrowUp' ? true : false;
         const isRteImage = document.activeElement.parentElement && document.activeElement.parentElement.querySelector('.e-rte-image') ? true : false;
-        if (document.activeElement != this.inputElement && !isRteImage) {
+        if (document.activeElement != this.inputElement && isRteImage) {
             this.inputElement.focus();
         }
         if (this.isContentEditable(this.inputElement)) {
@@ -18499,9 +20014,9 @@ let Mention = class Mention extends DropDownBase {
                 this.range.startContainer.previousElementSibling && this.range.startContainer.previousElementSibling.tagName !== 'BR' && this.range.startContainer.textContent.split('').length > 0 &&
                 (rangetextContent.length === 1 || rangetextContent[rangetextContent.length - 2].indexOf('') === -1 ||
                     this.range.startContainer.nodeType === 1))) {
-            if (this.allowSpaces && currentRange && currentRange.trim() !== '' && charRegex.test(currentRange) && currentRange.indexOf(this.mentionChar) !== -1
+            if (this.isPopupOpen && this.allowSpaces && currentRange && currentRange.trim() !== '' && charRegex.test(currentRange) && currentRange.indexOf(this.mentionChar) !== -1
                 && !this.isMatchedText() && (currentRange.length > 1 && currentRange.replace(/\u00A0/g, ' ').charAt(currentRange.length - 2) !== ' ') &&
-                (this.list && this.list.querySelectorAll('ul').length > 0)) {
+                (this.list && this.list.querySelectorAll('ul').length > 0) && e.code !== 'Enter') {
                 this.queryString = currentRange.substring(currentRange.lastIndexOf(this.mentionChar) + 1).replace('\u00a0', ' ');
                 this.searchLists(e);
             }
@@ -19002,6 +20517,9 @@ let Mention = class Mention extends DropDownBase {
             this.popupObj.element.removeAttribute('style');
             this.popupObj.element.removeAttribute('aria-disabled');
         }
+        if (this.list.classList.contains('e-nodata')) {
+            this.list = null;
+        }
     }
     onDocumentClick(e) {
         const target = e.target;
@@ -19112,6 +20630,7 @@ let Mention = class Mention extends DropDownBase {
         return coordinates;
     }
     initValue() {
+        this.isDataFetched = false;
         this.renderList();
         if (this.dataSource instanceof DataManager) {
             this.initRemoteRender = true;
@@ -19137,7 +20656,7 @@ let Mention = class Mention extends DropDownBase {
      * @returns {void}
      */
     wireListEvents() {
-        EventHandler.add(this.list, 'mousedown', this.onMouseClick, this);
+        EventHandler.add(this.list, this.keyEventName, this.onMouseClick, this);
         EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);
         EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);
     }
@@ -19147,7 +20666,7 @@ let Mention = class Mention extends DropDownBase {
      * @returns {void}
      */
     unWireListEvents() {
-        EventHandler.remove(this.list, 'mousedown', this.onMouseClick);
+        EventHandler.remove(this.list, this.keyEventName, this.onMouseClick);
         EventHandler.remove(this.list, 'mouseover', this.onMouseOver);
         EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);
     }
@@ -19162,7 +20681,9 @@ let Mention = class Mention extends DropDownBase {
         const delay = 100;
         this.closePopup(delay, e);
         this.inputElement.focus();
-        e.preventDefault();
+        if (!this.isRTE) {
+            e.preventDefault();
+        }
     }
     updateSelectedItem(li, e, preventSelect, isSelection) {
         this.removeSelection();
@@ -19402,7 +20923,7 @@ let Mention = class Mention extends DropDownBase {
             if (this.isPopupOpen) {
                 this.hidePopup();
             }
-            //New event to update the RichTextEditor value, when a mention item is selected using mouse click action. 
+            //New event to update the RichTextEditor value, when a mention item is selected using mouse click action.
             if (!isNullOrUndefined(e.pointerType) && e.pointerType === 'mouse') {
                 const event = new CustomEvent('content-changed', { detail: { click: true } });
                 this.inputElement.dispatchEvent(event);