@syncfusion/ej2-dropdowns 25.1.40 → 25.2.3

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

@@ -391,9 +391,10 @@ class VirtualScroll {
                         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 {
@@ -416,9 +417,10 @@ class VirtualScroll {
                     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 {
@@ -429,6 +431,7 @@ class VirtualScroll {
                 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;
             }
@@ -450,6 +453,7 @@ class VirtualScroll {
                             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;
@@ -471,6 +475,7 @@ class VirtualScroll {
                                 else {
                                     query = query.skip(this.parent.viewPortInfo.startIndex);
                                 }
+                                this.parent.setCurrentView = false;
                                 this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
                                 isResetListCalled = true;
                             }
@@ -482,6 +487,7 @@ class VirtualScroll {
                         currentData.push(alreadyAddedData[0]);
                     }
                 }
+                this.parent.setCurrentView = false;
             }
         }
         if (!isResetListCalled && isListUpdated) {
@@ -549,6 +555,7 @@ class VirtualScroll {
         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();
@@ -558,7 +565,9 @@ class VirtualScroll {
                 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();
+        }
     }
     dataProcessAsync(isOpenPopup) {
         this.parent.selectedValueInfo = null;
@@ -586,7 +595,7 @@ class VirtualScroll {
                 }
             }
             yield this.dataProcessAsync();
-            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) {
@@ -801,9 +810,10 @@ let DropDownBase = class DropDownBase extends Component {
         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;
@@ -830,7 +840,6 @@ let DropDownBase = class DropDownBase extends Component {
         this.appendUncheckList = false;
         this.getInitialData = false;
         this.preventPopupOpen = true;
-        this.customFilterQuery = new Query();
         this.virtualListInfo = {
             currentPageNumber: null,
             direction: null,
@@ -1103,10 +1112,9 @@ let DropDownBase = class DropDownBase extends Component {
         this.virtualListInfo = this.viewPortInfo;
     }
     getFilteringSkeletonCount() {
-        const difference = this.dataCount - this.viewPortInfo.endIndex;
         const currentSkeletonCount = this.skeletonCount;
         this.getSkeletonCount(true);
-        this.skeletonCount = this.dataCount > this.itemCount * 2 ? this.skeletonCount : difference > this.skeletonCount ? this.skeletonCount : difference > 0 ? difference : 0;
+        this.skeletonCount = this.dataCount > this.itemCount * 2 ? this.skeletonCount : 0;
         let skeletonUpdated = true;
         if ((this.getModuleName() === 'autocomplete' || this.getModuleName() === 'multiselect') && (this.totalItemCount < (this.itemCount * 2))) {
             this.skeletonCount = 0;
@@ -1140,10 +1148,10 @@ let DropDownBase = class DropDownBase extends Component {
     getSkeletonCount(retainSkeleton) {
         this.virtualListHeight = this.listContainerHeight != null ? parseInt(this.listContainerHeight, 10) : this.virtualListHeight;
         const actualCount = this.virtualListHeight > 0 ? Math.floor(this.virtualListHeight / this.listItemHeight) : 0;
-        this.skeletonCount = actualCount * 2 < this.itemCount ? this.itemCount : actualCount * 2;
+        this.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);
     }
     GetVirtualTrackHeight() {
         let height = this.totalItemCount === this.viewPortInfo.endIndex ? this.totalItemCount * this.listItemHeight - this.itemCount * this.listItemHeight : this.totalItemCount * this.listItemHeight;
@@ -1366,41 +1374,53 @@ let DropDownBase = class DropDownBase extends Component {
                 if (!eventArgs.cancel) {
                     this.isRequesting = true;
                     this.showSpinner();
-                    if (dataSource instanceof DataManager && !this.virtualGroupDataSource) {
+                    if (dataSource instanceof DataManager) {
                         this.isRequested = true;
+                        let isWhereExist = false;
                         if (this.isDataFetched) {
                             this.emptyDataRequest(fields);
                             return;
                         }
                         eventArgs.data.executeQuery(this.getQuery(eventArgs.query)).then((e) => {
                             this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;
-                            this.trigger('actionComplete', e, (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;
+                            let isReOrder = true;
+                            if (!this.virtualSelectAll) {
+                                let newQuery = this.getQuery(eventArgs.query);
+                                for (let queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
+                                    if (newQuery.queries[queryElements].fn === 'onWhere') {
+                                        isWhereExist = true;
                                     }
-                                    if (e.result.length > 0) {
-                                        let dataSource = e.result;
-                                        if (this.isVirtualizationEnabled && this.fields.groupBy) {
-                                            let data = new DataManager(dataSource).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 (let queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
+                                            if (newQuery.queries[queryElements].fn === 'onTake') {
+                                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                                newQuery.queries[queryElements].e.nos = e.count;
+                                            }
+                                            if (this.getModuleName() === 'multiselect' && (newQuery.queries[queryElements].e.condition == 'or' || newQuery.queries[queryElements].e.operator == 'equal')) {
+                                                isReOrder = false;
+                                            }
                                         }
-                                        else {
-                                            this.virtualGroupDataSource = dataSource;
-                                            this.hideSpinner();
-                                            this.isRequested = false;
-                                            this.isRequesting = false;
-                                            this.setListData(dataSource, fields, query, event);
-                                            return;
+                                    }
+                                }
+                                else {
+                                    this.isVirtualTrackHeight = false;
+                                    if (newQuery) {
+                                        for (let queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
+                                            if (this.getModuleName() === 'multiselect' && ((newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.condition == 'or') || (newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.operator == 'equal'))) {
+                                                isReOrder = false;
+                                            }
                                         }
                                     }
-                                    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, (e) => {
                                 if (!e.cancel) {
                                     this.isRequesting = false;
                                     const listItems = e.result;
@@ -1408,12 +1428,16 @@ let DropDownBase = class DropDownBase extends Component {
                                         ulElement = this.renderItems(listItems, fields);
                                         return;
                                     }
-                                    if (listItems.length === 0) {
+                                    if ((!this.isVirtualizationEnabled && listItems.length === 0) || (this.isVirtualizationEnabled && listItems.length === 0 && !isWhereExist)) {
                                         this.isDataFetched = true;
                                     }
+                                    if (!isWhereExist) {
+                                        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);
@@ -1426,6 +1450,17 @@ let DropDownBase = class DropDownBase extends Component {
                                         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((e) => {
@@ -1462,7 +1497,7 @@ let DropDownBase = class DropDownBase extends Component {
                                     }
                                     if (isReOrder) {
                                         listItems = (newQuery).executeLocal(dataManager);
-                                        this.isVirtualTrackHeight = true;
+                                        this.isVirtualTrackHeight = (!(this.dataSource instanceof DataManager) && !this.isCustomDataUpdated) ? true : false;
                                     }
                                 }
                             }
@@ -1477,7 +1512,7 @@ let DropDownBase = class DropDownBase extends Component {
                                 }
                             }
                         }
-                        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;
                         }
@@ -1514,6 +1549,9 @@ let DropDownBase = class DropDownBase extends Component {
             });
         }
     }
+    handleVirtualKeyboardActions(e, pageCount) {
+        // Used this method in component side.
+    }
     updatePopupState() {
         // Used this method in component side.
     }
@@ -1624,6 +1662,9 @@ let DropDownBase = class DropDownBase extends Component {
                         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)) {
@@ -1767,29 +1808,15 @@ let DropDownBase = class DropDownBase extends Component {
         const topIndex = Math.round(target.scrollTop / liHeight);
         const liCollections = this.list.querySelectorAll('li' + ':not(.e-hide-listitem)');
         let virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
-        let count = 0;
-        let isCount = false;
         for (let i = topIndex; i > -1; i--) {
             const index = this.isVirtualizationEnabled ? i + virtualListCount : i;
             if (this.isVirtualizationEnabled) {
-                const groupListLength = this.list.querySelectorAll('.e-list-group-item').length;
-                let 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;
+                        
                     }
                 }
             }
@@ -2245,7 +2272,7 @@ let DropDownBase = class DropDownBase extends Component {
             }
         }
         const itemsCount = this.getItems().length;
-        const isListboxEmpty = itemsCount === 0;
+        let isListboxEmpty = itemsCount === 0;
         const selectedItemValue = this.list.querySelector('.' + dropDownBaseClasses.selected);
         items = (items instanceof Array ? items : [items]);
         let index;
@@ -2294,6 +2321,7 @@ let DropDownBase = class DropDownBase extends Component {
             }
             if (this.getModuleName() === 'listbox') {
                 this.updateActionCompleteData(li, item, isListboxEmpty ? null : index);
+                isListboxEmpty = true;
             }
             else {
                 this.updateActionCompleteData(li, item, index);
@@ -2341,7 +2369,7 @@ let DropDownBase = class DropDownBase extends Component {
                     }
                 }
                 else {
-                    if (this.liCollections[index]) {
+                    if (this.liCollections[index] && this.liCollections[index].parentNode) {
                         this.liCollections[index].parentNode.insertBefore(liCollections[i], this.liCollections[index]);
                     }
                     else {
@@ -3384,8 +3412,11 @@ let DropDownList = class DropDownList extends DropDownBase {
         const 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) {
                 let 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);
             }
         }
@@ -3422,7 +3453,13 @@ let DropDownList = class DropDownList extends DropDownBase {
                 }
             }
             if (!isNullOrUndefined(nextItem)) {
+                const 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) {
+                    let 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') {
@@ -3549,14 +3586,13 @@ let DropDownList = class DropDownList extends DropDownBase {
                 }
                 break;
             case 'pageUp':
-                let 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':
@@ -3593,8 +3629,8 @@ let DropDownList = class DropDownList extends DropDownBase {
     }
     pageUpSelection(steps, event, isVirtualKeyAction) {
         let 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];
@@ -3626,7 +3662,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             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);
@@ -3811,6 +3847,11 @@ let DropDownList = class DropDownList extends DropDownBase {
             }
         }
         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);
         }
     }
@@ -3870,7 +3911,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             if (this.enableVirtualization && this.value) {
                 const fields = (this.fields.value) ? this.fields.value : '';
                 let currentValue = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
-                if (this.dataSource instanceof DataManager && this.virtualGroupDataSource) {
+                if (this.dataSource instanceof DataManager) {
                     const getItem = new DataManager(this.virtualGroupDataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', currentValue)));
                     if (getItem && getItem.length > 0) {
                         this.itemData = getItem[0];
@@ -4212,7 +4253,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             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 !== '')) {
                 const fields = (this.fields.text) ? this.fields.text : '';
                 filterQuery.where(fields, filterType, this.typedString, this.ignoreCase, this.ignoreAccent);
             }
@@ -4220,7 +4261,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         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) {
@@ -4287,14 +4328,6 @@ let DropDownList = class DropDownList extends DropDownBase {
             }
             filterQuery.requiresCount();
         }
-        else if (this.enableVirtualization && (this.dataSource instanceof DataManager && !this.virtualGroupDataSource)) {
-            for (let 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;
     }
     getSelectionPoints() {
@@ -4320,7 +4353,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                         return;
                     }
                     this.isCustomFilter = true;
-                    this.customFilterQuery = query;
+                    this.customFilterQuery = query.clone();
                     this.filteringAction(dataSource, query, fields);
                 },
                 baseEventArgs: e,
@@ -4620,6 +4653,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                     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) {
@@ -4720,7 +4756,7 @@ let DropDownList = class DropDownList extends DropDownBase {
     }
     focusIndexItem() {
         const value = this.getItemData().value;
-        this.activeIndex = this.getIndexByValue(value);
+        this.activeIndex = ((this.enableVirtualization && !isNullOrUndefined(value)) || !this.enableVirtualization) ? this.getIndexByValue(value) : this.activeIndex;
         const element = this.findListElement(this.list, 'li', 'data-value', value);
         this.selectedLI = element;
         this.activeItem(element);
@@ -5134,7 +5170,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                         }
                         else {
                             if (this.enableVirtualization) {
-                                liCount = keyAction == "pageDown" ? this.getPageCount() : liCount;
+                                liCount = keyAction == "pageDown" ? this.getPageCount() + 1 : liCount;
                             }
                             this.list.scrollTop += this.selectedLI.offsetHeight * liCount;
                         }
@@ -5153,7 +5189,6 @@ let DropDownList = class DropDownList extends DropDownBase {
                             this.isPreventKeyAction = false;
                             this.isKeyBoardAction = false;
                             this.isPreventScrollAction = false;
-                            nextOffset = nextOffset + (this.selectedLI.offsetHeight * liCount);
                         }
                         this.list.scrollTop = nextOffset;
                     }
@@ -5210,7 +5245,6 @@ let DropDownList = class DropDownList extends DropDownBase {
                         this.isPreventKeyAction = false;
                         this.isKeyBoardAction = false;
                         this.isPreventScrollAction = false;
-                        nextOffset = nextOffset - (this.selectedLI.offsetHeight * liCount);
                     }
                     this.list.scrollTop = this.list.scrollTop + nextOffset;
                 }
@@ -5403,7 +5437,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             sentinelInfo: {},
             offsets: {},
             startIndex: 0,
-            endIndex: 0,
+            endIndex: this.itemCount,
         };
         if (this.getModuleName() === 'combobox') {
             this.typedString = "";
@@ -5411,8 +5445,12 @@ let DropDownList = class DropDownList extends DropDownBase {
         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
@@ -9817,7 +9855,7 @@ let ComboBox = class ComboBox extends DropDownList {
             if (this.enableVirtualization && this.value) {
                 const fields = (this.fields.value) ? this.fields.value : '';
                 let currentValue = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
-                if (this.dataSource instanceof DataManager && this.virtualGroupDataSource) {
+                if (this.dataSource instanceof DataManager) {
                     const getItem = new DataManager(this.virtualGroupDataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', currentValue)));
                     if (getItem && getItem.length > 0) {
                         this.itemData = getItem[0];
@@ -10727,7 +10765,7 @@ let AutoComplete = class AutoComplete extends ComboBox {
             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 {
                 const mapping = !isNullOrUndefined(this.fields.value) ? this.fields.value : '';
                 filterQuery.where(mapping, filterType, queryString, this.ignoreCase, this.ignoreAccent);
             }
@@ -10743,7 +10781,7 @@ let AutoComplete = class AutoComplete extends ComboBox {
             }
             filterQuery.take(this.suggestionCount);
         }
-        if (this.enableVirtualization && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource))) {
+        if (this.enableVirtualization) {
             let queryTakeValue = 0;
             let querySkipValue = 0;
             var takeValue = this.getTakeValue();
@@ -10793,14 +10831,6 @@ let AutoComplete = class AutoComplete extends ComboBox {
             }
             filterQuery.requiresCount();
         }
-        else if (this.enableVirtualization && (this.dataSource instanceof DataManager && !this.virtualGroupDataSource)) {
-            for (let 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;
     }
     searchLists(e) {
@@ -11579,10 +11609,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 attributes(this.inputElement, { 'aria-expanded': 'true', 'aria-owns': this.element.id + '_popup', 'aria-controls': this.element.id });
                 this.updateAriaActiveDescendant();
                 if (this.isFirstClick) {
-                    if (this.enableVirtualization && this.mode === 'CheckBox' && this.value && this.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);
@@ -11592,7 +11621,12 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     }
     updateVirtualReOrderList(isCheckBoxUpdate) {
         let 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;
@@ -11649,6 +11683,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         if (this.enableVirtualization) {
             const focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
+            this.isKeyBoardAction = false;
             this.scrollBottom(focusedItem);
         }
     }
@@ -11766,15 +11801,15 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     getForQuery(valuecheck, isCheckbox) {
         let predicate;
         const field = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;
-        if (this.enableVirtualization) {
+        if (this.enableVirtualization && valuecheck) {
             if (isCheckbox) {
                 for (let i = 0; i < valuecheck.length; i++) {
                     const value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', valuecheck[i]) : valuecheck[i];
                     if (i === 0) {
-                        predicate = new Predicate(field, 'equal', value);
+                        predicate = new Predicate(field, 'equal', (value));
                     }
                     else {
-                        predicate = predicate.or(field, 'equal', value);
+                        predicate = predicate.or(field, 'equal', (value));
                     }
                 }
                 return new Query().where(predicate);
@@ -11783,10 +11818,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 for (let i = 0; i < valuecheck.length; i++) {
                     const value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', valuecheck[i]) : valuecheck[i];
                     if (i === 0) {
-                        predicate = new Predicate(field, 'notequal', value);
+                        predicate = new Predicate(field, 'notequal', (value));
                     }
                     else {
-                        predicate = predicate.and(field, 'notequal', value);
+                        predicate = predicate.and(field, 'notequal', (value));
                     }
                 }
                 return new Query().where(predicate);
@@ -11836,7 +11871,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             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 {
@@ -11847,6 +11882,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             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();
@@ -11891,7 +11927,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             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) {
@@ -12094,7 +12132,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 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) {
                     const fields = this.fields;
                     filterQuery.where(!isNullOrUndefined(fields.text) ? fields.text : '', this.filterType, this.targetElement(), this.ignoreCase, this.ignoreAccent);
                 }
@@ -12105,18 +12143,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             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 (let 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();
         }
     }
@@ -12279,7 +12308,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 let dataItem = {};
                 setValue(field.text, value, dataItem);
                 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);
                 }
                 else {
@@ -12296,17 +12325,19 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 dataItem = this.allowObjectBinding ? emptyObject : dataItem;
                 if (this.enableVirtualization) {
                     this.virtualCustomData = dataItem;
-                    let tempData = this.virtualGroupDataSource ? JSON.parse(JSON.stringify(this.virtualGroupDataSource)) : JSON.parse(JSON.stringify(this.dataSource));
+                    let tempData = this.dataSource instanceof DataManager ? JSON.parse(JSON.stringify(this.listData)) : JSON.parse(JSON.stringify(this.dataSource));
                     let totalData = [];
                     if (this.virtualCustomSelectData && this.virtualCustomSelectData.length > 0) {
                         totalData = tempData.concat(this.virtualCustomSelectData);
                     }
                     tempData.splice(0, 0, dataItem);
                     this.isCustomDataUpdated = true;
+                    let 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 {
                     const tempData = JSON.parse(JSON.stringify(this.listData));
@@ -12327,7 +12358,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         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) {
                 const liCollections = this.list.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-hide-listitem)');
@@ -12584,21 +12617,25 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
         let previousItem = steps >= 0 ? collection[steps + 1] : collection[0];
         if (this.enableVirtualization && isVirtualKeyAction) {
-            previousItem = steps >= 0 && this.viewPortInfo.startIndex != 0 ? this.liCollections[steps + this.skeletonCount + 1] : this.liCollections[this.skeletonCount];
+            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);
         }
@@ -12615,7 +12652,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         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);
     }
     getItems() {
@@ -12803,18 +12842,16 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             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;
@@ -12850,11 +12887,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         else if (this.isPopupOpen()) {
             const focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
             let activeIndex;
-            this.isKeyBoardAction = true;
             switch (e.keyCode) {
                 case 36:
                 case 35:
                     this.isMouseScrollAction = true;
+                    this.isKeyBoardAction = true;
                     this.homeNavigation((e.keyCode === 36) ? true : false);
                     break;
                 case 33:
@@ -12868,19 +12905,22 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 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();
@@ -12888,16 +12928,19 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     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);
@@ -13096,7 +13139,6 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         this.isPreventKeyAction = false;
                         this.isKeyBoardAction = false;
                         this.isPreventScrollAction = false;
-                        nextOffset = nextOffset + (selectedLI.offsetHeight * liCount);
                     }
                     this.list.scrollTop = nextOffset;
                 }
@@ -13127,9 +13169,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             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) {
@@ -13143,7 +13185,6 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     this.isPreventKeyAction = false;
                     this.isKeyBoardAction = false;
                     this.isPreventScrollAction = false;
-                    nextOffset = nextOffset - (selectedLI.offsetHeight * liCount);
                 }
                 this.list.scrollTop = this.list.scrollTop + nextOffset;
             }
@@ -13344,7 +13385,12 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                             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]);
@@ -13561,6 +13607,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         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) {
                         let currentText = index == 0 ? this.text.replace(this.text.split(this.delimiterChar)[index] + this.delimiterChar, '') : this.text.replace(this.delimiterChar + this.text.split(this.delimiterChar)[index], '');
@@ -13799,6 +13848,19 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         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);
                     }
@@ -13988,7 +14050,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     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', {
@@ -14081,6 +14143,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         }
                         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'
@@ -14186,13 +14255,17 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             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
@@ -14334,7 +14407,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             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);
     }
     onInput(e) {
@@ -14376,9 +14449,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 if (this.allowCustomValue) {
                     this.isRemoteSelection = true;
                 }
-                if (!this.backCommand) {
-                    this.checkAndResetCache();
-                }
+                this.checkAndResetCache();
                 const eventArgs = {
                     preventDefaultAction: false,
                     text: this.targetElement(),
@@ -14407,12 +14478,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 let 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);
@@ -14571,6 +14637,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                             let textValues = this.text != null && this.text != "" ? this.text + ',' + temp : temp;
                             data += temp + delimiterChar + ' ';
                             text.push(textValues);
+                            hiddenElementContent += `<option selected value="${valueItem}">${index}</option>`;
                             break;
                         }
                         else {
@@ -14640,7 +14707,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.unwireListEvents();
         this.wireListEvents();
     }
-    initialValueUpdate(listItems) {
+    initialValueUpdate(listItems, isInitialVirtualData) {
         if (this.list) {
             let text;
             let element;
@@ -14660,11 +14727,24 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                             for (let i = 0; i < listItems.length; i++) {
                                 if (getValue((this.fields.value ? this.fields.value : 'value'), listItems[i]) === value) {
                                     text = getValue(this.fields.text, listItems[i]);
+                                    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;
                         }
@@ -14682,13 +14762,15 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         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)))) {
                         const indexItem = this.listData.length;
                         const newValue = {};
                         setValue(this.fields.text, value, newValue);
                         setValue(this.fields.value, value, newValue);
                         const 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);
@@ -16020,8 +16102,12 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     totalItemsCount() {
         let dataSourceCount;
         if (this.dataSource instanceof DataManager) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            dataSourceCount = this.virtualGroupDataSource && this.virtualGroupDataSource.length ? this.virtualGroupDataSource.length : 0;
+            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
@@ -16031,7 +16117,26 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             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 (let i = 0; i < this.virtualCustomSelectData.length; i++) {
+                        for (let j = 0; j < this.value.length; j++) {
+                            const value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value[j]) : this.value[j];
+                            const 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;
+                }
+            }
         }
     }
     presentItemValue(ulElement) {
@@ -16069,7 +16174,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 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);
@@ -16088,7 +16193,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     const 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();
                 }
@@ -16140,6 +16247,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     }
                     this.beforePopupOpen = false;
                     this.overAllWrapper.classList.remove(iconAnimation);
+                    const 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');
@@ -16153,22 +16261,27 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     if (this.mode === 'CheckBox' && this.showSelectAll) {
                         EventHandler.remove(this.popupObj.element, 'click', this.clickHandler);
                     }
-                    if (this.enableVirtualization && this.mode === 'CheckBox' && this.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;
                     }
                     let dataSourceCount;
                     if (this.dataSource instanceof DataManager) {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        dataSourceCount = this.virtualGroupDataSource && this.virtualGroupDataSource.length ? this.virtualGroupDataSource.length : 0;
+                        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();
                     }
@@ -16499,8 +16612,12 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 if (this.dataSource instanceof DataManager) {
                     this.dataSource.executeQuery(new Query().where(predicate))
                         .then((e) => {
-                        if (e.result.result.length > 0) {
-                            listItems = e.result.result;
+                        if (e.result.length > 0) {
+                            listItems = e.result;
+                            this.initStatus = false;
+                            this.initialValueUpdate(listItems, true);
+                            this.initialUpdate();
+                            this.initStatus = true;
                         }
                     });
                 }
@@ -16515,7 +16632,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             else {
                 this.setInitialValue = () => {
                     this.initStatus = false;
-                    this.initialValueUpdate(listItems);
+                    if (!this.enableVirtualization || (this.enableVirtualization && (!(this.dataSource instanceof DataManager)))) {
+                        this.initialValueUpdate(listItems);
+                    }
                     this.initialUpdate();
                     this.setInitialValue = null;
                     this.initStatus = true;
@@ -19001,12 +19120,6 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                 tListBox.ulElement.removeChild(noRecElem);
             }
         }
-        if (isRefresh) {
-            const 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);
@@ -19049,6 +19162,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             tListBox.liCollections = tliCollections.concat(fliCollections);
         }
         fListBox.value = [];
+        listData = listData.filter((data) => (data !== undefined));
         listData = listData
             .filter((data) => data.isHeader !== true);
         const sortedData = listData.filter(function (val) {