@syncfusion/ej2-dropdowns 24.2.9 → 25.1.37

package/src/multi-select/multi-select.js

@@ -21,7 +21,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 /// <reference path='../drop-down-base/drop-down-base-model.d.ts'/>
 import { DropDownBase, dropDownBaseClasses } from '../drop-down-base/drop-down-base';
 import { FieldSettings } from '../drop-down-base/drop-down-base';
-import { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
+import { isCollide, Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
 import { Input } from '@syncfusion/ej2-inputs';
 import { attributes, setValue, getValue } from '@syncfusion/ej2-base';
 import { NotifyPropertyChanges, extend } from '@syncfusion/ej2-base';
@@ -104,8 +104,12 @@ var MultiSelect = /** @class */ (function (_super) {
         _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;
+        };
         return _this;
     }
     MultiSelect.prototype.enableRTL = function (state) {
@@ -122,6 +126,9 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.requiredModules = function () {
         var modules = [];
+        if (this.enableVirtualization) {
+            modules.push({ args: [this], member: 'VirtualScroll' });
+        }
         if (this.mode === 'CheckBox') {
             this.isGroupChecking = this.enableGroupCheckBox;
             if (this.enableGroupCheckBox) {
@@ -262,6 +269,9 @@ var MultiSelect = /** @class */ (function (_super) {
                 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) {
@@ -270,6 +280,33 @@ var MultiSelect = /** @class */ (function (_super) {
             }
         });
     };
+    MultiSelect.prototype.updateVirtualReOrderList = function (isCheckBoxUpdate) {
+        var 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();
+        }
+    };
     MultiSelect.prototype.updateListItems = function (listItems, mainListItems) {
         for (var i = 0; i < listItems.length; i++) {
             this.findGroupStart(listItems[i]);
@@ -279,19 +316,33 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.loadTemplate = function () {
         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;
     };
     MultiSelect.prototype.setScrollPosition = function () {
         if (((!this.hideSelectedItem && this.mode !== 'CheckBox') || (this.mode === 'CheckBox' && !this.enableSelectionOrder)) &&
             (!isNullOrUndefined(this.value) && (this.value.length > 0))) {
-            var valueEle = this.findListElement((this.hideSelectedItem ? this.ulElement : this.list), 'li', 'data-value', this.value[this.value.length - 1]);
+            var value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value[this.value.length - 1]) : this.value[this.value.length - 1];
+            var valueEle = this.findListElement((this.hideSelectedItem ? this.ulElement : this.list), 'li', 'data-value', value);
             if (!isNullOrUndefined(valueEle)) {
                 this.scrollBottom(valueEle);
             }
         }
+        if (this.enableVirtualization) {
+            var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
+            if (focusedItem) {
+                this.scrollBottom(focusedItem);
+            }
+        }
     };
     MultiSelect.prototype.focusAtFirstListItem = function () {
         if (this.ulElement && this.ulElement.querySelector('li.'
@@ -302,9 +353,15 @@ var MultiSelect = /** @class */ (function (_super) {
                 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();
@@ -319,7 +376,8 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         else {
             if (this.value && this.value.length) {
-                Search(this.value[this.value.length - 1], this.liCollections, 'StartsWith', this.ignoreCase);
+                var 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;
@@ -327,7 +385,7 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         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);
             }
         }
@@ -369,9 +427,9 @@ var MultiSelect = /** @class */ (function (_super) {
         var elements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP);
         var 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();
         }
-        var customValue = this.getFormattedValue(value);
+        var customValue = this.allowObjectBinding ? this.getDataByValue(value) : this.getFormattedValue(value);
         if (this.allowCustomValue && (value !== 'false' && customValue === false || (!isNullOrUndefined(customValue) &&
             customValue.toString() === 'NaN'))) {
             customValue = value;
@@ -397,15 +455,43 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         return this.targetInputElement.value;
     };
-    MultiSelect.prototype.getForQuery = function (valuecheck) {
+    MultiSelect.prototype.getForQuery = function (valuecheck, isCheckbox) {
         var predicate;
         var field = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;
-        for (var i = 0; i < valuecheck.length; i++) {
-            if (i === 0) {
-                predicate = new Predicate(field, 'equal', valuecheck[i]);
+        if (this.enableVirtualization) {
+            if (isCheckbox) {
+                for (var i = 0; i < valuecheck.length; i++) {
+                    var 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 (var i = 0; i < valuecheck.length; i++) {
+                    var 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 (var 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) {
@@ -417,14 +503,20 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     /* eslint-disable @typescript-eslint/no-unused-vars */
     MultiSelect.prototype.onActionComplete = function (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.prototype.onActionComplete.call(this, 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
         var proxy = this;
-        if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
+        if (!isNullOrUndefined(this.value) && !this.allowCustomValue && !this.enableVirtualization) {
             for (var i = 0; i < this.value.length; i++) {
-                var checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', proxy.value[i]);
+                var value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', proxy.value[i]) : proxy.value[i];
+                var 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;
@@ -512,7 +604,7 @@ var MultiSelect = /** @class */ (function (_super) {
             dropDownBaseClasses.selected;
         if (!isNullOrUndefined(this.value)) {
             for (var 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);
@@ -611,13 +703,13 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.checkSelectAll = function () {
         var groupItemLength = this.list.querySelectorAll('li.e-list-group-item.e-active').length;
         var listItem = this.list.querySelectorAll('li.e-list-item');
-        var searchCount = this.list.querySelectorAll('li.' + dropDownBaseClasses.li).length;
+        var searchCount = this.enableVirtualization ? this.list.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-virtual-list)').length : this.list.querySelectorAll('li.' + dropDownBaseClasses.li).length;
         var 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)) {
@@ -654,7 +746,7 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         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();
@@ -684,7 +776,7 @@ var MultiSelect = /** @class */ (function (_super) {
             return filterQuery;
         }
         if (this.filterAction) {
-            if (this.targetElement() !== null) {
+            if ((this.targetElement() !== null && !this.enableVirtualization) || (this.enableVirtualization && this.targetElement() !== null && this.targetElement().trim() !== '')) {
                 var 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);
@@ -694,21 +786,89 @@ var MultiSelect = /** @class */ (function (_super) {
                     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();
         }
     };
+    MultiSelect.prototype.virtualFilterQuery = function (filterQuery) {
+        var takeValue = this.getTakeValue();
+        var isReOrder = true;
+        var isSkip = true;
+        var isTake = true;
+        for (var 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;
+    };
+    MultiSelect.prototype.getTakeValue = function () {
+        return this.allowFiltering && Browser.isDevice ? Math.round(window.outerHeight / this.listItemHeight) : this.itemCount;
+    };
     MultiSelect.prototype.dataUpdater = function (dataSource, query, fields) {
         this.isDataFetched = false;
+        var isNoData = this.list.classList.contains(dropDownBaseClasses.noData);
         if (this.targetElement().trim() === '') {
-            var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
+            var 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();
@@ -720,7 +880,30 @@ var MultiSelect = /** @class */ (function (_super) {
             }
         }
         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);
@@ -731,6 +914,9 @@ var MultiSelect = /** @class */ (function (_super) {
                 }
             }
         }
+        if (this.enableVirtualization && this.allowFiltering) {
+            this.getFilteringSkeletonCount();
+        }
         this.refreshPopup();
         if (this.mode === 'CheckBox') {
             this.removeFocus();
@@ -744,18 +930,43 @@ var MultiSelect = /** @class */ (function (_super) {
             var customData = (!isNullOrUndefined(this.mainData) && this.mainData.length > 0) ?
                 this.mainData[0] : this.mainData;
             if (customData && typeof (customData) !== 'string' && typeof (customData) !== 'number' && typeof (customData) !== 'boolean') {
-                var dataItem = {};
-                setValue(field.text, value, dataItem);
+                var dataItem_1 = {};
+                setValue(field.text, value, dataItem_1);
                 if (typeof getValue((this.fields.value ? this.fields.value : 'value'), customData)
                     === 'number') {
-                    setValue(field.value, Math.random(), dataItem);
+                    setValue(field.value, Math.random(), dataItem_1);
                 }
                 else {
-                    setValue(field.value, value, dataItem);
+                    setValue(field.value, value, dataItem_1);
+                }
+                var emptyObject_1 = {};
+                if (this.allowObjectBinding) {
+                    var keys = this.listData && this.listData.length > 0 ? Object.keys(this.listData[0]) : this.firstItem ? Object.keys(this.firstItem) : Object.keys(dataItem_1);
+                    // Create an empty object with predefined keys
+                    keys.forEach(function (key) {
+                        emptyObject_1[key] = ((key === fields.value) || (key === fields.text)) ? getValue(fields.value, dataItem_1) : null;
+                    });
+                }
+                dataItem_1 = this.allowObjectBinding ? emptyObject_1 : dataItem_1;
+                if (this.enableVirtualization) {
+                    this.virtualCustomData = dataItem_1;
+                    var tempData = this.virtualGroupDataSource ? JSON.parse(JSON.stringify(this.virtualGroupDataSource)) : JSON.parse(JSON.stringify(this.dataSource));
+                    var totalData = [];
+                    if (this.virtualCustomSelectData && this.virtualCustomSelectData.length > 0) {
+                        totalData = tempData.concat(this.virtualCustomSelectData);
+                    }
+                    tempData.splice(0, 0, dataItem_1);
+                    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 {
+                    var tempData = JSON.parse(JSON.stringify(this.listData));
+                    tempData.splice(0, 0, dataItem_1);
+                    this.resetList(tempData, field, query);
                 }
-                var tempData = JSON.parse(JSON.stringify(this.listData));
-                tempData.splice(0, 0, dataItem);
-                this.resetList(tempData, field, query);
             }
             else if (this.listData) {
                 var tempData = JSON.parse(JSON.stringify(this.listData));
@@ -789,6 +1000,8 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.wrapperClick = function (e) {
         this.setDynValue = false;
+        this.keyboardEvent = null;
+        this.isKeyBoardAction = false;
         if (!this.enabled) {
             return;
         }
@@ -988,8 +1201,8 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.initStatus && this.validateValues(newValue, oldValue)) {
             var 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
@@ -1005,13 +1218,14 @@ var MultiSelect = /** @class */ (function (_super) {
                 this.dispatchEvent(this.hiddenElement, 'change');
             }
         }
+        this.selectedValueInfo = this.viewPortInfo;
     };
     MultiSelect.prototype.updateTempValue = function () {
         if (!this.value) {
             this.tempValues = this.value;
         }
         else {
-            this.tempValues = this.value.slice();
+            this.tempValues = this.allowObjectBinding ? this.value.slice() : this.value.slice();
         }
     };
     MultiSelect.prototype.updateAriaActiveDescendant = function () {
@@ -1019,26 +1233,44 @@ var MultiSelect = /** @class */ (function (_super) {
             attributes(this.inputElement, { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-item-focus')[0].id });
         }
     };
-    MultiSelect.prototype.getPagingCount = function () {
-        var height = this.list.classList.contains(dropDownBaseClasses.noData) ? null :
-            getComputedStyle(this.getItems()[0], null).getPropertyValue('height');
-        return Math.round(this.list.offsetHeight / parseInt(height, 10));
-    };
-    MultiSelect.prototype.pageUpSelection = function (steps) {
+    MultiSelect.prototype.pageUpSelection = function (steps, isVirtualKeyAction) {
         var collection = this.list.querySelectorAll('li.'
             + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
         var previousItem = steps >= 0 ? collection[steps + 1] : collection[0];
-        this.addListFocus(previousItem);
-        this.scrollBottom(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')));
+        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);
+        }
     };
-    MultiSelect.prototype.pageDownSelection = function (steps) {
+    MultiSelect.prototype.pageDownSelection = function (steps, isVirtualKeyAction) {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         var list = this.getItems();
         var collection = this.list.querySelectorAll('li.'
             + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
         var 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);
     };
     MultiSelect.prototype.getItems = function () {
         if (!this.list) {
@@ -1157,21 +1389,110 @@ var MultiSelect = /** @class */ (function (_super) {
             }
         }
     };
-    MultiSelect.prototype.homeNavigation = function (isHome) {
+    MultiSelect.prototype.homeNavigation = function (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();
+                    var 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();
         var scrollEle = this.ulElement.querySelectorAll('li.' + dropDownBaseClasses.li
             + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
         if (scrollEle.length > 0) {
             var 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();
         }
     };
+    MultiSelect.prototype.updateSelectionList = function () {
+        if (!isNullOrUndefined(this.value) && this.value.length) {
+            for (var index = 0; index < this.value.length; index++) {
+                var value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[index]) : this.value[index];
+                var selectedItem = this.getElementByValue(value);
+                if (selectedItem && !selectedItem.classList.contains(dropDownBaseClasses.selected)) {
+                    selectedItem.classList.add('e-active');
+                }
+            }
+        }
+    };
+    MultiSelect.prototype.handleVirtualKeyboardActions = function (e, pageCount) {
+        var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
+        var 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;
+    };
     MultiSelect.prototype.onKeyDown = function (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) {
@@ -1184,16 +1505,18 @@ var MultiSelect = /** @class */ (function (_super) {
         else if (this.isPopupOpen()) {
             var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
             var activeIndex = void 0;
+            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;
@@ -1201,7 +1524,7 @@ var MultiSelect = /** @class */ (function (_super) {
                     e.preventDefault();
                     if (focusedItem) {
                         this.getIndexByValue(focusedItem.getAttribute('data-value'));
-                        this.pageDownSelection(activeIndex + this.getPagingCount());
+                        this.pageDownSelection(activeIndex + this.getPageCount());
                         this.updateAriaAttribute();
                     }
                     return;
@@ -1267,10 +1590,11 @@ var MultiSelect = /** @class */ (function (_super) {
         if (!(this.mode === 'CheckBox' && this.showSelectAll)) {
             this.refreshPopup();
         }
+        this.isKeyBoardAction = false;
     };
-    MultiSelect.prototype.arrowDown = function (e) {
+    MultiSelect.prototype.arrowDown = function (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)) {
@@ -1278,7 +1602,7 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         this.updateAriaAttribute();
     };
-    MultiSelect.prototype.arrowUp = function (e) {
+    MultiSelect.prototype.arrowUp = function (e, isVirtualKeyAction) {
         e.preventDefault();
         this.keyAction = true;
         var list = this.list.querySelectorAll('li.'
@@ -1296,7 +1620,7 @@ var MultiSelect = /** @class */ (function (_super) {
             this.keyAction = false;
             this.notify('inputFocus', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'focus' });
         }
-        this.moveByList(-1);
+        this.moveByList(-1, isVirtualKeyAction);
         this.updateAriaAttribute();
     };
     MultiSelect.prototype.spaceKeySelection = function (e) {
@@ -1347,8 +1671,8 @@ var MultiSelect = /** @class */ (function (_super) {
         else if (e.keyCode === 8 && this.mode === 'Delimiter') {
             if (this.value && this.value.length) {
                 e.preventDefault();
-                var temp = this.value[this.value.length - 1];
-                this.removeValue(temp, e);
+                var 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);
             }
@@ -1363,6 +1687,9 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.escapeAction = function () {
         var 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;
@@ -1384,36 +1711,104 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         this.makeTextBoxEmpty();
     };
-    MultiSelect.prototype.scrollBottom = function (selectedLI, activeIndex) {
+    MultiSelect.prototype.scrollBottom = function (selectedLI, activeIndex, isInitialSelection, keyCode) {
+        if (isInitialSelection === void 0) { isInitialSelection = false; }
+        if (keyCode === void 0) { keyCode = null; }
+        if ((!isNullOrUndefined(selectedLI) && selectedLI.classList.contains('e-virtual-list')) || (this.enableVirtualization && isNullOrUndefined(selectedLI))) {
+            selectedLI = this.liCollections[this.skeletonCount];
+        }
+        this.isUpwardScrolling = false;
+        var virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
+        var lastElementValue = this.list.querySelector('li:last-of-type') ? this.list.querySelector('li:last-of-type').getAttribute('data-value') : null;
+        var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? selectedLI.offsetTop + (this.virtualListInfo.startIndex * selectedLI.offsetHeight) : selectedLI.offsetTop;
         var currentOffset = this.list.offsetHeight;
-        var nextBottom = selectedLI.offsetTop + selectedLI.offsetHeight - this.list.scrollTop;
+        var nextBottom = selectedLiOffsetTop - (virtualListCount * selectedLI.offsetHeight) + selectedLI.offsetHeight - this.list.scrollTop;
         var nextOffset = this.list.scrollTop + nextBottom - currentOffset;
-        var boxRange = (selectedLI.offsetTop + selectedLI.offsetHeight - this.list.scrollTop);
+        var isScrollerCHanged = false;
+        var isScrollTopChanged = false;
+        var 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)) {
+            var 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;
+            isScrollTopChanged = true;
         }
+        this.isKeyBoardAction = isScrollerCHanged;
     };
-    MultiSelect.prototype.scrollTop = function (selectedLI, activeIndex) {
-        var nextOffset = selectedLI.offsetTop - this.list.scrollTop;
+    MultiSelect.prototype.scrollTop = function (selectedLI, activeIndex, keyCode) {
+        if (keyCode === void 0) { keyCode = null; }
+        var virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
+        var selectedLiOffsetTop = (this.virtualListInfo && this.virtualListInfo.startIndex) ? selectedLI.offsetTop + (this.virtualListInfo.startIndex * selectedLI.offsetHeight) : selectedLI.offsetTop;
+        var nextOffset = selectedLiOffsetTop - (virtualListCount * selectedLI.offsetHeight) - this.list.scrollTop;
+        var 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;
-        var boxRange = (selectedLI.offsetTop + selectedLI.offsetHeight - this.list.scrollTop);
-        if (activeIndex === 0) {
+        var boxRange = (selectedLiOffsetTop - (virtualListCount * selectedLI.offsetHeight) + selectedLI.offsetHeight - this.list.scrollTop);
+        var 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);
         }
     };
@@ -1500,7 +1895,19 @@ var MultiSelect = /** @class */ (function (_super) {
         if ((this.allowFiltering || (this.mode === 'CheckBox' && this.enableSelectionOrder === true)
             || this.allowCustomValue) && this.mainList && this.listData) {
             var 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();
@@ -1515,14 +1922,15 @@ var MultiSelect = /** @class */ (function (_super) {
         var 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);
+            var currentChip = this.allowObjectBinding ? this.getDataByValue(selectedElem.getAttribute('data-value')) : selectedElem.getAttribute('data-value');
+            this.removeValue(currentChip, e);
             this.makeTextBoxEmpty();
         }
         if (this.closePopupOnSelect) {
@@ -1549,7 +1957,7 @@ var MultiSelect = /** @class */ (function (_super) {
             selectAllParent.classList.remove('e-item-focus');
         }
     };
-    MultiSelect.prototype.moveByList = function (position) {
+    MultiSelect.prototype.moveByList = function (position, isVirtualKeyAction) {
         if (this.list) {
             var elements = this.list.querySelectorAll('li.'
                 + dropDownBaseClasses.li
@@ -1560,6 +1968,9 @@ var MultiSelect = /** @class */ (function (_super) {
                     + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
             }
             var selectedElem = this.list.querySelector('li.' + dropDownBaseClasses.focus);
+            if (this.enableVirtualization && isVirtualKeyAction && !isNullOrUndefined(this.currentFocuedListElement)) {
+                selectedElem = this.getElementByValue(this.getFormattedValue(this.currentFocuedListElement.getAttribute('data-value')));
+            }
             var temp = -1;
             var 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) {
@@ -1588,22 +1999,57 @@ var MultiSelect = /** @class */ (function (_super) {
                 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) {
+                            var isVirtualElement = elements[temp - 1].classList.contains('e-virtual-list');
+                            var 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);
+                        }
                     }
                 }
             }
         }
     };
+    MultiSelect.prototype.getElementByValue = function (value) {
+        var item;
+        var listItems = this.getItems();
+        for (var _i = 0, listItems_1 = listItems; _i < listItems_1.length; _i++) {
+            var liItem = listItems_1[_i];
+            if (this.getFormattedValue(liItem.getAttribute('data-value')) === value) {
+                item = liItem;
+                break;
+            }
+        }
+        return item;
+    };
     MultiSelect.prototype.updateCheck = function (element) {
         if (this.mode === 'CheckBox' && this.enableGroupCheckBox &&
             !isNullOrUndefined(this.fields.groupBy)) {
@@ -1665,7 +2111,7 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.enabled && !this.readonly) {
             var element = e.target.parentElement;
             var customVal = element.getAttribute('data-value');
-            var value = this.getFormattedValue(customVal);
+            var value = this.allowObjectBinding ? this.getDataByValue(customVal) : this.getFormattedValue(customVal);
             if (this.allowCustomValue && ((customVal !== 'false' && value === false) ||
                 (!isNullOrUndefined(value) && value.toString() === 'NaN'))) {
                 value = customVal;
@@ -1677,6 +2123,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 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) {
                 var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
                 this.onActionComplete(list, this.mainData);
@@ -1711,7 +2158,7 @@ var MultiSelect = /** @class */ (function (_super) {
         this.expandTextbox();
     };
     MultiSelect.prototype.removeAllItems = function (value, eve, isClearAll, element, mainElement) {
-        var index = this.value.indexOf(value);
+        var index = this.allowObjectBinding ? this.indexOfObjectInArray(value, this.value) : this.value.indexOf(value);
         var removeVal = this.value.slice(0);
         removeVal.splice(index, 1);
         this.setProperties({ value: [].concat([], removeVal) }, true);
@@ -1726,7 +2173,8 @@ var MultiSelect = /** @class */ (function (_super) {
             e: this, index: index
         });
         this.invokeCheckboxSelection(element, eve, isClearAll);
-        this.updateMainList(true, value, mainElement);
+        var currentValue = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
+        this.updateMainList(true, currentValue, mainElement);
         this.updateChipStatus();
     };
     MultiSelect.prototype.invokeCheckboxSelection = function (element, eve, isClearAll) {
@@ -1743,9 +2191,9 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.removeValue = function (value, eve, length, isClearAll) {
         var _this = this;
-        var index = this.value.indexOf(this.getFormattedValue(value));
+        var 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());
         }
         var targetEle = eve && eve.target;
         isClearAll = (isClearAll || targetEle && targetEle.classList.contains('e-close-hooker')) ? true : null;
@@ -1753,7 +2201,8 @@ var MultiSelect = /** @class */ (function (_super) {
             HIDE_LIST :
             dropDownBaseClasses.selected;
         if (index !== -1) {
-            var element_1 = this.findListElement(this.list, 'li', 'data-value', value);
+            var currentValue = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
+            var element_1 = this.findListElement(this.list, 'li', 'data-value', currentValue);
             var val_1 = this.getDataByValue(value);
             var eventArgs = {
                 e: eve,
@@ -1767,11 +2216,20 @@ var MultiSelect = /** @class */ (function (_super) {
                     _this.removeIndex++;
                 }
                 else {
+                    _this.virtualSelectAll = false;
                     var removeVal = _this.value.slice(0);
+                    if (_this.enableVirtualization && isClearAll) {
+                        removeVal = [];
+                    }
                     removeVal.splice(index, 1);
                     _this.setProperties({ value: [].concat([], removeVal) }, true);
+                    if (_this.enableVirtualization) {
+                        var 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_1 !== null) {
-                        var hideElement = _this.findListElement(_this.mainList, 'li', 'data-value', value);
+                        var currentValue_1 = _this.allowObjectBinding ? getValue(((_this.fields.value) ? _this.fields.value : ''), value) : value;
+                        var hideElement = _this.findListElement(_this.mainList, 'li', 'data-value', currentValue_1);
                         element_1.setAttribute('aria-selected', 'false');
                         removeClass([element_1], className);
                         if (hideElement) {
@@ -1785,15 +2243,16 @@ var MultiSelect = /** @class */ (function (_super) {
                         });
                         _this.invokeCheckboxSelection(element_1, eve, isClearAll);
                     }
+                    var currentValue_2 = _this.allowObjectBinding ? getValue(((_this.fields.value) ? _this.fields.value : ''), value) : value;
                     if (_this.hideSelectedItem && _this.fields.groupBy && element_1) {
-                        _this.hideGroupItem(value);
+                        _this.hideGroupItem(currentValue_2);
                     }
                     if (_this.hideSelectedItem && _this.fixedHeaderElement && _this.fields.groupBy && _this.mode !== 'CheckBox' &&
                         _this.isPopupOpen()) {
                         _super.prototype.scrollStop.call(_this);
                     }
-                    _this.updateMainList(true, value);
-                    _this.removeChip(value);
+                    _this.updateMainList(true, currentValue_2);
+                    _this.removeChip(currentValue_2, isClearAll);
                     _this.updateChipStatus();
                     var limit = _this.value && _this.value.length ? _this.value.length : 0;
                     if (limit < _this.maximumSelectionLength) {
@@ -1829,6 +2288,14 @@ var MultiSelect = /** @class */ (function (_super) {
                     if (isClearAll && (length === 1 || length === null)) {
                         _this.clearAllCallback(eve, isClearAll);
                     }
+                    if (_this.isPopupOpen() && element_1 && element_1.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",
+                        });
+                    }
                 }
             });
         }
@@ -1859,11 +2326,16 @@ var MultiSelect = /** @class */ (function (_super) {
             }
         }
     };
-    MultiSelect.prototype.removeChip = function (value) {
+    MultiSelect.prototype.removeChip = function (value, isClearAll) {
         if (this.chipCollectionWrapper) {
-            var element = this.findListElement(this.chipCollectionWrapper, 'span', 'data-value', value);
-            if (element) {
-                remove(element);
+            if (this.enableVirtualization && isClearAll) {
+                var childElements = this.chipCollectionWrapper.querySelectorAll('.e-chips');
+            }
+            else {
+                var element = this.findListElement(this.chipCollectionWrapper, 'span', 'data-value', value);
+                if (element) {
+                    remove(element);
+                }
             }
         }
     };
@@ -1897,12 +2369,45 @@ var MultiSelect = /** @class */ (function (_super) {
             this.hideOverAllClear();
         }
     };
+    MultiSelect.prototype.indexOfObjectInArray = function (objectToFind, array) {
+        var _loop_1 = function (i) {
+            var item = array[i];
+            if (Object.keys(objectToFind).every(function (key) { return item.hasOwnProperty(key) && item[key] === objectToFind[key]; })) {
+                return { value: i };
+            }
+        };
+        for (var i = 0; i < array.length; i++) {
+            var state_1 = _loop_1(i);
+            if (typeof state_1 === "object")
+                return state_1.value;
+        }
+        return -1; // Return -1 if the object is not found
+    };
     MultiSelect.prototype.addValue = function (value, text, eve) {
         if (!this.value) {
             this.value = [];
         }
-        if (this.value.indexOf(value) < 0) {
-            this.setProperties({ value: [].concat([], this.value, [value]) }, true);
+        var 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) {
+                var data = this.viewWrapper.innerHTML;
+                var temp = void 0;
+                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') {
+                var temp = void 0;
+                var currentText = [];
+                var value_1 = 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_1);
+                var textValues = this.text != null ? this.text + ',' + temp : temp;
+                currentText.push(textValues);
+                this.setProperties({ text: currentText.toString() }, true);
+            }
         }
         var element = this.findListElement(this.list, 'li', 'data-value', value);
         this.removeFocus();
@@ -1931,6 +2436,7 @@ var MultiSelect = /** @class */ (function (_super) {
         var _this = this;
         var list = this.listData;
         if (this.initStatus && !isNotTrigger) {
+            value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
             var val_2 = this.getDataByValue(value);
             var eventArgs = {
                 e: eve,
@@ -1959,7 +2465,10 @@ var MultiSelect = /** @class */ (function (_super) {
                     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.prototype.scrollStop.call(_this);
                     }
@@ -2044,7 +2553,7 @@ var MultiSelect = /** @class */ (function (_super) {
             chipContent.innerText = data;
         }
         else {
-            chipContent.innerHTML = this.encodeHtmlEntities(data);
+            chipContent.innerHTML = this.encodeHtmlEntities(data.toString());
         }
         chip.appendChild(chipContent);
         var eventArgs = {
@@ -2130,6 +2639,37 @@ var MultiSelect = /** @class */ (function (_super) {
                     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;
@@ -2202,21 +2742,42 @@ var MultiSelect = /** @class */ (function (_super) {
                         }
                         _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(function () {
+                                if (_this.value) {
+                                    _this.updateSelectionList();
+                                }
+                                else if (_this.viewPortInfo && _this.viewPortInfo.offsets.top) {
+                                    _this.list.scrollTop = _this.viewPortInfo.offsets.top;
+                                }
+                            }, 5);
+                        }
                     }, targetExitViewport: function () {
                         if (!Browser.isDevice) {
                             _this.hidePopup();
                         }
                     }
                 });
+                this.checkCollision(this.popupWrapper);
+                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' });
                 }
@@ -2225,6 +2786,15 @@ var MultiSelect = /** @class */ (function (_super) {
             }
         }
     };
+    MultiSelect.prototype.checkCollision = function (popupEle) {
+        if (!(this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering)) {
+            var collision = isCollide(popupEle);
+            if (collision.length > 0) {
+                popupEle.style.marginTop = -parseInt(getComputedStyle(popupEle).marginTop, 10) + 'px';
+            }
+            this.popupObj.resolveCollision();
+        }
+    };
     MultiSelect.prototype.setHeaderTemplate = function () {
         var compiledString;
         if (this.header) {
@@ -2274,6 +2844,53 @@ var MultiSelect = /** @class */ (function (_super) {
         append([this.footer], this.popupWrapper);
         EventHandler.add(this.footer, 'mousedown', this.onListMouseDown, this);
     };
+    MultiSelect.prototype.updateInitialData = function () {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var currentData = this.selectData;
+        var 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();
+        }
+    };
     MultiSelect.prototype.clearAll = function (e) {
         if (this.enabled && !this.readonly) {
             var temp = void 0;
@@ -2294,6 +2911,24 @@ var MultiSelect = /** @class */ (function (_super) {
             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;
+            }
         }
     };
     MultiSelect.prototype.clearAllCallback = function (e, isClearAll) {
@@ -2394,6 +3029,8 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.search = function (e) {
         var _this = this;
         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;
         }
@@ -2410,6 +3047,9 @@ var MultiSelect = /** @class */ (function (_super) {
                 if (this.allowCustomValue) {
                     this.isRemoteSelection = true;
                 }
+                if (!this.backCommand) {
+                    this.checkAndResetCache();
+                }
                 var eventArgs_1 = {
                     preventDefaultAction: false,
                     text: this.targetElement(),
@@ -2436,12 +3076,83 @@ var MultiSelect = /** @class */ (function (_super) {
             else if (this.allowCustomValue) {
                 var 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 {
                 var liCollections = this.list.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-hide-listitem)');
+                var type = this.typeOfData(this.listData).typeof;
                 var activeElement = Search(this.targetElement(), liCollections, 'StartsWith', this.ignoreCase);
-                if (activeElement && activeElement.item !== null) {
+                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;
@@ -2454,11 +3165,15 @@ var MultiSelect = /** @class */ (function (_super) {
                 }
             }
         }
+        if (this.enableVirtualization && this.allowFiltering) {
+            this.getFilteringSkeletonCount();
+        }
     };
     MultiSelect.prototype.preRender = function () {
         if (this.allowFiltering === null) {
             this.allowFiltering = (this.mode === 'CheckBox') ? true : false;
         }
+        this.preventSetCurrentData = false;
         this.initializeData();
         this.updateDataAttribute(this.htmlAttributes);
         _super.prototype.preRender.call(this);
@@ -2480,6 +3195,14 @@ var MultiSelect = /** @class */ (function (_super) {
         this.isCustomRendered = false;
         this.isRemoteSelection = false;
         this.isSelectAllTarget = true;
+        this.viewPortInfo = {
+            currentPageNumber: null,
+            direction: null,
+            sentinelInfo: {},
+            offsets: {},
+            startIndex: 0,
+            endIndex: this.itemCount,
+        };
     };
     MultiSelect.prototype.updateData = function (delimiterChar, e) {
         var data = '';
@@ -2487,7 +3210,9 @@ var MultiSelect = /** @class */ (function (_super) {
         var text = [];
         var temp;
         var tempData = this.listData;
-        this.listData = this.mainData;
+        if (!this.enableVirtualization) {
+            this.listData = this.mainData;
+        }
         if (!isNullOrUndefined(this.hiddenElement)) {
             this.hiddenElement.innerHTML = '';
         }
@@ -2495,16 +3220,32 @@ var MultiSelect = /** @class */ (function (_super) {
             var valueLength = this.value.length;
             var hiddenElementContent = '';
             for (var index = 0; index < valueLength; index++) {
-                var valueItem = this.value[index];
+                var valueItem = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value[index]) : this.value[index];
                 var listValue = this.findListElement((!isNullOrUndefined(this.mainList) ? this.mainList : this.ulElement), 'li', 'data-value', valueItem);
-                if (isNullOrUndefined(listValue) && !this.allowCustomValue) {
+                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;
+                            }
+                            var 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 != "" ? this.text + ',' + temp : temp;
+                            data += temp + delimiterChar + ' ';
+                            text.push(textValues);
+                            break;
+                        }
+                        else {
+                            temp = this.getTextByValue(valueItem);
+                        }
                     }
                     else {
                         temp = valueItem;
@@ -2518,7 +3259,10 @@ var MultiSelect = /** @class */ (function (_super) {
                 this.hiddenElement.innerHTML = hiddenElementContent;
             }
         }
-        this.setProperties({ text: text.toString() }, true);
+        var 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'));
@@ -2547,7 +3291,8 @@ var MultiSelect = /** @class */ (function (_super) {
                 }
             }
             if (textVal && textVal.length) {
-                this.setProperties({ value: textVal }, true);
+                var value = this.allowObjectBinding ? this.getDataByValue(textVal) : textVal;
+                this.setProperties({ value: value }, true);
             }
         }
         else {
@@ -2560,10 +3305,12 @@ var MultiSelect = /** @class */ (function (_super) {
             isEmptyData = true;
         }
         _super.prototype.render.call(this, 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();
     };
-    MultiSelect.prototype.initialValueUpdate = function () {
+    MultiSelect.prototype.initialValueUpdate = function (listItems) {
         if (this.list) {
             var text = void 0;
             var element = void 0;
@@ -2574,12 +3321,34 @@ var MultiSelect = /** @class */ (function (_super) {
             this.removeListSelection();
             if (!isNullOrUndefined(this.value)) {
                 for (var 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')) ||
+                    var isCustomData = false;
+                    if (this.enableVirtualization) {
+                        text = null;
+                        if (listItems != null && listItems.length > 0) {
+                            for (var 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)) {
+                        var 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);
                     }
@@ -2590,12 +3359,24 @@ var MultiSelect = /** @class */ (function (_super) {
                         setValue(this.fields.value, value, newValue);
                         var 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();
                         }
+                        var 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);
                     }
@@ -2625,7 +3406,7 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     MultiSelect.prototype.updateActionCompleteData = function (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);
@@ -2663,13 +3444,13 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.updateListSelection = function (li, e, length) {
         var customVal = li.getAttribute('data-value');
-        var value = this.getFormattedValue(customVal);
+        var 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 {
@@ -2678,9 +3459,10 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.updateListSelectEventCallback = function (value, li, e) {
         var _this = this;
+        value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
         var text = this.getTextByValue(value);
-        if ((this.allowCustomValue || this.allowFiltering) && !this.findListElement(this.mainList, 'li', 'data-value', value)) {
-            var temp_1 = li.cloneNode(true);
+        if ((this.allowCustomValue || this.allowFiltering) && !this.findListElement(this.mainList, 'li', 'data-value', value) && (!this.enableVirtualization || (this.enableVirtualization && this.virtualCustomData))) {
+            var temp_1 = li ? li.cloneNode(true) : li;
             var 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;
@@ -2692,10 +3474,22 @@ var MultiSelect = /** @class */ (function (_super) {
             };
             this.trigger('customValueSelection', eventArgs, function (eventArgs) {
                 if (!eventArgs.cancel) {
-                    append([temp_1], _this.mainList);
-                    _this.mainData.push(data_1);
-                    _this.remoteCustomValue = false;
-                    _this.addValue(value, text, e);
+                    if (_this.enableVirtualization && _this.virtualCustomData) {
+                        if (_this.virtualCustomSelectData && _this.virtualCustomSelectData.length >= 0) {
+                            _this.virtualCustomSelectData.push(data_1);
+                        }
+                        else {
+                            _this.virtualCustomSelectData = [data_1];
+                        }
+                        _this.remoteCustomValue = false;
+                        _this.addValue(value, text, e);
+                    }
+                    else {
+                        append([temp_1], _this.mainList);
+                        _this.mainData.push(data_1);
+                        _this.remoteCustomValue = false;
+                        _this.addValue(value, text, e);
+                    }
                 }
             });
         }
@@ -2805,8 +3599,12 @@ var MultiSelect = /** @class */ (function (_super) {
         var _this = this;
         this.keyCode = null;
         this.scrollFocusStatus = false;
+        this.keyboardEvent = null;
         var target = e.target;
         var li = closest(target, '.' + dropDownBaseClasses.li);
+        if (this.enableVirtualization && li && li.classList.contains('e-virtual-list')) {
+            return;
+        }
         var 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
@@ -2883,6 +3681,39 @@ var MultiSelect = /** @class */ (function (_super) {
             else {
                 e.preventDefault();
             }
+            if (this.enableVirtualization && this.hideSelectedItem) {
+                var 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.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();
         }
@@ -3120,7 +3951,9 @@ var MultiSelect = /** @class */ (function (_super) {
             var remaining = void 0;
             var downIconWidth = 0;
             var overAllContainer = void 0;
-            this.updateWrapperText(this.viewWrapper, data);
+            if (!this.enableVirtualization) {
+                this.updateWrapperText(this.viewWrapper, data);
+            }
             var l10nLocale = {
                 noRecordsTemplate: 'No records found',
                 actionFailureTemplate: 'Request failed',
@@ -3151,11 +3984,21 @@ var MultiSelect = /** @class */ (function (_super) {
             this.checkClearIconWidth();
             if (!isNullOrUndefined(this.value)) {
                 for (var 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);
+                    var 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 -
@@ -3258,18 +4101,19 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.getOverflowVal = function (index) {
         var temp;
         if (this.mainData && this.mainData.length) {
+            var value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[index]) : this.value[index];
             if (this.mode === 'CheckBox') {
                 var 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;
     };
@@ -3387,8 +4231,8 @@ var MultiSelect = /** @class */ (function (_super) {
             preventSelectEvent: false
         };
         this.trigger('beforeSelectAll', beforeSelectArgs);
-        if (li && li.length) {
-            var index_1 = 0;
+        if ((li && li.length) || (this.enableVirtualization && !state)) {
+            var index_2 = 0;
             var count_1 = 0;
             if (this.enableGroupCheckBox) {
                 count_1 = state ? this.maximumSelectionLength - (this.value ? this.value.length : 0) : li.length;
@@ -3397,62 +4241,153 @@ var MultiSelect = /** @class */ (function (_super) {
                 count_1 = state ? this.maximumSelectionLength - (this.value ? this.value.length : 0) : this.maximumSelectionLength;
             }
             if (!beforeSelectArgs.preventSelectEvent) {
-                this.isSelectAllTarget = (length === index_1 + 1);
-                while (index_1 < length && index_1 <= 50 && index_1 < count_1) {
-                    this.updateListSelection(li[index_1], event, length - index_1);
-                    if (this.enableGroupCheckBox) {
-                        this.findGroupStart(li[index_1]);
-                    }
-                    index_1++;
-                }
-                if (length > 50) {
-                    setTimeout(function () {
-                        while (index_1 < length && index_1 < count_1) {
-                            _this.isSelectAllTarget = (length === index_1 + 1);
-                            _this.updateListSelection(li[index_1], event, length - index_1);
-                            if (_this.enableGroupCheckBox) {
-                                _this.findGroupStart(li[index_1]);
+                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]) {
+                                    var value_2 = 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_2) === 1) || (this.allowObjectBinding && this.indexOfObjectInArray(value_2, this.value) === 1))) {
+                                        continue;
+                                    }
+                                    this.updateListSelection(li[this.skeletonCount + i], event, length - i);
+                                }
+                                else {
+                                    if (this.fields) {
+                                        var value_3 = getValue(this.fields.value, this.virtualSelectAllData[i]);
+                                        value_3 = this.allowObjectBinding ? this.getDataByValue(value_3) : value_3;
+                                        if (((!this.allowObjectBinding && this.value && this.value.indexOf(value_3) === 1) || (this.allowObjectBinding && this.indexOfObjectInArray(value_3, this.value) === 1))) {
+                                            continue;
+                                        }
+                                        if (this.value && value_3 != null && Array.isArray(this.value) && ((!this.allowObjectBinding && this.value.indexOf(value_3) < 0) || (this.allowObjectBinding && !this.isObjectInArray(value_3, this.value)))) {
+                                            this.dispatchSelect(value_3, 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) {
+                                            var value_4 = getValue(this.fields.value, this.virtualSelectAllData[i]);
+                                            value_4 = this.allowObjectBinding ? this.getDataByValue(value_4) : value_4;
+                                            if (this.value && value_4 != null && Array.isArray(this.value) && ((!this.allowObjectBinding && this.value.indexOf(value_4) < 0) || (this.allowObjectBinding && !this.isObjectInArray(value_4, this.value)))) {
+                                                this.setProperties({ value: [].concat([], this.value, this.allowObjectBinding ? [this.virtualSelectAllData[i]] : [value_4]) }, 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);
+                                        }
+                                    }
+                                }
                             }
-                            index_1++;
                         }
-                        _this.updatedataValueItems(event);
-                        if (!_this.changeOnBlur) {
-                            _this.updateValueState(event, _this.value, _this.tempValues);
-                            _this.isSelectAll = _this.isSelectAll ? !_this.isSelectAll : _this.isSelectAll;
+                    }
+                    else {
+                        while (index_2 < this.value.length && index_2 <= 50 && index_2 < count_1 && this.value.length > 0) {
+                            this.removeValue(this.value[index_2], event, this.value.length - index_2);
+                            index_2++;
                         }
-                        _this.updateHiddenElement();
-                        if (_this.popupWrapper && li[index_1 - 1].classList.contains('e-item-focus')) {
-                            var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
-                            if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
-                                li[index_1 - 1].classList.remove('e-item-focus');
-                            }
+                        if (length > 50) {
+                            setTimeout(function () {
+                                while (index_2 < _this.value.length && index_2 < count_1 && _this.value.length > 0) {
+                                    _this.removeValue(value[index_2], event, _this.value.length - index_2);
+                                    index_2++;
+                                }
+                                _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.value = [];
+                        this.virtualSelectAll = false;
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        var ulElement = this.renderItems(this.listData, this.fields);
+                    }
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    var 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
+                    var virtualContentElement = this.list.getElementsByClassName('e-virtual-ddl-content')[0];
+                    if (virtualContentElement) {
+                        (virtualContentElement).style = this.getTransformValues();
+                    }
+                }
+                else {
+                    while (index_2 < length && index_2 <= 50 && index_2 < count_1) {
+                        this.isSelectAllTarget = (length === index_2 + 1);
+                        this.updateListSelection(li[index_2], event, length - index_2);
+                        if (this.enableGroupCheckBox) {
+                            this.findGroupStart(li[index_2]);
                         }
-                    }, 0);
+                        index_2++;
+                    }
+                    if (length > 50) {
+                        setTimeout(function () {
+                            while (index_2 < length && index_2 < count_1) {
+                                _this.isSelectAllTarget = (length === index_2 + 1);
+                                _this.updateListSelection(li[index_2], event, length - index_2);
+                                if (_this.enableGroupCheckBox) {
+                                    _this.findGroupStart(li[index_2]);
+                                }
+                                index_2++;
+                            }
+                            _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_2 - 1].classList.contains('e-item-focus')) {
+                                var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
+                                if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
+                                    li[index_2 - 1].classList.remove('e-item-focus');
+                                }
+                            }
+                        }, 0);
+                    }
                 }
             }
             else {
-                for (var i = 0; i < li.length && i < count_1; i++) {
+                for (var i_1 = 0; i_1 < li.length && i_1 < count_1; i_1++) {
                     this.removeHover();
-                    var customVal = li[i].getAttribute('data-value');
-                    var value = this.getFormattedValue(customVal);
+                    var customVal = li[i_1].getAttribute('data-value');
+                    var value_5 = this.getFormattedValue(customVal);
+                    value_5 = this.allowObjectBinding ? this.getDataByValue(value_5) : value_5;
                     var 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;
+                        'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide)')[i_1] : null;
                     if (state) {
                         this.value = !this.value ? [] : this.value;
-                        if (this.value.indexOf(value) < 0) {
-                            this.setProperties({ value: [].concat([], this.value, [value]) }, true);
+                        if ((!this.allowObjectBinding && this.value.indexOf(value_5) < 0) || (this.allowObjectBinding && !this.isObjectInArray(value_5, this.value))) {
+                            this.setProperties({ value: [].concat([], this.value, [value_5]) }, true);
                         }
                         this.removeFocus();
-                        this.addListSelection(li[i], mainElement);
+                        this.addListSelection(li[i_1], mainElement);
                         this.updateChipStatus();
                         this.checkMaxSelection();
                     }
                     else {
-                        this.removeAllItems(value, event, false, li[i], mainElement);
+                        this.removeAllItems(value_5, event, false, li[i_1], mainElement);
                     }
                     if (this.enableGroupCheckBox) {
-                        this.findGroupStart(li[i]);
+                        this.findGroupStart(li[i_1]);
                     }
                 }
                 if (!state) {
@@ -3586,6 +4521,7 @@ var MultiSelect = /** @class */ (function (_super) {
             }
             this.selectAllItem(state, event);
         }
+        this.virtualSelectAll = false;
     };
     /**
      * Get the properties to be maintained in the persisted state.
@@ -3753,12 +4689,31 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         this.renderPopup();
     };
+    MultiSelect.prototype.totalItemsCount = function () {
+        var 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;
+        }
+    };
     MultiSelect.prototype.presentItemValue = function (ulElement) {
         var valuecheck = [];
         for (var i = 0; i < this.value.length; i++) {
-            var checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', this.value[i]);
+            var value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value[i]) : this.value[i];
+            var checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', value);
             if (!checkEle) {
-                valuecheck.push(this.value[i]);
+                var checkvalue = this.allowObjectBinding ? this.getDataByValue(this.value[i]) : this.value[i];
+                valuecheck.push(checkvalue);
             }
         }
         return valuecheck;
@@ -3871,6 +4826,31 @@ var MultiSelect = /** @class */ (function (_super) {
                     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;
+                    }
+                    var dataSourceCount = void 0;
+                    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;
                 }
             });
         }
@@ -3885,6 +4865,7 @@ var MultiSelect = /** @class */ (function (_super) {
         if (!this.enabled) {
             return;
         }
+        this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;
         var args = { cancel: false };
         this.trigger('beforeOpen', args, function (args) {
             if (!args.cancel) {
@@ -3907,6 +4888,47 @@ var MultiSelect = /** @class */ (function (_super) {
                     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
+                        var element = void 0;
+                        var listItems = _this.getItems();
+                        for (var _i = 0, _a = _this.value; _i < _a.length; _i++) {
+                            var value = _a[_i];
+                            var checkValue = _this.allowObjectBinding ? getValue((_this.fields.value) ? _this.fields.value : '', value) : value;
+                            element = _this.getElementByValue(checkValue);
+                            if (element) {
+                                _this.addListSelection(element);
+                            }
+                        }
+                    }
+                }
+                _this.preventSetCurrentData = true;
             }
         });
     };
@@ -4059,6 +5081,13 @@ var MultiSelect = /** @class */ (function (_super) {
         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');
@@ -4070,6 +5099,22 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         this.renderComplete();
     };
+    MultiSelect.prototype.getListHeight = function () {
+        var listParent = this.createElement('div', {
+            className: 'e-dropdownbase'
+        });
+        var item = this.createElement('li', {
+            className: 'e-list-item'
+        });
+        var listParentHeight = formatUnit(this.popupHeight);
+        listParent.style.height = (parseInt(listParentHeight, 10)).toString() + 'px';
+        listParent.appendChild(item);
+        document.body.appendChild(listParent);
+        this.virtualListHeight = listParent.getBoundingClientRect().height;
+        var listItemHeight = Math.ceil(item.getBoundingClientRect().height);
+        listParent.remove();
+        return listItemHeight;
+    };
     MultiSelect.prototype.checkInitialValue = function () {
         var _this = this;
         var isData = this.dataSource instanceof Array ? (this.dataSource.length > 0)
@@ -4086,7 +5131,8 @@ var MultiSelect = /** @class */ (function (_super) {
                 var opt = optionsElement[index];
                 if (!isNullOrUndefined(opt.getAttribute('selected'))) {
                     if (opt.getAttribute('value')) {
-                        valueCol.push(opt.getAttribute('value'));
+                        var value = this.allowObjectBinding ? this.getDataByValue(opt.getAttribute('value')) : opt.getAttribute('value');
+                        valueCol.push(value);
                     }
                     else {
                         textCol += (opt.text + this.delimiterChar);
@@ -4113,14 +5159,40 @@ var MultiSelect = /** @class */ (function (_super) {
             this.initialTextUpdate();
         }
         if (this.value && this.value.length) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var listItems_2;
+            if (this.enableVirtualization) {
+                var fields = (this.fields.value) ? this.fields.value : '';
+                var predicate = void 0;
+                for (var i = 0; i < this.value.length; i++) {
+                    var 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(function (e) {
+                        if (e.result.result.length > 0) {
+                            listItems_2 = e.result.result;
+                        }
+                    });
+                }
+                else {
+                    listItems_2 = new DataManager(this.dataSource).executeLocal(new Query().where(predicate));
+                }
+            }
             if (!(this.dataSource instanceof DataManager)) {
-                this.initialValueUpdate();
+                this.initialValueUpdate(listItems_2);
                 this.initialUpdate();
             }
             else {
                 this.setInitialValue = function () {
                     _this.initStatus = false;
-                    _this.initialValueUpdate();
+                    _this.initialValueUpdate(listItems_2);
                     _this.initialUpdate();
                     _this.setInitialValue = null;
                     _this.initStatus = true;
@@ -4142,6 +5214,34 @@ var MultiSelect = /** @class */ (function (_super) {
             this.inputElement.focus();
         }
     };
+    MultiSelect.prototype.updatevirtualizationList = function () {
+        if (this.value && this.value.length) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var element = void 0;
+            var listItems = this.getItems();
+            for (var _i = 0, _a = this.value; _i < _a.length; _i++) {
+                var value = _a[_i];
+                var 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) {
+                var 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);
+                    }
+                }
+            }
+        }
+    };
     MultiSelect.prototype.setFloatLabelType = function () {
         removeFloating(this.overAllWrapper, this.componentWrapper, this.searchWrapper, this.inputElement, this.value, this.floatLabelType, this.placeholder);
         if (this.floatLabelType !== 'Never') {
@@ -4175,6 +5275,8 @@ var MultiSelect = /** @class */ (function (_super) {
         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);
@@ -4271,6 +5373,9 @@ var MultiSelect = /** @class */ (function (_super) {
     __decorate([
         Property(true)
     ], MultiSelect.prototype, "enableHtmlSanitizer", void 0);
+    __decorate([
+        Property(false)
+    ], MultiSelect.prototype, "enableVirtualization", void 0);
     __decorate([
         Property([])
     ], MultiSelect.prototype, "dataSource", void 0);
@@ -4349,6 +5454,9 @@ var MultiSelect = /** @class */ (function (_super) {
     __decorate([
         Property(null)
     ], MultiSelect.prototype, "value", void 0);
+    __decorate([
+        Property(false)
+    ], MultiSelect.prototype, "allowObjectBinding", void 0);
     __decorate([
         Property(true)
     ], MultiSelect.prototype, "hideSelectedItem", void 0);