@syncfusion/ej2-dropdowns 25.1.39 → 25.1.41

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

@@ -439,9 +439,10 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
                         var query = this.parent.getForQuery(this.parent.value).clone();
                         query = query.skip(0).take(this.parent.itemCount - (this.parent.value.length - this.parent.viewPortInfo.startIndex));
                         this.parent.appendUncheckList = true;
+                        this.parent.setCurrentView = false;
                         this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
                         isListUpdated = false;
-                        this.parent.appendUncheckList = false;
+                        this.parent.appendUncheckList = this.parent.dataSource instanceof DataManager ? this.parent.appendUncheckList : false;
                         isListUpdated = false;
                     }
                     else {
@@ -464,9 +465,10 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
                     var query = this.parent.getForQuery(this.parent.value).clone();
                     query = query.skip(0).take(this.parent.itemCount - (this.parent.value.length - this.parent.viewPortInfo.startIndex));
                     this.parent.appendUncheckList = true;
+                    this.parent.setCurrentView = false;
                     this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
                     isListUpdated = false;
-                    this.parent.appendUncheckList = false;
+                    this.parent.appendUncheckList = this.parent.dataSource instanceof DataManager ? this.parent.appendUncheckList : false;
                 }
             }
             else {
@@ -477,6 +479,7 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
                 var query = this.parent.getForQuery(this.parent.value).clone();
                 var skipvalue = this.parent.viewPortInfo.startIndex - this.parent.value.length >= 0 ? this.parent.viewPortInfo.startIndex - this.parent.value.length : 0;
                 query = query.skip(skipvalue);
+                this.parent.setCurrentView = false;
                 this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
                 isListUpdated = false;
             }
@@ -498,6 +501,7 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
                             else {
                                 query = query.skip(this.parent.viewPortInfo.startIndex);
                             }
+                            this.parent.setCurrentView = false;
                             this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
                             isResetListCalled = true;
                             break;
@@ -519,6 +523,7 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
                                 else {
                                     query = query.skip(this.parent.viewPortInfo.startIndex);
                                 }
+                                this.parent.setCurrentView = false;
                                 this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
                                 isResetListCalled = true;
                             }
@@ -530,6 +535,7 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
                         currentData.push(alreadyAddedData[0]);
                     }
                 }
