@syncfusion/ej2-multicolumn-combobox 30.1.37 → 30.1.40

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 30.1.37
+*  version : 30.1.40
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-multicolumn-combobox",
-  "version": "30.1.37",
+  "version": "30.1.40",
   "description": "Essential JS 2 Component",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -9,8 +9,8 @@
   "es2015": "./dist/es6/ej2-multicolumn-combobox.es5.js",
   "typings": "index.d.ts",
   "dependencies": {
-    "@syncfusion/ej2-base": "~30.1.37",
-    "@syncfusion/ej2-grids": "~30.1.37"
+    "@syncfusion/ej2-base": "~30.1.38",
+    "@syncfusion/ej2-grids": "~30.1.40"
   },
   "devDependencies": {},
   "keywords": [

package/src/multicolumn-combobox/multi-column-combo-box-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, EventHandler, INotifyPropertyChanged, Property, NotifyPropertyChanges, closest, attributes, append, compile, detach, KeyboardEvents, getValue } from '@syncfusion/ej2-base';import { ChildProperty, prepend, Collection, getUniqueID, Complex, isNullOrUndefined as isNOU, select, L10n, Browser } from '@syncfusion/ej2-base';import { formatUnit, addClass, removeClass, NumberFormatOptions, DateFormatOptions, Event, EmitType, AnimationModel, Animation, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Input, InputObject } from '@syncfusion/ej2-inputs';import { DataManager, Query, Group } from '@syncfusion/ej2-data';import { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { Grid, Resize, FailureEventArgs, VirtualScroll, Group as GridGroup, Edit, Sort, GridColumnModel } from '@syncfusion/ej2-grids';
+import { Component, EventHandler, INotifyPropertyChanged, Property, NotifyPropertyChanges, closest, attributes, append, compile, detach, KeyboardEvents, getValue } from '@syncfusion/ej2-base';import { ChildProperty, prepend, Collection, getUniqueID, Complex, isNullOrUndefined as isNOU, select, L10n, Browser } from '@syncfusion/ej2-base';import { formatUnit, addClass, removeClass, NumberFormatOptions, DateFormatOptions, Event, EmitType, AnimationModel, Animation, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Input, InputObject } from '@syncfusion/ej2-inputs';import { DataManager, Query, Group, DataOptions } from '@syncfusion/ej2-data';import { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { Grid, Resize, FailureEventArgs, VirtualScroll, Group as GridGroup, Edit, Sort, GridColumnModel } from '@syncfusion/ej2-grids';
 import {TextAlign,GridLine,WrapMode,ResizeArgs,DataResult,FilterType,FloatLabelType,SortOrder,SortType,PopupEventArgs,FilteringEventArgs,SelectEventArgs,ChangeEventArgs} from "./multi-column-combo-box";
 import {ComponentModel} from '@syncfusion/ej2-base';
 

package/src/multicolumn-combobox/multi-column-combo-box.d.ts

@@ -784,6 +784,12 @@ export declare class MultiColumnComboBox extends Component<HTMLElement> implemen
     private isShowSpinner;
     private hiddenElement;
     private isLocaleChanged;
+    private gridData;
+    private mainData;
+    private isMainDataUpdated;
+    private isCustomFilter;
+    private customFilterQuery;
+    private typedString;
     /**
      * *Constructor for creating the component
      *
@@ -816,6 +822,8 @@ export declare class MultiColumnComboBox extends Component<HTMLElement> implemen
     protected getPersistData(): string;
     private persistData;
     protected render(): void;
+    private setGridData;
+    protected getQuery(query: Query): Query;
     private setHiddenValue;
     private renderGrid;
     private handleActionComplete;
@@ -859,9 +867,6 @@ export declare class MultiColumnComboBox extends Component<HTMLElement> implemen
     private updateInputValue;
     private filterDatas;
     private selectFilteredRows;
-    private filterAction;
-    private filteringHandler;
-    private filterData;
     private updateGridDataSource;
     private wireEvents;
     private unWireEvents;

package/src/multicolumn-combobox/multi-column-combo-box.js

@@ -332,6 +332,9 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
     };
     MultiColumnComboBox.prototype.render = function () {
         this.renderInput();
+        if (this.gridData == null) {
+            this.setGridData(this.dataSource);
+        }
         this.renderGrid();
         this.popupDiv = this.createElement('div', { className: CONTENT });
         this.popupDiv.appendChild(this.gridEle);
@@ -339,6 +342,65 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         this.renderPopup();
         this.wireEvents();
     };
+    MultiColumnComboBox.prototype.setGridData = function (dataSource, query) {
+        var _this = this;
+        this.trigger('actionBegin', { cancel: false, query: query }, function (args) {
+            if (!args.cancel) {
+                if (dataSource instanceof DataManager) {
+                    if (_this.isShowSpinner) {
+                        _this.showHideSpinner(true);
+                    }
+                    dataSource.executeQuery(_this.getQuery(query)).then(function (e) {
+                        _this.gridData = e.result;
+                        _this.trigger('actionComplete', e, function (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(function (e) {
+                        _this.trigger('actionFailure', e, null);
+                    });
+                }
+                else {
+                    var dataManager = new DataManager(dataSource);
+                    var listItems = (_this.getQuery(query)).executeLocal(dataManager);
+                    _this.gridData = listItems;
+                    _this.trigger('actionComplete', { result: listItems }, function (e) {
+                        if (!_this.isMainDataUpdated) {
+                            _this.mainData = _this.gridData;
+                            _this.remoteDataLength = _this.gridData.length;
+                            _this.isMainDataUpdated = true;
+                        }
+                        if (_this.popupDiv) {
+                            _this.updateGridDataSource();
+                        }
+                    });
+                }
+            }
+        });
+    };
+    MultiColumnComboBox.prototype.getQuery = function (query) {
+        var filterQuery;
+        if (!this.isCustomFilter && this.allowFiltering) {
+            filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();
+            var filterType = this.typedString === '' ? 'contains' : this.filterType;
+            if ((this.allowFiltering && this.typedString && this.typedString !== '')) {
+                var 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;
+    };
     MultiColumnComboBox.prototype.setHiddenValue = function () {
         if (isNOU(this.value)) {
             this.hiddenElement.innerHTML = '';
@@ -362,7 +424,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         var gridColumns = this.getGridColumns();
         var sortOrder = this.sortOrder.toString().toLowerCase();
         this.gridObj = new Grid({
-            dataSource: this.dataSource,
+            dataSource: this.gridData,
             columns: gridColumns,
             allowSorting: this.allowSorting,
             enableStickyHeader: true,
@@ -372,7 +434,6 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             enableVirtualization: this.enableVirtualization,
             enableRtl: this.enableRtl,
             editSettings: { allowAdding: false },
-            query: this.query,
             allowTextWrap: this.gridSettings.allowTextWrap,
             textWrapSettings: { wrapMode: this.gridSettings.textWrapMode },
             height: this.popupHeight,
@@ -387,7 +448,6 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             },
             dataBound: function () { _this.onDataBound(); },
             actionFailure: function (args) { _this.onActionFailure(args); },
-            actionBegin: function (args) { _this.trigger('actionBegin', args); },
             actionComplete: this.handleActionComplete.bind(this),
             keyPressed: this.handleKeyPressed.bind(this),
             resizing: function (args) {
@@ -423,7 +483,6 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
     };
     MultiColumnComboBox.prototype.handleActionComplete = function (args) {
         var _this = this;
-        this.trigger('actionComplete', args);
         if (args.requestType === 'sorting') {
             this.updateRowSelection(args);
         }
@@ -792,8 +851,8 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     var dataLists = e.result;
                     var filteredData = dataLists.filter(function (item) {
-                        var fieldVal = _this.updateFieldValue(isRerender ? (isValue ? _this.fields.value : _this.fields.text) :
-                            !isNOU(_this.value) ? _this.fields.value : _this.fields.text, item);
+                        var fieldVal = item ? (_this.updateFieldValue(isRerender ? (isValue ? _this.fields.value :
+                            _this.fields.text) : !isNOU(_this.value) ? _this.fields.value : _this.fields.text, item)) : null;
                         return fieldVal === value_1;
                     });
                     if (filteredData.length > 0) {
@@ -1104,24 +1163,24 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         this.showPopup(null, true);
         this.updateClearIconState();
         if (this.allowFiltering) {
-            var inputValue_1 = e.target.value.toLowerCase();
-            var customFiltering_1 = false;
+            this.typedString = e.target.value.toLowerCase();
             var eventArgs_1 = {
                 preventDefaultAction: false,
-                text: inputValue_1,
+                text: this.typedString,
                 updateData: function (dataSource, query, fields) {
                     if (eventArgs_1.cancel) {
                         return;
                     }
-                    customFiltering_1 = true;
-                    _this.filterAction(dataSource, inputValue_1, query, fields);
+                    _this.isCustomFilter = true;
+                    _this.customFilterQuery = query ? query.clone() : query;
+                    _this.setGridData(dataSource, query);
                 },
                 event: e,
                 cancel: false
             };
             this.trigger('filtering', eventArgs_1, function (eventArgs) {
-                if (!eventArgs.cancel && !eventArgs.preventDefaultAction && !customFiltering_1) {
-                    _this.filterAction(_this.dataSource, inputValue_1, _this.query, _this.fields);
+                if (!eventArgs.cancel && !eventArgs.preventDefaultAction && !_this.isCustomFilter) {
+                    _this.setGridData(_this.dataSource, _this.query ? _this.query.clone() : null);
                 }
             });
         }
@@ -1129,27 +1188,16 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
     };
     MultiColumnComboBox.prototype.updateInputValue = function (inputValue) {
         return __awaiter(this, void 0, void 0, function () {
-            var _a, _b, data, exactData, query, result, totaldata;
+            var _a, _b, data, exactData;
             return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0:
-                        if (!(this.dataSource instanceof DataManager)) return [3 /*break*/, 2];
-                        query = new Query();
-                        return [4 /*yield*/, this.dataSource.executeQuery(query)];
-                    case 1:
-                        result = _c.sent();
-                        totaldata = result.result;
-                        (_a = this.filterDatas(totaldata, inputValue), data = _a.data, exactData = _a.exactData);
-                        return [3 /*break*/, 3];
-                    case 2:
-                        if (Array.isArray(this.dataSource)) {
-                            (_b = this.filterDatas(this.dataSource, inputValue), data = _b.data, exactData = _b.exactData);
-                        }
-                        _c.label = 3;
-                    case 3:
-                        this.selectFilteredRows(data, exactData);
-                        return [2 /*return*/];
+                if (this.dataSource instanceof DataManager) {
+                    (_a = this.filterDatas(this.mainData, inputValue), data = _a.data, exactData = _a.exactData);
                 }
+                else if (Array.isArray(this.dataSource)) {
+                    (_b = this.filterDatas(this.dataSource, inputValue), data = _b.data, exactData = _b.exactData);
+                }
+                this.selectFilteredRows(data, exactData);
+                return [2 /*return*/];
             });
         });
     };
