@syncfusion/ej2-dropdowns 23.2.7-52849 → 24.1.41-566987

package/src/drop-down-base/drop-down-base.js

@@ -96,6 +96,9 @@ var DropDownBase = /** @class */ (function (_super) {
         _this.virtualizedItemsCount = 0;
         _this.totalItemCount = 0;
         _this.dataCount = 0;
+        _this.isRemoteDataUpdated = false;
+        _this.isIncrementalRequest = false;
+        _this.itemCount = 10;
         return _this;
     }
     DropDownBase.prototype.getPropObject = function (prop, newProp, oldProp) {
@@ -492,7 +495,7 @@ var DropDownBase = /** @class */ (function (_super) {
                 if (!eventArgs.cancel) {
                     _this.isRequesting = true;
                     _this.showSpinner();
-                    if (dataSource instanceof DataManager) {
+                    if (dataSource instanceof DataManager && !_this.virtualGroupDataSource) {
                         _this.isRequested = true;
                         if (_this.isDataFetched) {
                             _this.emptyDataRequest(fields);
@@ -501,12 +504,42 @@ var DropDownBase = /** @class */ (function (_super) {
                         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.isAllowFiltering && _this.isVirtualizationEnabled && e.result)) {
+                                        e.result = e.result.result;
+                                    }
+                                    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;
+                                        }
+                                        else {
+                                            _this.virtualGroupDataSource = dataSource_2;
+                                            _this.hideSpinner();
+                                            _this.isRequested = false;
+                                            _this.isRequesting = false;
+                                            _this.setListData(dataSource_2, fields, query, event);
+                                            return;
+                                        }
+                                    }
+                                    _this.hideSpinner();
+                                    _this.isRequested = false;
+                                    _this.isRequesting = false;
+                                    _this.updatePopupState();
+                                    return;
+                                }
                                 if (!e.cancel) {
+                                    _this.isRequesting = false;
                                     var listItems = e.result;
+                                    if (_this.isIncrementalRequest) {
+                                        ulElement = _this.renderItems(listItems, fields);
+                                        return;
+                                    }
                                     if (listItems.length === 0) {
                                         _this.isDataFetched = true;
                                     }
-                                    _this.isRequesting = false;
                                     _this.dataCount = e.count;
                                     _this.totalItemCount = e.count;
                                     ulElement = _this.renderItems(listItems, fields);
@@ -527,8 +560,25 @@ var DropDownBase = /** @class */ (function (_super) {
                     }
                     else {
                         _this.isRequesting = false;
-                        var dataManager = new DataManager(eventArgs.data);
-                        var listItems = (_this.getQuery(eventArgs.query)).executeLocal(dataManager);
+                        var listItems = void 0;
+                        if (_this.isVirtualizationEnabled && !_this.virtualGroupDataSource && _this.fields.groupBy) {
+                            var data = new DataManager(_this.dataSource).executeLocal(new Query().group(_this.fields.groupBy));
+                            _this.virtualGroupDataSource = data.records;
+                        }
+                        var dataManager = _this.isVirtualizationEnabled && _this.virtualGroupDataSource ? new DataManager(_this.virtualGroupDataSource) : new DataManager(eventArgs.data);
+                        listItems = (_this.getQuery(eventArgs.query)).executeLocal(dataManager);
+                        if (_this.isVirtualizationEnabled && _this.getModuleName() === 'autocomplete' && (listItems.count != 0 && listItems.count < (_this.itemCount * 2))) {
+                            var newQuery = _this.getQuery(eventArgs.query);
+                            if (newQuery) {
+                                for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
+                                    if (newQuery.queries[queryElements].fn === 'onTake') {
+                                        newQuery.queries[queryElements].e.nos = listItems.count;
+                                        listItems = (newQuery).executeLocal(dataManager);
+                                        break;
+                                    }
+                                }
+                            }
+                        }
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         _this.dataCount = listItems.count;
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -538,6 +588,10 @@ var DropDownBase = /** @class */ (function (_super) {
                         var localDataArgs = { cancel: false, result: listItems };
                         _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;
                         _this.trigger('actionComplete', localDataArgs, function (localDataArgs) {
+                            if (_this.isIncrementalRequest) {
+                                ulElement = _this.renderItems(localDataArgs.result, fields);
+                                return;
+                            }
                             if (!localDataArgs.cancel) {
                                 ulElement = _this.renderItems(localDataArgs.result, fields);
                                 _this.onActionComplete(ulElement, localDataArgs.result, event);
@@ -557,6 +611,12 @@ var DropDownBase = /** @class */ (function (_super) {
             });
         }
     };
+    DropDownBase.prototype.updatePopupState = function () {
+        // Used this method in component side.
+    };
+    DropDownBase.prototype.updateRemoteData = function () {
+        this.setListData(this.dataSource, this.fields, this.query);
+    };
     DropDownBase.prototype.bindChildItems = function (listItems, ulElement, fields, e) {
         var _this = this;
         if (listItems.length >= 100 && this.getModuleName() === 'autocomplete') {
@@ -612,6 +672,7 @@ var DropDownBase = /** @class */ (function (_super) {
         var listItems = [];
         this.onActionComplete(this.renderItems(listItems, fields), listItems);
         this.isRequested = false;
+        this.isRequesting = false;
         this.hideSpinner();
     };
     DropDownBase.prototype.showSpinner = function () {
@@ -644,7 +705,9 @@ var DropDownBase = /** @class */ (function (_super) {
         if (this.isReact) {
             this.clearTemplate(['itemTemplate', 'groupTemplate', 'actionFailureTemplate', 'noRecordsTemplate']);
         }
-        this.fixedHeaderElement = isNullOrUndefined(this.fixedHeaderElement) ? this.fixedHeaderElement : null;
+        if (!this.isVirtualizationEnabled) {
+            this.fixedHeaderElement = isNullOrUndefined(this.fixedHeaderElement) ? this.fixedHeaderElement : null;
+        }
         if (this.getModuleName() === 'multiselect' && this.properties.allowCustomValue && this.fields.groupBy) {
             for (var i = 0; i < ulElement.childElementCount; i++) {
                 if (ulElement.children[i].classList.contains('e-list-group-item')) {
@@ -785,25 +848,67 @@ var DropDownBase = /** @class */ (function (_super) {
             this.scrollStop(e);
         }
     };
-    DropDownBase.prototype.scrollStop = function (e) {
+    DropDownBase.prototype.scrollStop = function (e, isDownkey) {
         var target = !isNullOrUndefined(e) ? e.target : this.list;
         var liHeight = parseInt(getComputedStyle(this.getValidLi(), null).getPropertyValue('height'), 10);
         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--) {
-            if (!isNullOrUndefined(liCollections[i]) && liCollections[i].classList.contains(dropDownBaseClasses.group)) {
-                var currentLi = liCollections[i];
-                this.fixedHeaderElement.innerHTML = currentLi.innerHTML;
-                this.fixedHeaderElement.style.top = target.scrollTop + 'px';
-                this.fixedHeaderElement.style.display = 'block';
-                break;
+            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.updateGroupHeader(index, liCollections, target)) {
+                    loadedGroupList++;
+                    if (count >= this.getPageCount()) {
+                        break;
+                    }
+                    if (groupListLength <= loadedGroupList) {
+                        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;
+                    }
+                }
             }
             else {
-                this.fixedHeaderElement.style.display = 'none';
-                this.fixedHeaderElement.style.top = 'none';
+                if (this.updateGroupHeader(index, liCollections, target)) {
+                    break;
+                }
             }
         }
     };
+    DropDownBase.prototype.getPageCount = function (returnExactCount) {
+        var liHeight = this.list.classList.contains(dropDownBaseClasses.noData) ? null :
+            getComputedStyle(this.getItems()[0], null).getPropertyValue('height');
+        var pageCount = Math.round(this.list.getBoundingClientRect().height / parseInt(liHeight, 10));
+        return returnExactCount ? pageCount : Math.round(pageCount);
+    };
+    DropDownBase.prototype.updateGroupHeader = function (index, liCollections, target) {
+        if (!isNullOrUndefined(liCollections[index]) && liCollections[index].classList.contains(dropDownBaseClasses.group)) {
+            this.updateGroupFixedHeader(liCollections[index], target);
+            return true;
+        }
+        else {
+            this.fixedHeaderElement.style.display = 'none';
+            this.fixedHeaderElement.style.top = 'none';
+            return false;
+        }
+    };
+    DropDownBase.prototype.updateGroupFixedHeader = function (element, target) {
+        this.fixedHeaderElement.innerHTML = element.innerHTML;
+        this.fixedHeaderElement.style.top = target.scrollTop + 'px';
+        this.fixedHeaderElement.style.display = 'block';
+    };
     DropDownBase.prototype.getValidLi = function () {
         return this.liCollections[0];
     };
@@ -837,45 +942,54 @@ var DropDownBase = /** @class */ (function (_super) {
                 var virtualUlElement = this.list.querySelector('.e-virtual-ddl-content');
                 if ((listData.length >= this.virtualizedItemsCount && oldUlElement && virtualUlElement) || (oldUlElement && virtualUlElement && this.isAllowFiltering) || (oldUlElement && virtualUlElement && this.getModuleName() === 'autocomplete')) {
                     virtualUlElement.replaceChild(ulElement, oldUlElement);
-                    this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
-                    this.ulElement = this.list.querySelector('ul');
-                    this.listData = listData;
-                    this.postRender(this.list, listData, this.bindEvent);
+                    this.updateListElements(listData);
                 }
                 else if ((!virtualUlElement)) {
                     this.list.innerHTML = '';
-                    this.list.appendChild(ulElement);
-                    this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
-                    this.ulElement = this.list.querySelector('ul');
-                    this.listData = listData;
-                    this.postRender(this.list, listData, this.bindEvent);
+                    this.createVirtualContent();
+                    this.list.querySelector('.e-virtual-ddl-content').appendChild(ulElement);
+                    this.updateListElements(listData);
                 }
             }
         }
         else {
             ulElement = this.createListItems(listData, fields);
+            if (this.isIncrementalRequest) {
+                this.incrementalLiCollections = ulElement.querySelectorAll('.' + dropDownBaseClasses.li);
+                this.incrementalUlElement = ulElement;
+                this.incrementalListData = listData;
+                return ulElement;
+            }
             if (this.isVirtualizationEnabled) {
                 var oldUlElement = this.list.querySelector('.e-list-parent');
                 var virtualUlElement = this.list.querySelector('.e-virtual-ddl-content');
                 if ((listData.length >= this.virtualizedItemsCount && oldUlElement && virtualUlElement) || (oldUlElement && virtualUlElement && this.isAllowFiltering) || (oldUlElement && virtualUlElement && this.getModuleName() === 'autocomplete')) {
                     virtualUlElement.replaceChild(ulElement, oldUlElement);
-                    this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
-                    this.ulElement = this.list.querySelector('ul');
-                    this.listData = listData;
-                    this.postRender(this.list, listData, this.bindEvent);
+                    this.updateListElements(listData);
                 }
                 else if ((!virtualUlElement)) {
                     this.list.innerHTML = '';
-                    this.list.appendChild(ulElement);
-                    this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
-                    this.ulElement = this.list.querySelector('ul');
-                    this.listData = listData;
-                    this.postRender(this.list, listData, this.bindEvent);
+                    this.createVirtualContent();
+                    this.list.querySelector('.e-virtual-ddl-content').appendChild(ulElement);
+                    this.updateListElements(listData);
                 }
             }
         }
         return ulElement;
     };
+    DropDownBase.prototype.createVirtualContent = function () {
+        if (!this.list.querySelector('.e-virtual-ddl-content')) {
+            this.list.appendChild(this.createElement('div', {
+                className: 'e-virtual-ddl-content',
+            }));
+        }
+    };
+    DropDownBase.prototype.updateListElements = function (listData) {
+        this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+        this.ulElement = this.list.querySelector('ul');
+        this.listData = listData;
+        this.postRender(this.list, listData, this.bindEvent);
+    };
     DropDownBase.prototype.templateListItem = function (dataSource, fields) {
         var option = this.listOption(dataSource, fields);
         option.templateID = this.itemTemplateId;
@@ -947,11 +1061,11 @@ var DropDownBase = /** @class */ (function (_super) {
      * @param {string | number | boolean} value - Specifies given value.
      * @returns {number} Returns the index of the item.
      */
-    DropDownBase.prototype.getIndexByValueFilter = function (value) {
+    DropDownBase.prototype.getIndexByValue = function (value) {
         var index;
-        var listItems = this.renderItems(this.selectData, this.fields);
-        for (var i = 0; i < listItems.children.length; i++) {
-            if (!isNullOrUndefined(value) && listItems.children[i].getAttribute('data-value') === value.toString()) {
+        var listItems = this.getItems();
+        for (var i = 0; i < listItems.length; i++) {
+            if (!isNullOrUndefined(value) && listItems[i].getAttribute('data-value') === value.toString()) {
                 index = i;
                 break;
             }
@@ -964,11 +1078,11 @@ var DropDownBase = /** @class */ (function (_super) {
      * @param {string | number | boolean} value - Specifies given value.
      * @returns {number} Returns the index of the item.
      */
-    DropDownBase.prototype.getIndexByValue = function (value) {
+    DropDownBase.prototype.getIndexByValueFilter = function (value) {
         var index;
-        var listItems = this.getItems();
-        for (var i = 0; i < listItems.length; i++) {
-            if (!isNullOrUndefined(value) && listItems[i].getAttribute('data-value') === value.toString()) {
+        var listItems = this.renderItems(this.selectData, this.fields);
+        for (var i = 0; i < listItems.children.length; i++) {
+            if (!isNullOrUndefined(value) && listItems.children[i].getAttribute('data-value') === value.toString()) {
                 index = i;
                 break;
             }

package/src/drop-down-list/drop-down-list.d.ts

@@ -61,7 +61,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
     } | string | number | boolean;
     private listHeight;
     private listItemHeight;
-    private skeletonCount;
+    protected skeletonCount: number;
     protected hiddenElement: HTMLSelectElement;
     protected isPopupOpen: boolean;
     private isDocumentClick;
@@ -113,7 +113,6 @@ export declare class DropDownList extends DropDownBase implements IInput {
     protected preventChange: boolean;
     protected isAngular: boolean;
     protected selectedElementID: string;
-    protected itemCount: number;
     private virtualListHeight;
     private virtualItemCount;
     private isVirtualScrolling;
@@ -136,6 +135,10 @@ export declare class DropDownList extends DropDownBase implements IInput {
     private virtualItemEndIndex;
     private generatedDataObject;
     private preselectedIndex;
+    protected incrementalQueryString: string;
+    protected incrementalEndIndex: number;
+    protected incrementalStartIndex: number;
+    protected incrementalPreQueryString: string;
     private isTouched;
     protected virtualListInfo: VirtualInfo;
     protected viewPortInfo: VirtualInfo;
@@ -440,6 +443,9 @@ export declare class DropDownList extends DropDownBase implements IInput {
     private onMouseLeave;
     protected removeHover(): void;
     protected isValidLI(li: Element | HTMLElement): boolean;
+    protected updateIncrementalInfo(startIndex: number, endIndex: number): void;
+    protected updateIncrementalView(startIndex: number, endIndex: number): void;
+    protected updateIncrementalItemIndex(startIndex: number, endIndex: number): void;
     protected incrementalSearch(e: KeyboardEventArgs): void;
     /**
      * Hides the spinner loader.
@@ -455,13 +461,13 @@ export declare class DropDownList extends DropDownBase implements IInput {
     showSpinner(): void;
     protected keyActionHandler(e: KeyboardEventArgs): void;
     private updateUpDownAction;
+    private updateVirtualItemIndex;
     private updateHomeEndAction;
     protected selectCurrentValueOnTab(e: KeyboardEventArgs): void;
     protected mobileKeyActionHandler(e: KeyboardEventArgs): void;
     private handleVirtualKeyboardActions;
     protected selectCurrentItem(e: KeyboardEventArgs): void;
     protected isSelectFocusItem(element: Element): boolean;
-    private getPageCount;
     private pageUpSelection;
     private PageUpDownSelection;
     private pageDownSelection;
@@ -611,6 +617,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
     onPropertyChanged(newProp: DropDownListModel, oldProp: DropDownListModel): void;
     private checkValidLi;
     private setSelectionData;
+    protected updatePopupState(): void;
     protected setReadOnly(): void;
     protected setInputValue(newProp?: any, oldProp?: any): void;
     private setCssClass;