+                this.parent.setCurrentView = false;
             }
         }
         if (!isResetListCalled && isListUpdated) {
@@ -597,6 +603,7 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
         if (isStartIndexInitialised && !((this.parent.totalItemCount == queryStartIndex) && (this.parent.totalItemCount == queryEndIndex))) {
             this.parent.virtualItemStartIndex = queryStartIndex;
             this.parent.virtualItemEndIndex = queryEndIndex;
+            this.parent.setCurrentView = true;
             this.generateAndExecuteQueryAsync(query, queryStartIndex, queryEndIndex);
             if (this.component === 'multiselect' && this.parent.hideSelectedItem && this.parent.value && Array.isArray(this.parent.value) && this.parent.value.length > 0) {
                 this.parent.totalItemsCount();
@@ -606,7 +613,9 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
                 this.parent.virtualItemEndIndex = this.parent.viewPortInfo.endIndex;
             }
         }
-        this.setCurrentViewDataAsync();
+        if (!(this.parent.dataSource instanceof DataManager) || (this.parent.dataSource instanceof DataManager && !this.parent.isRequesting)) {
+            this.setCurrentViewDataAsync();
+        }
     };
     VirtualScroll.prototype.dataProcessAsync = function (isOpenPopup) {
         this.parent.selectedValueInfo = null;
@@ -639,7 +648,7 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
                         return [4 /*yield*/, this.dataProcessAsync()];
                     case 1:
                         _a.sent();
-                        if (this.parent.keyboardEvent != null) {
+                        if (this.parent.keyboardEvent != null && (!(this.parent.dataSource instanceof DataManager) || (this.parent.dataSource instanceof DataManager && !this.parent.isRequesting))) {
                             this.parent.handleVirtualKeyboardActions(this.parent.keyboardEvent, this.parent.pageCount);
                         }
                         if (!this.parent.customFilterQuery) {
@@ -879,9 +888,10 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         _this.isCheckBoxSelection = false;
         _this.totalItemCount = 0;
         _this.dataCount = 0;
+        _this.remoteDataCount = -1;
         _this.isRemoteDataUpdated = false;
         _this.isIncrementalRequest = false;
-        _this.itemCount = 10;
+        _this.itemCount = 30;
         _this.virtualListHeight = 0;
         _this.isVirtualScrolling = false;
         _this.isPreventScrollAction = false;
@@ -908,7 +918,6 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         _this.appendUncheckList = false;
         _this.getInitialData = false;
         _this.preventPopupOpen = true;
-        _this.customFilterQuery = new Query();
         _this.virtualListInfo = {
             currentPageNumber: null,
             direction: null,
@@ -1184,10 +1193,9 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         this.virtualListInfo = this.viewPortInfo;
     };
     DropDownBase.prototype.getFilteringSkeletonCount = function () {
-        var difference = this.dataCount - this.viewPortInfo.endIndex;
         var currentSkeletonCount = this.skeletonCount;
         this.getSkeletonCount(true);
-        this.skeletonCount = this.dataCount > this.itemCount * 2 ? this.skeletonCount : difference > this.skeletonCount ? this.skeletonCount : difference > 0 ? difference : 0;
+        this.skeletonCount = this.dataCount > this.itemCount * 2 ? this.skeletonCount : 0;
         var skeletonUpdated = true;
         if ((this.getModuleName() === 'autocomplete' || this.getModuleName() === 'multiselect') && (this.totalItemCount < (this.itemCount * 2))) {
             this.skeletonCount = 0;
@@ -1221,10 +1229,10 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
     DropDownBase.prototype.getSkeletonCount = function (retainSkeleton) {
         this.virtualListHeight = this.listContainerHeight != null ? parseInt(this.listContainerHeight, 10) : this.virtualListHeight;
         var actualCount = this.virtualListHeight > 0 ? Math.floor(this.virtualListHeight / this.listItemHeight) : 0;
-        this.skeletonCount = actualCount * 2 < this.itemCount ? this.itemCount : actualCount * 2;
+        this.skeletonCount = actualCount * 4 < this.itemCount ? this.itemCount : actualCount * 4;
         this.itemCount = retainSkeleton ? this.itemCount : this.skeletonCount;
         this.virtualItemCount = this.itemCount;
-        this.skeletonCount = Math.floor(this.skeletonCount / 2) + 2;
+        this.skeletonCount = Math.floor(this.skeletonCount / 2);
     };
     DropDownBase.prototype.GetVirtualTrackHeight = function () {
         var height = this.totalItemCount === this.viewPortInfo.endIndex ? this.totalItemCount * this.listItemHeight - this.itemCount * this.listItemHeight : this.totalItemCount * this.listItemHeight;
@@ -1449,41 +1457,53 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                 if (!eventArgs.cancel) {
                     _this.isRequesting = true;
                     _this.showSpinner();
-                    if (dataSource instanceof DataManager && !_this.virtualGroupDataSource) {
+                    if (dataSource instanceof DataManager) {
                         _this.isRequested = true;
+                        var isWhereExist_1 = false;
                         if (_this.isDataFetched) {
                             _this.emptyDataRequest(fields);
                             return;
                         }
                         eventArgs.data.executeQuery(_this.getQuery(eventArgs.query)).then(function (e) {
                             _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;
-                            _this.trigger('actionComplete', e, function (e) {
-                                if (!_this.virtualGroupDataSource && _this.isVirtualizationEnabled) {
-                                    _this.isRemoteDataUpdated = true;
-                                    if ((_this.getModuleName() === 'combobox' && !_this.initialRemoteRender && _this.isAllowFiltering && _this.isVirtualizationEnabled && e.result)) {
-                                        e.result = e.result.result;
+                            var isReOrder = true;
+                            if (!_this.virtualSelectAll) {
+                                var newQuery = _this.getQuery(eventArgs.query);
+                                for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
+                                    if (newQuery.queries[queryElements].fn === 'onWhere') {
+                                        isWhereExist_1 = true;
                                     }
-                                    if (e.result.length > 0) {
-                                        var dataSource_2 = e.result;
-                                        if (_this.isVirtualizationEnabled && _this.fields.groupBy) {
-                                            var data = new DataManager(dataSource_2).executeLocal(new Query().group(_this.fields.groupBy));
-                                            _this.virtualGroupDataSource = data.records;
+                                }
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                if (_this.isVirtualizationEnabled && (e.count != 0 && e.count < (_this.itemCount * 2))) {
+                                    if (newQuery) {
+                                        for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
+                                            if (newQuery.queries[queryElements].fn === 'onTake') {
+                                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                                newQuery.queries[queryElements].e.nos = e.count;
+                                            }
+                                            if (_this.getModuleName() === 'multiselect' && (newQuery.queries[queryElements].e.condition == 'or' || newQuery.queries[queryElements].e.operator == 'equal')) {
+                                                isReOrder = false;
+                                            }
                                         }
-                                        else {
-                                            _this.virtualGroupDataSource = dataSource_2;
-                                            _this.hideSpinner();
-                                            _this.isRequested = false;
-                                            _this.isRequesting = false;
-                                            _this.setListData(dataSource_2, fields, query, event);
-                                            return;
+                                    }
+                                }
+                                else {
+                                    _this.isVirtualTrackHeight = false;
+                                    if (newQuery) {
+                                        for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
+                                            if (_this.getModuleName() === 'multiselect' && ((newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.condition == 'or') || (newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.operator == 'equal'))) {
+                                                isReOrder = false;
+                                            }
                                         }
                                     }
-                                    _this.hideSpinner();
-                                    _this.isRequested = false;
-                                    _this.isRequesting = false;
-                                    _this.updatePopupState();
-                                    return;
                                 }
+                            }
+                            if (isReOrder) {
+                                // eslint-disable @typescript-eslint/no-explicit-any
+                                _this.dataCount = _this.totalItemCount = e.count;
+                            }
+                            _this.trigger('actionComplete', e, function (e) {
                                 if (!e.cancel) {
                                     _this.isRequesting = false;
                                     var listItems = e.result;
@@ -1491,12 +1511,16 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                                         ulElement = _this.renderItems(listItems, fields);
                                         return;
                                     }
-                                    if (listItems.length === 0) {
+                                    if ((!_this.isVirtualizationEnabled && listItems.length === 0) || (_this.isVirtualizationEnabled && listItems.length === 0 && !isWhereExist_1)) {
                                         _this.isDataFetched = true;
                                     }
+                                    if (!isWhereExist_1) {
+                                        _this.remoteDataCount = e.count;
+                                    }
                                     _this.dataCount = e.count;
                                     _this.totalItemCount = e.count;
                                     ulElement = _this.renderItems(listItems, fields);
+                                    _this.appendUncheckList = false;
                                     _this.onActionComplete(ulElement, listItems, e);
                                     if (_this.groupTemplate) {
                                         _this.renderGroupTemplate(ulElement);
@@ -1509,6 +1533,17 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                                         _this.preventPopupOpen = false;
                                         return;
                                     }
+                                    if (_this.isVirtualizationEnabled && _this.setCurrentView) {
+                                        _this.notify("setCurrentViewDataAsync", {
+                                            module: "VirtualScroll",
+                                        });
+                                    }
+                                    if (_this.keyboardEvent != null) {
+                                        _this.handleVirtualKeyboardActions(_this.keyboardEvent, _this.pageCount);
+                                    }
+                                    if (_this.isVirtualizationEnabled) {
+                                        _this.getFilteringSkeletonCount();
+                                    }
                                 }
                             });
                         }).catch(function (e) {
@@ -1545,7 +1580,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                                     }
                                     if (isReOrder) {
                                         listItems = (newQuery).executeLocal(dataManager);
-                                        _this.isVirtualTrackHeight = true;
+                                        _this.isVirtualTrackHeight = (!(_this.dataSource instanceof DataManager) && !_this.isCustomDataUpdated) ? true : false;
                                     }
                                 }
                             }
@@ -1560,7 +1595,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                                 }
                             }
                         }
-                        if (isReOrder) {
+                        if (isReOrder && (!(_this.dataSource instanceof DataManager) && !_this.isCustomDataUpdated)) {
                             // eslint-disable @typescript-eslint/no-explicit-any
                             _this.dataCount = _this.totalItemCount = _this.virtualSelectAll ? listItems.length : listItems.count;
                         }
@@ -1597,6 +1632,9 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
             });
         }
     };
+    DropDownBase.prototype.handleVirtualKeyboardActions = function (e, pageCount) {
+        // Used this method in component side.
+    };
     DropDownBase.prototype.updatePopupState = function () {
         // Used this method in component side.
     };
@@ -1708,6 +1746,9 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                         addClass([ulElement.children[i]], HIDE_GROUPLIST);
                     }
                 }
+                if (ulElement.children[0].classList.contains('e-hide-group-header')) {
+                    setStyleAttribute(ulElement.children[1], { zIndex: 11 });
+                }
             }
         }
         if (!isNullOrUndefined(this.list)) {
@@ -1851,29 +1892,15 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         var topIndex = Math.round(target.scrollTop / liHeight);
         var liCollections = this.list.querySelectorAll('li' + ':not(.e-hide-listitem)');
         var virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
-        var count = 0;
-        var isCount = false;
         for (var i = topIndex; i > -1; i--) {
             var index = this.isVirtualizationEnabled ? i + virtualListCount : i;
             if (this.isVirtualizationEnabled) {
-                var groupListLength = this.list.querySelectorAll('.e-list-group-item').length;
-                var loadedGroupList = 0;
-                if (isCount) {
-                    count++;
-                }
                 if (this.fixedHeaderElement && this.updateGroupHeader(index, liCollections, target)) {
-                    loadedGroupList++;
-                    if (count >= this.getPageCount()) {
-                        break;
-                    }
-                    if (groupListLength <= loadedGroupList) {
-                        break;
-                    }
+                    break;
                 }
                 if (isDownkey) {
                     if ((!isNullOrUndefined(liCollections[index]) && liCollections[index].classList.contains(dropDownBaseClasses.selected) && this.getModuleName() !== 'autocomplete') || (!isNullOrUndefined(liCollections[index]) && liCollections[index].classList.contains(dropDownBaseClasses.focus) && this.getModuleName() === 'autocomplete')) {
-                        count++;
-                        isCount = true;
+                        
                     }
                 }
             }
@@ -3489,8 +3516,11 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         var focusEle = this.list.querySelector('.' + dropDownListClasses.focus);
         if (this.isSelectFocusItem(focusEle) && !isVirtualKeyAction) {
             this.setSelection(focusEle, e);
-            if (this.enableVirtualization && !this.fields.groupBy && this.getModuleName() !== 'combobox') {
+            if (this.enableVirtualization) {
                 var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;
+                if (this.fields.groupBy) {
+                    selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex == 0 ? this.selectedLI.offsetHeight - selectedLiOffsetTop : selectedLiOffsetTop - this.selectedLI.offsetHeight;
+                }
                 this.list.scrollTop = selectedLiOffsetTop - (this.list.querySelectorAll('.e-virtual-list').length * this.selectedLI.offsetHeight);
             }
         }
@@ -3527,7 +3557,13 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             if (!isNullOrUndefined(nextItem)) {
+                var focusAtFirstElement = this.liCollections[this.skeletonCount] && this.liCollections[this.skeletonCount].classList.contains('e-item-focus');
                 this.setSelection(nextItem, e);
+                if (focusAtFirstElement && this.enableVirtualization && this.getModuleName() === 'autocomplete' && !isVirtualKeyAction) {
+                    var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;
+                    selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex == 0 && this.fields.groupBy ? this.selectedLI.offsetHeight - selectedLiOffsetTop : selectedLiOffsetTop - this.selectedLI.offsetHeight;
+                    this.list.scrollTop = selectedLiOffsetTop - (this.list.querySelectorAll('.e-virtual-list').length * this.selectedLI.offsetHeight);
+                }
             }
             else if (this.enableVirtualization && !this.isPopupOpen && this.getModuleName() !== 'autocomplete' && ((this.viewPortInfo.endIndex !== this.totalItemCount && e.action === 'down') || (this.viewPortInfo.startIndex !== 0 && e.action === 'up'))) {
                 if (e.action === 'down') {
@@ -3654,14 +3690,13 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 }
                 break;
             case 'pageUp':
-                var count = (pageCount * 2) - 4;
-                this.activeIndex = Math.round(count);
+                this.activeIndex = this.getModuleName() === 'autocomplete' ? this.getIndexByValue(this.selectedLI.getAttribute('data-value')) + this.getPageCount() - 1 : this.getIndexByValue(this.previousValue);
                 this.pageUpSelection(this.activeIndex - this.getPageCount(), e, true);
                 e.preventDefault();
                 break;
             case 'pageDown':
-                this.activeIndex = 1;
-                this.pageDownSelection(this.activeIndex + this.getPageCount(), e, true);
+                this.activeIndex = this.getModuleName() === 'autocomplete' ? this.getIndexByValue(this.selectedLI.getAttribute('data-value')) - this.getPageCount() : this.getIndexByValue(this.previousValue);
+                this.pageDownSelection(!isNullOrUndefined(this.activeIndex) ? (this.activeIndex + this.getPageCount()) : (2 * this.getPageCount()), e, true);
                 e.preventDefault();
                 break;
             case 'home':
@@ -3698,8 +3733,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     };
     DropDownList.prototype.pageUpSelection = function (steps, event, isVirtualKeyAction) {
         var previousItem = steps >= 0 ? this.liCollections[steps + 1] : this.liCollections[0];
-        if ((this.enableVirtualization && this.activeIndex == null) || isVirtualKeyAction) {
-            previousItem = steps >= 0 ? this.liCollections[steps + this.skeletonCount + 1] : this.liCollections[0];
+        if ((this.enableVirtualization && this.activeIndex == null)) {
+            previousItem = (this.liCollections.length >= steps && steps >= 0) ? this.liCollections[steps + this.skeletonCount + 1] : this.liCollections[0];
         }
         if (!isNullOrUndefined(previousItem) && previousItem.classList.contains('e-virtual-list')) {
             previousItem = this.liCollections[this.skeletonCount];
@@ -3731,7 +3766,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             steps = this.getModuleName() === 'dropdownlist' && this.allowFiltering ? steps + 1 : steps;
             previousItem = steps < list.length ? this.liCollections[steps] : this.liCollections[list.length - 1];
         }
-        if ((this.enableVirtualization && this.activeIndex == null) || isVirtualKeyAction) {
+        if ((this.enableVirtualization && this.activeIndex == null)) {
             previousItem = steps <= list.length ? this.liCollections[steps + this.skeletonCount - 1] : this.liCollections[list.length - 1];
         }
         this.PageUpDownSelection(previousItem, event);
@@ -3917,6 +3952,11 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             }
         }
         else {
+            if (this.enableVirtualization && this.activeIndex == null && this.dataSource instanceof DataManager) {
+                this.UpdateSkeleton();
+                this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+                this.ulElement = this.list.querySelector('ul');
+            }
             this.activeIndex = this.getIndexByValue(value);
         }
     };
@@ -3976,7 +4016,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             if (this.enableVirtualization && this.value) {
                 var fields = (this.fields.value) ? this.fields.value : '';
                 var currentValue = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
-                if (this.dataSource instanceof DataManager && this.virtualGroupDataSource) {
+                if (this.dataSource instanceof DataManager) {
                     var getItem = new DataManager(this.virtualGroupDataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', currentValue)));
                     if (getItem && getItem.length > 0) {
                         this.itemData = getItem[0];
@@ -4321,7 +4361,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
                 filterQuery.where('', filterType, this.typedString, this.ignoreCase, this.ignoreAccent);
             }
-            else if (((this.getModuleName() !== 'combobox') || this.enableVirtualization) || (this.isFiltering() && this.getModuleName() === 'combobox' && this.typedString !== '')) {
+            else if (((this.getModuleName() !== 'combobox')) || (this.isFiltering() && this.getModuleName() === 'combobox' && this.typedString !== '')) {
                 var fields = (this.fields.text) ? this.fields.text : '';
                 filterQuery.where(fields, filterType, this.typedString, this.ignoreCase, this.ignoreAccent);
             }
@@ -4329,7 +4369,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         else {
             filterQuery = (this.enableVirtualization && !isNullOrUndefined(this.customFilterQuery)) ? this.customFilterQuery.clone() : query ? query.clone() : this.query ? this.query.clone() : new Query();
         }
-        if (this.enableVirtualization && (this.viewPortInfo.endIndex != 0) && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource))) {
+        if (this.enableVirtualization && this.viewPortInfo.endIndex != 0) {
             var takeValue = this.getTakeValue();
             var alreadySkipAdded = false;
             if (filterQuery) {
@@ -4396,14 +4436,6 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             }
             filterQuery.requiresCount();
         }
-        else if (this.enableVirtualization && (this.dataSource instanceof DataManager && !this.virtualGroupDataSource)) {
-            for (var queryElements_4 = 0; queryElements_4 < filterQuery.queries.length; queryElements_4++) {
-                if (filterQuery.queries[queryElements_4].fn === 'onSkip' || filterQuery.queries[queryElements_4].fn === 'onTake') {
-                    filterQuery.queries.splice(queryElements_4, 1);
-                    --queryElements_4;
-                }
-            }
-        }
         return filterQuery;
     };
     DropDownList.prototype.getSelectionPoints = function () {
@@ -4430,7 +4462,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                         return;
                     }
                     _this.isCustomFilter = true;
-                    _this.customFilterQuery = query;
+                    _this.customFilterQuery = query.clone();
                     _this.filteringAction(dataSource, query, fields);
                 },
                 baseEventArgs: e,
@@ -4736,6 +4768,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     this.addNewItem(list, selectedItem);
                 }
                 if (!isNullOrUndefined(this.itemData) || (isNullOrUndefined(this.itemData) && this.enableVirtualization)) {
+                    this.getSkeletonCount();
+                    this.skeletonCount = this.totalItemCount != 0 && this.totalItemCount < (this.itemCount * 2) ? 0 : this.skeletonCount;
+                    this.UpdateSkeleton();
                     this.focusIndexItem();
                 }
                 if (this.enableVirtualization) {
@@ -4838,7 +4873,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     };
     DropDownList.prototype.focusIndexItem = function () {
         var value = this.getItemData().value;
-        this.activeIndex = this.getIndexByValue(value);
+        this.activeIndex = ((this.enableVirtualization && !isNullOrUndefined(value)) || !this.enableVirtualization) ? this.getIndexByValue(value) : this.activeIndex;
         var element = this.findListElement(this.list, 'li', 'data-value', value);
         this.selectedLI = element;
         this.activeItem(element);
@@ -5258,7 +5293,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                         }
                         else {
                             if (this.enableVirtualization) {
-                                liCount = keyAction == "pageDown" ? this.getPageCount() : liCount;
+                                liCount = keyAction == "pageDown" ? this.getPageCount() + 1 : liCount;
                             }
                             this.list.scrollTop += this.selectedLI.offsetHeight * liCount;
                         }
@@ -5277,7 +5312,6 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                             this.isPreventKeyAction = false;
                             this.isKeyBoardAction = false;
                             this.isPreventScrollAction = false;
-                            nextOffset = nextOffset + (this.selectedLI.offsetHeight * liCount);
                         }
                         this.list.scrollTop = nextOffset;
                     }
@@ -5335,7 +5369,6 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                         this.isPreventKeyAction = false;
                         this.isKeyBoardAction = false;
                         this.isPreventScrollAction = false;
-                        nextOffset = nextOffset - (this.selectedLI.offsetHeight * liCount);
                     }
                     this.list.scrollTop = this.list.scrollTop + nextOffset;
                 }
@@ -5530,7 +5563,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             sentinelInfo: {},
             offsets: {},
             startIndex: 0,
-            endIndex: 0,
+            endIndex: this.itemCount,
         };
         if (this.getModuleName() === 'combobox') {
             this.typedString = "";
@@ -5538,8 +5571,12 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         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;
+            if (this.remoteDataCount >= 0) {
+                this.totalItemCount = this.dataCount = this.remoteDataCount;
+            }
+            else {
+                this.resetList(this.dataSource);
+            }
         }
         else {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -10010,7 +10047,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
             if (this.enableVirtualization && this.value) {
                 var fields = (this.fields.value) ? this.fields.value : '';
                 var currentValue_1 = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
-                if (this.dataSource instanceof DataManager && this.virtualGroupDataSource) {
+                if (this.dataSource instanceof DataManager) {
                     var getItem = new DataManager(this.virtualGroupDataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', currentValue_1)));
                     if (getItem && getItem.length > 0) {
                         this.itemData = getItem[0];
@@ -10234,7 +10271,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
         }
     };
     ComboBox.prototype.setValue = function (e) {
-        if (e && e.type === 'keydown' && e.action === 'enter') {
+        if ((e && e.type === 'keydown' && e.action === 'enter') || (e && e.type === 'click')) {
             this.removeFillSelection();
         }
         if (this.autofill && this.getModuleName() === 'combobox' && e && e.type === 'keydown' && e.action !== 'enter') {
@@ -10941,7 +10978,7 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
             if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
                 filterQuery.where('', filterType, queryString, this.ignoreCase, this.ignoreAccent);
             }
-            else if ((!this.enableVirtualization) || (this.enableVirtualization && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource)))) {
+            else {
                 var mapping = !isNullOrUndefined(this.fields.value) ? this.fields.value : '';
                 filterQuery.where(mapping, filterType, queryString, this.ignoreCase, this.ignoreAccent);
             }
@@ -10957,7 +10994,7 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
             }
             filterQuery.take(this.suggestionCount);
         }
-        if (this.enableVirtualization && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource))) {
+        if (this.enableVirtualization) {
             var queryTakeValue = 0;
             var querySkipValue = 0;
             var takeValue = this.getTakeValue();
@@ -11007,14 +11044,6 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
             }
             filterQuery.requiresCount();
         }
-        else if (this.enableVirtualization && (this.dataSource instanceof DataManager && !this.virtualGroupDataSource)) {
-            for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
-                if (filterQuery.queries[queryElements].fn === 'onSkip' || filterQuery.queries[queryElements].fn === 'onTake') {
-                    filterQuery.queries.splice(queryElements, 1);
-                    --queryElements;
-                }
-            }
-        }
         return filterQuery;
     };
     AutoComplete.prototype.searchLists = function (e) {
@@ -11814,10 +11843,9 @@ var MultiSelect = /** @__PURE__ @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.enableSelectionOrder) {
-                        _this.updateVirtualReOrderList();
+                    if (!_this.enableVirtualization) {
+                        _this.loadTemplate();
                     }
-                    _this.loadTemplate();
                 }
                 if (_this.mode === 'CheckBox' && _this.showSelectAll) {
                     EventHandler.add(_this.popupObj.element, 'click', _this.clickHandler, _this);
@@ -11827,7 +11855,12 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     };
     MultiSelect.prototype.updateVirtualReOrderList = function (isCheckBoxUpdate) {
         var query = this.getForQuery(this.value, true).clone();
-        this.resetList(this.dataSource, this.fields, query);
+        if (this.enableVirtualization && this.dataSource instanceof DataManager) {
+            this.resetList(this.selectedListData, this.fields, query);
+        }
+        else {
+            this.resetList(this.dataSource, this.fields, query);
+        }
         this.UpdateSkeleton();
         this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
         this.virtualItemCount = this.itemCount;
@@ -11884,6 +11917,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
         if (this.enableVirtualization) {
             var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
+            this.isKeyBoardAction = false;
             this.scrollBottom(focusedItem);
         }
     };
@@ -12001,15 +12035,15 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     MultiSelect.prototype.getForQuery = function (valuecheck, isCheckbox) {
         var predicate;
         var field = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;
-        if (this.enableVirtualization) {
+        if (this.enableVirtualization && valuecheck) {
             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);
+                        predicate = new Predicate(field, 'equal', (value));
                     }
                     else {
-                        predicate = predicate.or(field, 'equal', value);
+                        predicate = predicate.or(field, 'equal', (value));
                     }
                 }
                 return new Query().where(predicate);
@@ -12018,10 +12052,10 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 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);
+                        predicate = new Predicate(field, 'notequal', (value));
                     }
                     else {
-                        predicate = predicate.and(field, 'notequal', value);
+                        predicate = predicate.and(field, 'notequal', (value));
                     }
                 }
                 return new Query().where(predicate);
@@ -12071,7 +12105,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             valuecheck = this.presentItemValue(this.ulElement);
         }
         if (valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
-            && this.listData != null) {
+            && this.listData != null && !this.enableVirtualization) {
             this.addNonPresentItems(valuecheck, this.ulElement, this.listData);
         }
         else {
@@ -12082,6 +12116,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             query = this.allowFiltering ? query.where(this.fields.text, 'startswith', this.inputElement.value, this.ignoreCase, this.ignoreAccent) : query;
             this.checkForCustomValue(query, this.fields);
             this.isCustomRendered = true;
+            this.remoteCustomValue = this.enableVirtualization ? false : this.remoteCustomValue;
         }
         if (this.dataSource instanceof DataManager && this.mode === 'CheckBox' && this.allowFiltering) {
             this.removeFocus();
@@ -12126,7 +12161,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             if (!isNullOrUndefined(this.text) && (isNullOrUndefined(this.value) || this.value.length === 0)) {
                 this.initialTextUpdate();
             }
-            this.initialValueUpdate();
+            if (!this.enableVirtualization || (this.enableVirtualization && (!(this.dataSource instanceof DataManager)))) {
+                this.initialValueUpdate();
+            }
             this.initialUpdate();
             this.refreshPlaceHolder();
             if (this.mode !== 'CheckBox' && this.changeOnBlur) {
@@ -12329,7 +12366,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
                     filterQuery.where('', this.filterType, this.targetElement(), this.ignoreCase, this.ignoreAccent);
                 }
-                else {
+                else if ((this.enableVirtualization && this.targetElement() !== "") || !this.enableVirtualization) {
                     var fields = this.fields;
                     filterQuery.where(!isNullOrUndefined(fields.text) ? fields.text : '', this.filterType, this.targetElement(), this.ignoreCase, this.ignoreAccent);
                 }
@@ -12340,18 +12377,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             return filterQuery;
         }
         else {
-            if (this.enableVirtualization && (this.viewPortInfo.endIndex != 0) && !this.virtualSelectAll && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource))) {
+            if (this.enableVirtualization && (this.viewPortInfo.endIndex != 0) && !this.virtualSelectAll) {
                 return this.virtualFilterQuery(filterQuery);
             }
-            else if (this.enableVirtualization && (this.dataSource instanceof DataManager && !this.virtualGroupDataSource)) {
-                for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
-                    if (filterQuery.queries[queryElements].fn === 'onSkip' || filterQuery.queries[queryElements].fn === 'onTake') {
-                        filterQuery.queries.splice(queryElements, 1);
-                        --queryElements;
-                    }
-                }
-                return filterQuery;
-            }
             return query ? query : this.query ? this.query : new Query();
         }
     };
@@ -12514,7 +12542,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 var dataItem_1 = {};
                 setValue(field.text, value, dataItem_1);
                 if (typeof getValue((this.fields.value ? this.fields.value : 'value'), customData)
-                    === 'number') {
+                    === 'number' && this.fields.value !== this.fields.text) {
                     setValue(field.value, Math.random(), dataItem_1);
                 }
                 else {
@@ -12531,17 +12559,19 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 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 tempData = this.dataSource instanceof DataManager ? JSON.parse(JSON.stringify(this.listData)) : 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;
+                    var tempCount = this.totalItemCount;
                     this.viewPortInfo.startIndex = this.virtualItemStartIndex = 0;
                     this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.itemCount;
                     this.resetList(tempData, field, query);
                     this.isCustomDataUpdated = false;
+                    this.totalItemCount = this.enableVirtualization && this.dataSource instanceof DataManager ? tempCount : this.totalItemCount;
                 }
                 else {
                     var tempData = JSON.parse(JSON.stringify(this.listData));
@@ -12562,7 +12592,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         else if (this.listData && this.mainData && !dataChecks && this.allowCustomValue) {
             if (this.allowFiltering && this.isRemoteSelection && this.remoteCustomValue) {
                 this.isRemoteSelection = false;
-                this.resetList(this.listData, field, query);
+                if (!this.enableVirtualization) {
+                    this.resetList(this.listData, field, query);
+                }
             }
             else if (!this.allowFiltering && this.list) {
                 var liCollections = this.list.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-hide-listitem)');
@@ -12819,21 +12851,25 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
         var previousItem = steps >= 0 ? collection[steps + 1] : collection[0];
         if (this.enableVirtualization && isVirtualKeyAction) {
-            previousItem = steps >= 0 && this.viewPortInfo.startIndex != 0 ? this.liCollections[steps + this.skeletonCount + 1] : this.liCollections[this.skeletonCount];
+            previousItem = (this.liCollections.length >= steps && steps >= 0) ? this.liCollections[steps] : 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.isKeyBoardAction = true;
                 this.addListFocus(previousItem);
                 this.scrollTop(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')), this.keyboardEvent.keyCode);
             }
             else if (this.viewPortInfo.startIndex == 0) {
+                this.isKeyBoardAction = true;
                 this.scrollTop(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')), this.keyboardEvent.keyCode);
             }
+            this.previousFocusItem = previousItem;
         }
         else {
+            this.isKeyBoardAction = true;
             this.addListFocus(previousItem);
             this.scrollTop(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')), this.keyboardEvent.keyCode);
         }
@@ -12850,7 +12886,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         if (this.enableVirtualization && isVirtualKeyAction) {
             previousItem = steps <= list.length ? this.liCollections[steps] : this.liCollections[list.length - 1];
         }
+        this.isKeyBoardAction = true;
         this.addListFocus(previousItem);
+        this.previousFocusItem = previousItem;
         this.scrollBottom(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')), false, this.keyboardEvent.keyCode);
     };
     MultiSelect.prototype.getItems = function () {
@@ -13039,18 +13077,16 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             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);
+                    activeIndex = this.getIndexByValue(this.previousFocusItem.getAttribute('data-value')) - 1;
+                    this.pageUpSelection(activeIndex, true);
                     this.updateAriaAttribute();
                 }
                 break;
             case 34:
                 e.preventDefault();
                 if (focusedItem) {
-                    activeIndex = this.getIndexByValue(focusedItem.getAttribute('data-value'));
-                    this.pageDownSelection(activeIndex + this.getPageCount() + 1, true);
+                    activeIndex = this.getIndexByValue(this.previousFocusItem.getAttribute('data-value'));
+                    this.pageDownSelection(activeIndex, true);
                     this.updateAriaAttribute();
                 }
                 break;
@@ -13086,11 +13122,11 @@ var MultiSelect = /** @__PURE__ @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.isKeyBoardAction = true;
                     this.homeNavigation((e.keyCode === 36) ? true : false);
                     break;
                 case 33:
@@ -13104,19 +13140,22 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 case 34:
                     e.preventDefault();
                     if (focusedItem) {
-                        this.getIndexByValue(focusedItem.getAttribute('data-value'));
+                        activeIndex = this.getIndexByValue(focusedItem.getAttribute('data-value'));
                         this.pageDownSelection(activeIndex + this.getPageCount());
                         this.updateAriaAttribute();
                     }
                     return;
                 case 38:
+                    this.isKeyBoardAction = true;
                     this.arrowUp(e);
                     break;
                 case 40:
+                    this.isKeyBoardAction = true;
                     this.arrowDown(e);
                     break;
                 case 27:
                     e.preventDefault();
+                    this.isKeyBoardAction = true;
                     this.hidePopup(e);
                     if (this.mode === 'CheckBox') {
                         this.inputElement.focus();
@@ -13124,16 +13163,19 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     return;
                 case 13:
                     e.preventDefault();
+                    this.isKeyBoardAction = true;
                     if (this.mode !== 'CheckBox') {
                         this.selectByKey(e);
                     }
                     this.checkPlaceholderSize();
                     return;
                 case 32:
+                    this.isKeyBoardAction = true;
                     this.spaceKeySelection(e);
                     return;
                 case 9:
                     e.preventDefault();
+                    this.isKeyBoardAction = true;
                     this.hidePopup(e);
                     this.inputElement.focus();
                     this.overAllWrapper.classList.add(FOCUS);
@@ -13334,7 +13376,6 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                         this.isPreventKeyAction = false;
                         this.isKeyBoardAction = false;
                         this.isPreventScrollAction = false;
-                        nextOffset = nextOffset + (selectedLI.offsetHeight * liCount);
                     }
                     this.list.scrollTop = nextOffset;
                 }
@@ -13366,9 +13407,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             if (this.enableVirtualization && this.isKeyBoardAction && firstElementValue && currentElementValue === firstElementValue && keyCode != 36 && !this.isVirtualScrolling) {
                 this.isUpwardScrolling = true;
                 this.isPreventKeyAction = true;
+                this.isKeyBoardAction = false;
                 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) {
@@ -13382,7 +13423,6 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     this.isPreventKeyAction = false;
                     this.isKeyBoardAction = false;
                     this.isPreventScrollAction = false;
-                    nextOffset = nextOffset - (selectedLI.offsetHeight * liCount);
                 }
                 this.list.scrollTop = this.list.scrollTop + nextOffset;
             }
@@ -13583,7 +13623,12 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                             this.addListFocus(elements[temp]);
                         }
                         else {
-                            this.addListFocus(elements[++temp]);
+                            if (this.enableVirtualization && elements[temp + 1].classList.contains('e-virtual-list')) {
+                                this.addListFocus(elements[this.skeletonCount]);
+                            }
+                            else {
+                                this.addListFocus(elements[++temp]);
+                            }
                         }
                         if (temp > -1) {
                             this.updateCheck(elements[temp]);
@@ -13802,6 +13847,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                         removeVal = [];
                     }
                     removeVal.splice(index, 1);
+                    if (_this.enableVirtualization && _this.mode === 'CheckBox') {
+                        _this.selectedListData.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], '');
@@ -14046,6 +14094,19 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                         _this.listData = list;
                     }
                     value = _this.allowObjectBinding ? _this.getDataByValue(value) : value;
+                    if (_this.enableVirtualization) {
+                        if (isNullOrUndefined(_this.selectedListData)) {
+                            _this.selectedListData = [(_this.getDataByValue(value))];
+                        }
+                        else {
+                            if (Array.isArray(_this.selectedListData)) {
+                                _this.selectedListData.push((_this.getDataByValue(value)));
+                            }
+                            else {
+                                _this.selectedListData = [_this.selectedListData, (_this.getDataByValue(value))];
+                            }
+                        }
+                    }
                     if ((_this.enableVirtualization && value) || !_this.enableVirtualization) {
                         _this.updateListSelectEventCallback(value, element, eve);
                     }
@@ -14237,7 +14298,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     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;
+                        this.totalItemsCount();
                     }
                     if (!this.list.querySelector('.e-virtual-ddl')) {
                         var virualElement = this.createElement('div', {
@@ -14330,6 +14391,13 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                         }
                         _this.isPreventScrollAction = true;
                         _this.setScrollPosition();
+                        if (!_this.list.classList.contains(dropDownBaseClasses.noData) && _this.getItems()[1] && _this.getItems()[1].offsetHeight !== 0) {
+                            _this.listItemHeight = _this.getItems()[1].offsetHeight;
+                            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();
+                            }
+                        }
                         if (_this.allowFiltering) {
                             _this.notify('inputFocus', {
                                 module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox', value: 'focus'
@@ -14435,13 +14503,17 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             sentinelInfo: {},
             offsets: {},
             startIndex: 0,
-            endIndex: 0,
+            endIndex: this.itemCount,
         };
         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;
+            if (this.remoteDataCount >= 0) {
+                this.totalItemCount = this.dataCount = this.remoteDataCount;
+            }
+            else {
+                this.resetList(this.dataSource);
+            }
         }
         else {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -14583,7 +14655,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             EventHandler.add(formElement, 'reset', this.resetValueHandler, this);
         }
         EventHandler.add(this.componentWrapper, 'mouseout', this.mouseOut, this);
-        EventHandler.add(this.overAllClear, 'mouseup', this.clearAll, this);
+        EventHandler.add(this.overAllClear, 'mousedown', this.clearAll, this);
         EventHandler.add(this.inputElement, 'paste', this.pasteHandler, this);
     };
     MultiSelect.prototype.onInput = function (e) {
@@ -14627,9 +14699,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 if (this.allowCustomValue) {
                     this.isRemoteSelection = true;
                 }
-                if (!this.backCommand) {
-                    this.checkAndResetCache();
-                }
+                this.checkAndResetCache();
                 var eventArgs_1 = {
                     preventDefaultAction: false,
                     text: this.targetElement(),
@@ -14658,12 +14728,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 var query = new Query();
                 query = this.allowFiltering && (text !== '') ? query.where(this.fields.text, 'startswith', text, this.ignoreCase, this.ignoreAccent) : query;
                 if (this.enableVirtualization) {
-                    if (this.dataSource instanceof DataManager) {
-                        this.dataUpdater(this.virtualGroupDataSource, query, this.fields);
-                    }
-                    else {
-                        this.dataUpdater(this.dataSource, query, this.fields);
-                    }
+                    this.dataUpdater(this.dataSource, query, this.fields);
                 }
                 else {
                     this.dataUpdater(this.mainData, query, this.fields);
@@ -14891,7 +14956,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         this.unwireListEvents();
         this.wireListEvents();
     };
-    MultiSelect.prototype.initialValueUpdate = function (listItems) {
+    MultiSelect.prototype.initialValueUpdate = function (listItems, isInitialVirtualData) {
         if (this.list) {
             var text = void 0;
             var element = void 0;
@@ -14911,11 +14976,24 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                             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]);
+                                    if (this.enableVirtualization) {
+                                        if (isNullOrUndefined(this.selectedListData)) {
+                                            this.selectedListData = [listItems[i]];
+                                        }
+                                        else {
+                                            if (Array.isArray(this.selectedListData)) {
+                                                this.selectedListData.push((listItems[i]));
+                                            }
+                                            else {
+                                                this.selectedListData = [this.selectedListData, (listItems[i])];
+                                            }
+                                        }
+                                    }
                                     break;
                                 }
                             }
                         }
-                        if (isNullOrUndefined(text) && this.allowCustomValue) {
+                        if ((isNullOrUndefined(text) && this.allowCustomValue) && ((!(this.dataSource instanceof DataManager)) || (this.dataSource instanceof DataManager && isInitialVirtualData))) {
                             text = this.getTextByValue(value);
                             isCustomData = true;
                         }
@@ -14933,13 +15011,15 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                         this.addChip(text, value);
                         this.addListSelection(element);
                     }
-                    else if (value && this.allowCustomValue) {
+                    else if ((!this.enableVirtualization && value && this.allowCustomValue) || ((this.enableVirtualization && value && this.allowCustomValue) && ((!(this.dataSource instanceof DataManager)) || (this.dataSource instanceof DataManager && isInitialVirtualData)))) {
                         var indexItem = this.listData.length;
                         var newValue = {};
                         setValue(this.fields.text, value, newValue);
                         setValue(this.fields.value, value, newValue);
                         var noDataEle = this.popupWrapper.querySelector('.' + dropDownBaseClasses.noData);
-                        this.addItem(newValue, indexItem);
+                        if (!this.enableVirtualization) {
+                            this.addItem(newValue, indexItem);
+                        }
                         if (this.enableVirtualization) {
                             if (this.virtualCustomSelectData && this.virtualCustomSelectData.length >= 0) {
                                 this.virtualCustomSelectData.push(newValue);
@@ -16277,8 +16357,12 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     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;
+            if (this.remoteDataCount >= 0) {
+                dataSourceCount = this.totalItemCount = this.dataCount = this.remoteDataCount;
+            }
+            else {
+                this.resetList(this.dataSource);
+            }
         }
         else {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -16288,7 +16372,26 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             this.totalItemCount = dataSourceCount != 0 ? dataSourceCount : this.totalItemCount;
         }
         else {
-            this.totalItemCount = dataSourceCount != 0 ? dataSourceCount - this.value.length : this.totalItemCount;
+            if (this.hideSelectedItem) {
+                this.totalItemCount = dataSourceCount != 0 && this.value ? dataSourceCount - this.value.length : this.totalItemCount;
+                if (this.allowCustomValue && this.virtualCustomSelectData && this.virtualCustomSelectData.length > 0) {
+                    for (var i = 0; i < this.virtualCustomSelectData.length; i++) {
+                        for (var j = 0; j < this.value.length; j++) {
+                            var value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value[j]) : this.value[j];
+                            var customValue = getValue((this.fields.value) ? this.fields.value : '', this.virtualCustomSelectData[i]);
+                            if (value === customValue) {
+                                this.totalItemCount += 1;
+                            }
+                        }
+                    }
+                }
+            }
+            else {
+                this.totalItemCount = dataSourceCount != 0 ? dataSourceCount : this.totalItemCount;
+                if (this.allowCustomValue && this.virtualCustomSelectData && this.virtualCustomSelectData.length > 0) {
+                    this.totalItemCount += this.virtualCustomSelectData.length;
+                }
+            }
         }
     };
     MultiSelect.prototype.presentItemValue = function (ulElement) {
@@ -16327,7 +16430,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 valuecheck = this.presentItemValue(this.ulElement);
             }
             if (prop == 'value' && valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
-                && this.listData != null) {
+                && this.listData != null && !this.enableVirtualization) {
                 this.mainData = null;
                 this.setDynValue = true;
                 this.addNonPresentItems(valuecheck, this.ulElement, this.listData);
@@ -16346,7 +16449,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
                     this.onActionComplete(list, this.mainData);
                 }
-                this.initialValueUpdate();
+                if (!this.enableVirtualization || (this.enableVirtualization && (!(this.dataSource instanceof DataManager)))) {
+                    this.initialValueUpdate();
+                }
                 if (this.mode !== 'Box' && !this.inputFocus) {
                     this.updateDelimView();
                 }
@@ -16399,6 +16504,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     }
                     _this.beforePopupOpen = false;
                     _this.overAllWrapper.classList.remove(iconAnimation);
+                    var typedValue = _this.mode == 'CheckBox' ? _this.targetElement() : null;
                     _this.popupObj.hide(new Animation(eventArgs.animation));
                     attributes(_this.inputElement, { 'aria-expanded': 'false' });
                     _this.inputElement.removeAttribute('aria-owns');
@@ -16412,22 +16518,27 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     if (_this.mode === 'CheckBox' && _this.showSelectAll) {
                         EventHandler.remove(_this.popupObj.element, 'click', _this.clickHandler);
                     }
-                    if (_this.enableVirtualization && _this.mode === 'CheckBox' && _this.enableSelectionOrder) {
+                    if (_this.enableVirtualization && _this.mode === 'CheckBox' && _this.value && _this.value.length > 0 && _this.enableSelectionOrder) {
                         _this.viewPortInfo.startIndex = _this.virtualItemStartIndex = 0;
                         _this.viewPortInfo.endIndex = _this.virtualItemEndIndex = _this.viewPortInfo.startIndex > 0 ? _this.viewPortInfo.endIndex : _this.itemCount;
+                        _this.virtualListInfo = _this.viewPortInfo;
                         _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;
+                        if (_this.remoteDataCount >= 0) {
+                            _this.totalItemCount = _this.dataCount = _this.remoteDataCount;
+                        }
+                        else {
+                            _this.resetList(_this.dataSource);
+                        }
                     }
                     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) {
+                    if (_this.enableVirtualization && (_this.allowFiltering || _this.allowCustomValue) && (_this.targetElement() || typedValue) && _this.totalItemCount !== dataSourceCount) {
                         _this.updateInitialData();
                         _this.checkAndResetCache();
                     }
@@ -16762,8 +16873,12 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 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;
+                        if (e.result.length > 0) {
+                            listItems_2 = e.result;
+                            _this.initStatus = false;
+                            _this.initialValueUpdate(listItems_2, true);
+                            _this.initialUpdate();
+                            _this.initStatus = true;
                         }
                     });
                 }
@@ -16778,7 +16893,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             else {
                 this.setInitialValue = function () {
                     _this.initStatus = false;
-                    _this.initialValueUpdate(listItems_2);
+                    if (!_this.enableVirtualization || (_this.enableVirtualization && (!(_this.dataSource instanceof DataManager)))) {
+                        _this.initialValueUpdate(listItems_2);
+                    }
                     _this.initialUpdate();
                     _this.setInitialValue = null;
                     _this.initStatus = true;
@@ -18146,12 +18263,14 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
             else {
                 scrollParent = wrapper;
             }
-            boundRect = scrollParent.getBoundingClientRect();
-            if ((boundRect.y + scrollParent.offsetHeight) - (event.clientY + scrollMoved) < 1) {
-                this.timer = window.setInterval(function () { _this.setScrollDown(scrollParent, scrollHeight, true); }, 70);
-            }
-            else if ((event.clientY - scrollMoved) - boundRect.y < 1) {
-                this.timer = window.setInterval(function () { _this.setScrollDown(scrollParent, scrollHeight, false); }, 70);
+            if (scrollParent) {
+                boundRect = scrollParent.getBoundingClientRect();
+                if ((boundRect.y + scrollParent.offsetHeight) - (event.clientY + scrollMoved) < 1) {
+                    this.timer = window.setInterval(function () { _this.setScrollDown(scrollParent, scrollHeight, true); }, 70);
+                }
+                else if ((event.clientY - scrollMoved) - boundRect.y < 1) {
+                    this.timer = window.setInterval(function () { _this.setScrollDown(scrollParent, scrollHeight, false); }, 70);
+                }
             }
         }
         if (args.target === null) {
@@ -18574,6 +18693,9 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
         if (this.listData.length === 0) {
             this.l10nUpdate();
         }
+        if (this.listData.length !== this.sortedData.length) {
+            this.sortedData = this.listData;
+        }
         this.value = [];
         this.updateToolBarState();
     };
@@ -19296,6 +19418,9 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
         var jsonData = [].slice.call(tListBox.jsonData);
         var isRefresh = tListBox.sortOrder !== 'None' || (tListBox.selectionSettings.showCheckbox !==
             fListBox.selectionSettings.showCheckbox) || tListBox.fields.groupBy || tListBox.itemTemplate || fListBox.itemTemplate;
+        var tempLiColl = [];
+        var tempData = [];
+        var flistboxarray = [];
         this.removeSelected(fListBox, fListBox.getSelectedItems());
         var tempItems = [].slice.call(fListBox.listData);
         var localDataArgs = { cancel: false, items: tempItems, eventName: this.toolbarAction };
@@ -19309,29 +19434,43 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
                 tListBox.ulElement.removeChild(noRecElem);
             }
         }
-        if (isRefresh) {
-            var noRecElem = fListBox.ulElement.childNodes[0];
-            if (noRecElem) {
-                fListBox.ulElement.removeChild(noRecElem);
+        if (fListBox.listData.length > 0) {
+            // eslint-disable-next-line prefer-spread
+            flistboxarray = Array.apply(null, { length: fListBox.ulElement.childElementCount }).map(Number.call, Number);
+        }
+        var _loop_3 = function (i) {
+            if (fListBox.ulElement.childNodes[i].classList.contains('e-disabled')) {
+                flistboxarray = flistboxarray.filter(function (item) { return item !== i; });
+                tempLiColl.push(fListBox.ulElement.childNodes[i]);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                tempData.push(fListBox.listData[i]);
             }
+        };
+        for (var i = 0; i < fListBox.ulElement.childElementCount; i++) {
+            _loop_3(i);
         }
-        moveTo(fListBox.ulElement, tListBox.ulElement, 
-        // eslint-disable-next-line prefer-spread
-        Array.apply(null, { length: fListBox.ulElement.childElementCount }).map(Number.call, Number), index);
+        moveTo(fListBox.ulElement, tListBox.ulElement, flistboxarray, index);
         this.trigger('actionComplete', { items: tempItems, eventName: this.toolbarAction });
         if (isKey) {
             this.list.focus();
         }
         index = (index) ? index : listData.length;
-        for (var i = 0; i < fListBox.listData.length; i++) {
-            listData.splice(index + i, 0, fListBox.listData[i]);
+        for (var i = 0; i < flistboxarray.length; i++) {
+            listData.splice(index + i, 0, fListBox.listData[flistboxarray[i]]);
         }
-        for (var i = 0; i < fListBox.jsonData.length; i++) {
-            jsonData.splice(index + i, 0, fListBox.jsonData[i]);
+        for (var i = 0; i < flistboxarray.length; i++) {
+            jsonData.splice(index + i, 0, fListBox.jsonData[flistboxarray[i]]);
+        }
+        var fliCollections = [];
+        if (tempLiColl.length > 0) {
+            fListBox.liCollections = tempLiColl;
+            fliCollections = [].slice.call(fListBox.liCollections);
+        }
+        else {
+            fliCollections = [].slice.call(fListBox.liCollections);
+            fListBox.liCollections = [];
         }
-        var fliCollections = [].slice.call(fListBox.liCollections);
         var tliCollections = [].slice.call(tListBox.liCollections);
-        fListBox.liCollections = [];
         if (index) {
             var toColl = tliCollections.splice(0, index);
             tListBox.liCollections = toColl.concat(fliCollections).concat(tliCollections);
@@ -19340,6 +19479,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
             tListBox.liCollections = tliCollections.concat(fliCollections);
         }
         fListBox.value = [];
+        listData = listData.filter(function (data) { return (data !== undefined); });
         listData = listData
             .filter(function (data) { return data.isHeader !== true; });
         var sortedData = listData.filter(function (val) {
@@ -19351,7 +19491,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
         }
         tListBox.listData = listData;
         if (fListBox.listData.length === fListBox.jsonData.length) {
-            fListBox.listData = fListBox.sortedData = fListBox.jsonData = [];
+            fListBox.listData = fListBox.sortedData = fListBox.jsonData = tempData;
         }
         else if (fListBox.allowFiltering) {
             for (var i = 0; i < fListBox.listData.length; i++) {
@@ -19372,6 +19512,11 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
             tListBox.sortedData = listData;
         }
         fListBox.updateSelectedOptions();
+        if (tempLiColl.length > 0) {
+            var wrap = this.list.parentElement.getElementsByClassName('e-listbox-tool')[0];
+            var btn = wrap.querySelector('[data-value="' + this.toolbarAction + '"]');
+            btn.disabled = true;
+        }
         if (fListBox.listData.length === 0) {
             fListBox.l10nUpdate();
         }
@@ -19592,6 +19737,9 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
                             if (!args.cancel && !_this.isCustomFiltering && !args.preventDefaultAction) {
                                 _this.inputString = _this.filterInput.value;
                                 _this.filteringAction(_this.jsonData, new Query(), _this.fields);
+                                if (_this.toolbarSettings.items.length > 0) {
+                                    _this.updateToolBarState();
+                                }
                             }
                             if (!_this.isFiltered && !_this.isCustomFiltering && !args.preventDefaultAction) {
                                 _this.dataUpdater(_this.jsonData, new Query(), _this.fields);