@@ -1175,72 +1223,14 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         var selectedIndex = this.findIndex(this.gridObj.currentViewData, this.matchedContent);
         this.matchedRowEle = this.gridObj.getRowByIndex(selectedIndex);
     };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    MultiColumnComboBox.prototype.filterAction = function (dataSource, inputValue, query, fields) {
-        var _this = this;
-        var isQuery = query || new Query();
-        var filterType = this.filterType.toString().toLowerCase();
-        if (isNOU(query) && isNOU(fields)) {
-            this.updateGridDataSource(dataSource);
-        }
-        else if (query) {
-            if (dataSource instanceof DataManager) {
-                this.filteringHandler(dataSource, inputValue, query, fields);
-            }
-            else {
-                new DataManager(dataSource).executeQuery(query).then(function (e) {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    var dataLists = e.result;
-                    _this.updateGridDataSource(dataLists);
-                });
-            }
-        }
-        else {
-            if (dataSource instanceof DataManager) {
-                this.filteringHandler(dataSource, inputValue, isQuery, fields);
-            }
-            else if (Array.isArray(dataSource)) {
-                var filteredData = dataSource.filter(function (item) {
-                    return _this.filterData(item, filterType, inputValue, fields);
-                });
-                this.updateGridDataSource(filteredData);
-            }
-        }
-    };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    MultiColumnComboBox.prototype.filteringHandler = function (dataSource, inputValue, query, fields) {
-        var _this = this;
-        var filterType = this.filterType.toString().toLowerCase();
-        var filteredData;
-        dataSource.executeQuery(query).then(function (e) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var dataLists = e.result;
-            filteredData = dataLists.filter(function (item) { return _this.filterData(item, filterType, inputValue, fields); });
-            _this.updateGridDataSource(filteredData);
-        });
-    };
-    MultiColumnComboBox.prototype.filterData = function (item, filterType, inputValue, fields) {
-        var dataValue = this.updateFieldValue(fields ? fields.text : this.fields.text, item);
-        var 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;
-        }
-    };
-    MultiColumnComboBox.prototype.updateGridDataSource = function (dataSource) {
-        if (dataSource.length > 0) {
+    MultiColumnComboBox.prototype.updateGridDataSource = function () {
+        if (this.gridData && this.gridData.length > 0) {
             removeClass([this.popupDiv], [NODATA]);
             var 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 {
@@ -1348,7 +1338,8 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         var e = mouseEvent ? mouseEvent : keyEvent;
         var 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) {
@@ -1529,7 +1520,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         if (this.gridObj) {
             var dataLength_1;
             this.isShowSpinner = true;
-            this.gridObj.dataSource = newDataSource;
+            this.setGridData(newDataSource);
             var isRemoteData = oldDataSource instanceof DataManager;
             if (isRemoteData) {
                 oldDataSource.executeQuery(new Query()).then(function (e) {
@@ -1620,12 +1611,6 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                         _this.inputEle.setAttribute('aria-activedescendant', firstRow.getAttribute('data-uid'));
                     }
                 }
-                if (!isNOU(_this.dataSource) && _this.dataSource instanceof DataManager) {
-                    _this.dataSource.executeQuery(new Query).then(function (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);
             }
         });
@@ -1658,11 +1643,17 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                 }
                 _this.inputEle.removeAttribute('aria-owns');
                 _this.inputEle.removeAttribute('aria-activedescendant');
+                _this.customFilterQuery = null;
             }
         });
         setTimeout(function () {
             if (_this.gridObj) {
-                _this.gridObj.dataSource = _this.dataSource;
+                _this.gridObj.dataSource = _this.allowFiltering ? _this.mainData : _this.gridData;
+                var noRecordEle = _this.popupDiv.querySelector('.e-no-records');
+                if (noRecordEle) {
+                    _this.popupDiv.removeChild(noRecordEle);
+                    removeClass([_this.popupDiv], [NODATA]);
+                }
                 _this.updateGridHeight(true, false);
             }
         }, 100);
@@ -1869,9 +1860,8 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                     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) {