@syncfusion/ej2-multicolumn-combobox 30.1.37 → 30.1.40

package/dist/es6/ej2-multicolumn-combobox.es2015.js

@@ -267,6 +267,9 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
     }
     render() {
         this.renderInput();
+        if (this.gridData == null) {
+            this.setGridData(this.dataSource);
+        }
         this.renderGrid();
         this.popupDiv = this.createElement('div', { className: CONTENT });
         this.popupDiv.appendChild(this.gridEle);
@@ -274,6 +277,64 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         this.renderPopup();
         this.wireEvents();
     }
+    setGridData(dataSource, query) {
+        this.trigger('actionBegin', { cancel: false, query: query }, (args) => {
+            if (!args.cancel) {
+                if (dataSource instanceof DataManager) {
+                    if (this.isShowSpinner) {
+                        this.showHideSpinner(true);
+                    }
+                    dataSource.executeQuery(this.getQuery(query)).then((e) => {
+                        this.gridData = e.result;
+                        this.trigger('actionComplete', e, (e) => {
+                            this.showHideSpinner(false);
+                            if (!this.isMainDataUpdated) {
+                                this.mainData = this.gridData;
+                                this.remoteDataLength = this.gridData.length;
+                                this.isMainDataUpdated = true;
+                            }
+                            if (this.popupDiv) {
+                                this.updateGridDataSource();
+                            }
+                        });
+                    }).catch((e) => {
+                        this.trigger('actionFailure', e, null);
+                    });
+                }
+                else {
+                    const dataManager = new DataManager(dataSource);
+                    const listItems = (this.getQuery(query)).executeLocal(dataManager);
+                    this.gridData = listItems;
+                    this.trigger('actionComplete', { result: listItems }, (e) => {
+                        if (!this.isMainDataUpdated) {
+                            this.mainData = this.gridData;
+                            this.remoteDataLength = this.gridData.length;
+                            this.isMainDataUpdated = true;
+                        }
+                        if (this.popupDiv) {
+                            this.updateGridDataSource();
+                        }
+                    });
+                }
+            }
+        });
+    }
+    getQuery(query) {
+        let filterQuery;
+        if (!this.isCustomFilter && this.allowFiltering) {
+            filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();
+            const filterType = this.typedString === '' ? 'contains' : this.filterType;
+            if ((this.allowFiltering && this.typedString && this.typedString !== '')) {
+                const fields = (this.fields.text) ? this.fields.text : '';
+                filterQuery.where(fields, filterType, this.typedString, true, false);
+            }
+        }
+        else {
+            filterQuery = (this.customFilterQuery != null) ?
+                this.customFilterQuery.clone() : query ? query.clone() : this.query ? this.query.clone() : new Query();
+        }
+        return filterQuery;
+    }
     setHiddenValue() {
         if (isNullOrUndefined(this.value)) {
             this.hiddenElement.innerHTML = '';
@@ -296,7 +357,7 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         const gridColumns = this.getGridColumns();
         const sortOrder = this.sortOrder.toString().toLowerCase();
         this.gridObj = new Grid({
-            dataSource: this.dataSource,
+            dataSource: this.gridData,
             columns: gridColumns,
             allowSorting: this.allowSorting,
             enableStickyHeader: true,
@@ -306,7 +367,6 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
             enableVirtualization: this.enableVirtualization,
             enableRtl: this.enableRtl,
             editSettings: { allowAdding: false },
-            query: this.query,
             allowTextWrap: this.gridSettings.allowTextWrap,
             textWrapSettings: { wrapMode: this.gridSettings.textWrapMode },
             height: this.popupHeight,
@@ -321,7 +381,6 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
             },
             dataBound: () => { this.onDataBound(); },
             actionFailure: (args) => { this.onActionFailure(args); },
-            actionBegin: (args) => { this.trigger('actionBegin', args); },
             actionComplete: this.handleActionComplete.bind(this),
             keyPressed: this.handleKeyPressed.bind(this),
             resizing: (args) => {
@@ -356,7 +415,6 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         }
     }
     handleActionComplete(args) {
-        this.trigger('actionComplete', args);
         if (args.requestType === 'sorting') {
             this.updateRowSelection(args);
         }
@@ -716,8 +774,8 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     const dataLists = e.result;
                     const filteredData = dataLists.filter((item) => {
-                        const fieldVal = this.updateFieldValue(isRerender ? (isValue ? this.fields.value : this.fields.text) :
-                            !isNullOrUndefined(this.value) ? this.fields.value : this.fields.text, item);
+                        const fieldVal = item ? (this.updateFieldValue(isRerender ? (isValue ? this.fields.value :
+                            this.fields.text) : !isNullOrUndefined(this.value) ? this.fields.value : this.fields.text, item)) : null;
                         return fieldVal === value;
                     });
                     if (filteredData.length > 0) {
@@ -1025,24 +1083,24 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         this.showPopup(null, true);
         this.updateClearIconState();
         if (this.allowFiltering) {
-            const inputValue = e.target.value.toLowerCase();
-            let customFiltering = false;
+            this.typedString = e.target.value.toLowerCase();
             const eventArgs = {
                 preventDefaultAction: false,
-                text: inputValue,
+                text: this.typedString,
                 updateData: (dataSource, query, fields) => {
                     if (eventArgs.cancel) {
                         return;
                     }
-                    customFiltering = true;
-                    this.filterAction(dataSource, inputValue, query, fields);
+                    this.isCustomFilter = true;
+                    this.customFilterQuery = query ? query.clone() : query;
+                    this.setGridData(dataSource, query);
                 },
                 event: e,
                 cancel: false
             };
             this.trigger('filtering', eventArgs, (eventArgs) => {
-                if (!eventArgs.cancel && !eventArgs.preventDefaultAction && !customFiltering) {
-                    this.filterAction(this.dataSource, inputValue, this.query, this.fields);
+                if (!eventArgs.cancel && !eventArgs.preventDefaultAction && !this.isCustomFilter) {
+                    this.setGridData(this.dataSource, this.query ? this.query.clone() : null);
                 }
             });
         }
@@ -1053,11 +1111,7 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
             let data;
             let exactData;
             if (this.dataSource instanceof DataManager) {
-                const query = new Query();
-                /* eslint-disable-next-line  @typescript-eslint/no-explicit-any */
-                const result = yield this.dataSource.executeQuery(query);
-                const totaldata = result.result;
-                ({ data, exactData } = this.filterDatas(totaldata, inputValue));
+                ({ data, exactData } = this.filterDatas(this.mainData, inputValue));
             }
             else if (Array.isArray(this.dataSource)) {
                 ({ data, exactData } = this.filterDatas(this.dataSource, inputValue));
@@ -1086,68 +1140,14 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         const selectedIndex = this.findIndex(this.gridObj.currentViewData, this.matchedContent);
         this.matchedRowEle = this.gridObj.getRowByIndex(selectedIndex);
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    filterAction(dataSource, inputValue, query, fields) {
-        const isQuery = query || new Query();
-        const filterType = this.filterType.toString().toLowerCase();
-        if (isNullOrUndefined(query) && isNullOrUndefined(fields)) {
-            this.updateGridDataSource(dataSource);
-        }
-        else if (query) {
-            if (dataSource instanceof DataManager) {
-                this.filteringHandler(dataSource, inputValue, query, fields);
-            }
-            else {
-                new DataManager(dataSource).executeQuery(query).then((e) => {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    const dataLists = e.result;
-                    this.updateGridDataSource(dataLists);
-                });
-            }
-        }
-        else {
-            if (dataSource instanceof DataManager) {
-                this.filteringHandler(dataSource, inputValue, isQuery, fields);
-            }
-            else if (Array.isArray(dataSource)) {
-                const filteredData = dataSource.filter((item) => this.filterData(item, filterType, inputValue, fields));
-                this.updateGridDataSource(filteredData);
-            }
-        }
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    filteringHandler(dataSource, inputValue, query, fields) {
-        const filterType = this.filterType.toString().toLowerCase();
-        let filteredData;
-        dataSource.executeQuery(query).then((e) => {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const dataLists = e.result;
-            filteredData = dataLists.filter((item) => this.filterData(item, filterType, inputValue, fields));
-            this.updateGridDataSource(filteredData);
-        });
-    }
-    filterData(item, filterType, inputValue, fields) {
-        const dataValue = this.updateFieldValue(fields ? fields.text : this.fields.text, item);
-        const itemValue = dataValue.toLowerCase();
-        switch (filterType) {
-            case 'startswith':
-                return itemValue.startsWith(inputValue);
-            case 'endswith':
-                return itemValue.endsWith(inputValue);
-            case 'contains':
-                return itemValue.includes(inputValue);
-            default:
-                return false;
-        }
-    }
-    updateGridDataSource(dataSource) {
-        if (dataSource.length > 0) {
+    updateGridDataSource() {
+        if (this.gridData && this.gridData.length > 0) {
             removeClass([this.popupDiv], [NODATA]);
             const noRecordEle = this.popupDiv.querySelector('.e-no-records');
             if (noRecordEle) {
                 this.popupDiv.removeChild(noRecordEle);
             }
-            this.gridObj.dataSource = dataSource;
+            this.gridObj.dataSource = this.gridData;
             this.isDataFiltered = true;
         }
         else {
@@ -1254,7 +1254,8 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         const e = mouseEvent ? mouseEvent : keyEvent;
         const val = isKeyDown ? this.matchedContent : this.exactMatchedContent;
         if (!val && e.code !== 'Enter') {
-            this.inputEle.value = this.value = this.index = this.text = null;
+            this.inputEle.value = null;
+            this.setProperties({ value: null, index: null, text: null }, true);
         }
         this.hidePopup(e);
         if (this.matchedRowEle && !isClearValues && val) {
@@ -1432,7 +1433,7 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         if (this.gridObj) {
             let dataLength;
             this.isShowSpinner = true;
-            this.gridObj.dataSource = newDataSource;
+            this.setGridData(newDataSource);
             const isRemoteData = oldDataSource instanceof DataManager;
             if (isRemoteData) {
                 oldDataSource.executeQuery(new Query()).then((e) => {
@@ -1522,12 +1523,6 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                         this.inputEle.setAttribute('aria-activedescendant', firstRow.getAttribute('data-uid'));
                     }
                 }
-                if (!isNullOrUndefined(this.dataSource) && this.dataSource instanceof DataManager) {
-                    this.dataSource.executeQuery(new Query).then((e) => {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        this.remoteDataLength = e.result.length;
-                    });
-                }
                 this.popupObj.show(new Animation(eventArgs.animation), this.popupEle.firstElementChild);
             }
         });
@@ -1559,11 +1554,17 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                 }
                 this.inputEle.removeAttribute('aria-owns');
                 this.inputEle.removeAttribute('aria-activedescendant');
+                this.customFilterQuery = null;
             }
         });
         setTimeout(() => {
             if (this.gridObj) {
-                this.gridObj.dataSource = this.dataSource;
+                this.gridObj.dataSource = this.allowFiltering ? this.mainData : this.gridData;
+                const noRecordEle = this.popupDiv.querySelector('.e-no-records');
+                if (noRecordEle) {
+                    this.popupDiv.removeChild(noRecordEle);
+                    removeClass([this.popupDiv], [NODATA]);
+                }
                 this.updateGridHeight(true, false);
             }
         }, 100);
@@ -1768,9 +1769,8 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                     this.updateDynamicDataSource(newProp.dataSource, oldProp.dataSource);
                     break;
                 case 'query':
-                    if (this.gridObj) {
-                        this.gridObj.query = newProp.query;
-                    }
+                    this.isMainDataUpdated = false;
+                    this.setGridData(this.dataSource);
                     break;
                 case 'gridSettings':
                     if (this.gridObj) {