@syncfusion/ej2-multicolumn-combobox 27.2.2 → 27.2.4

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 27.2.2
+*  version : 27.2.4
 *  Copyright Syncfusion Inc. 2001 - 2023. 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,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-multicolumn-combobox@*",
-  "_id": "@syncfusion/ej2-multicolumn-combobox@27.1.50",
+  "_id": "@syncfusion/ej2-multicolumn-combobox@27.2.3",
   "_inBundle": false,
-  "_integrity": "sha512-EOofLYL5/E3dbDSlmJDXjMWYY7pDlBOWu7XDJgsLZIdRoSpMi0k/qMQXoCkCC6LKhmZzJlv6ft9W+v2BeH5t8Q==",
+  "_integrity": "sha512-CkUV8XpzLeT7Q3yc5z5TpX0LW8o/TU3uSkv0MR8iLizOiwey/6vvZuDtMb+109OZSMSHGvE8j1yvaxpHUNFIYw==",
   "_location": "/@syncfusion/ej2-multicolumn-combobox",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-multicolumn-combobox",
     "/@syncfusion/ej2-vue-multicolumn-combobox"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-multicolumn-combobox/-/ej2-multicolumn-combobox-27.1.50.tgz",
-  "_shasum": "ed0fd49d62ea9ae2daa5ff23abfea820aaed40e5",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-multicolumn-combobox/-/ej2-multicolumn-combobox-27.2.3.tgz",
+  "_shasum": "31dc86ead9867dad09ea2231e6a0c57b96931507",
   "_spec": "@syncfusion/ej2-multicolumn-combobox@*",
   "_where": "/jenkins/workspace/elease-automation_release_27.1.1/packages/included",
   "author": {
@@ -36,7 +36,7 @@
   "bundleDependencies": false,
   "dependencies": {
     "@syncfusion/ej2-base": "~27.2.2",
-    "@syncfusion/ej2-grids": "~27.2.2"
+    "@syncfusion/ej2-grids": "~27.2.4"
   },
   "deprecated": false,
   "description": "Essential JS 2 Component",
@@ -57,6 +57,6 @@
     "url": "git+https://github.com/syncfusion/ej2-multicolumn-combobox-component.git"
   },
   "typings": "index.d.ts",
-  "version": "27.2.2",
+  "version": "27.2.4",
   "sideEffects": false
 }

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

@@ -1,5 +1,5 @@
-import { Component, EventHandler, INotifyPropertyChanged, Property, NotifyPropertyChanges, closest, attributes, append, compile, detach, KeyboardEvents, isNullOrUndefined } 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 } from '@syncfusion/ej2-popups';import { Grid, FailureEventArgs, VirtualScroll, Group as GridGroup, Edit, Sort, GridColumnModel } from '@syncfusion/ej2-grids';
-import {TextAlign,GridLine,WrapMode,DataResult,FilterType,FloatLabelType,SortOrder,SortType,PopupEventArgs,FilteringEventArgs,SelectEventArgs,ChangeEventArgs} from "./multi-column-combo-box";
+import { Component, EventHandler, INotifyPropertyChanged, Property, NotifyPropertyChanges, closest, attributes, append, compile, detach, KeyboardEvents, isNullOrUndefined } 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 } 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';
 
 /**
@@ -167,6 +167,34 @@ export interface GridSettingsModel {
      */
     textWrapMode?: WrapMode | string;
 
+    /**
+     * Specifies whether resizing of columns is enabled in the popup grid content.
+     *
+     * @default false
+     */
+    allowResizing?: boolean;
+
+    /**
+     * Triggers during the column resizing.
+     *
+     * @event resizing
+     */
+    resizing?: EmitType<ResizeArgs>;
+
+    /**
+     * Triggers when the column resizing begins.
+     *
+     * @event resizeStart
+     */
+    resizeStart?: EmitType<ResizeArgs>;
+
+    /**
+     * Triggers when the column resizing ends.
+     *
+     * @event resizeStop
+     */
+    resizeStop?: EmitType<ResizeArgs>;
+
 }
 
 /**

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

@@ -241,6 +241,30 @@ export declare class GridSettings extends ChildProperty<GridSettings> {
      * @asptype WrapMode
      */
     textWrapMode: WrapMode | string;
+    /**
+     * Specifies whether resizing of columns is enabled in the popup grid content.
+     *
+     * @default false
+     */
+    allowResizing: boolean;
+    /**
+     * Triggers during the column resizing.
+     *
+     * @event resizing
+     */
+    resizing: EmitType<ResizeArgs>;
+    /**
+     * Triggers when the column resizing begins.
+     *
+     * @event resizeStart
+     */
+    resizeStart: EmitType<ResizeArgs>;
+    /**
+     * Triggers when the column resizing ends.
+     *
+     * @event resizeStop
+     */
+    resizeStop: EmitType<ResizeArgs>;
 }
 export interface PopupEventArgs {
     /**
@@ -368,6 +392,18 @@ export interface ChangeEventArgs {
      */
     item: Object;
 }
+export interface ResizeArgs {
+    /**
+     * Defines the details about the column that is currently being resized.
+     */
+    column: ColumnModel;
+    /**
+     * Specifies whether to cancel the resizing operation of the columns.
+     *
+     * @default false
+     */
+    cancel: boolean;
+}
 /**
  * @hidden
  */
@@ -741,6 +777,7 @@ export declare class MultiColumnComboBox extends Component<HTMLElement> implemen
     private matchedContent;
     private isDataFiltered;
     private isInitialRender;
+    private remoteDataLength;
     /**
      * *Constructor for creating the component
      *
@@ -774,6 +811,7 @@ export declare class MultiColumnComboBox extends Component<HTMLElement> implemen
     private persistData;
     protected render(): void;
     private renderGrid;
+    private handleActionComplete;
     private isRowMatching;
     private updateRowSelection;
     private selectDataRow;
@@ -826,6 +864,7 @@ export declare class MultiColumnComboBox extends Component<HTMLElement> implemen
     private keyActionHandler;
     private gridKeyActionHandler;
     private updateSelectedItem;
+    private selectRow;
     private updateClearIconState;
     /**
      * Sets the focus to the component for interaction.component for interaction.

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

@@ -23,7 +23,7 @@ import { formatUnit, addClass, removeClass, Event, Animation } from '@syncfusion
 import { Input } from '@syncfusion/ej2-inputs';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { Popup } from '@syncfusion/ej2-popups';
-import { Grid, VirtualScroll, Group as GridGroup, Edit, Sort } from '@syncfusion/ej2-grids';
+import { Grid, Resize, VirtualScroll, Group as GridGroup, Edit, Sort } from '@syncfusion/ej2-grids';
 var DROPDOWNICON = 'e-input-group-icon e-multicolumn-list-icon e-icons';
 var CONTENT = 'e-popup-content';
 var ICONANIMATION = 'e-icon-anim';
@@ -42,7 +42,7 @@ var MultiColumnGrid = /** @class */ (function () {
      * @private
      */
     MultiColumnGrid.prototype.InjectModules = function () {
-        Grid.Inject(VirtualScroll, GridGroup, Edit, Sort);
+        Grid.Inject(VirtualScroll, GridGroup, Edit, Sort, Resize);
     };
     return MultiColumnGrid;
 }());
@@ -196,6 +196,18 @@ var GridSettings = /** @class */ (function (_super) {
     __decorate([
         Property(WrapMode.Both)
     ], GridSettings.prototype, "textWrapMode", void 0);
+    __decorate([
+        Property(false)
+    ], GridSettings.prototype, "allowResizing", void 0);
+    __decorate([
+        Event()
+    ], GridSettings.prototype, "resizing", void 0);
+    __decorate([
+        Event()
+    ], GridSettings.prototype, "resizeStart", void 0);
+    __decorate([
+        Event()
+    ], GridSettings.prototype, "resizeStop", void 0);
     return GridSettings;
 }(ChildProperty));
 export { GridSettings };
@@ -308,24 +320,13 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             allowTextWrap: this.gridSettings.allowTextWrap,
             textWrapSettings: { wrapMode: this.gridSettings.textWrapMode },
             height: this.popupHeight,
+            allowResizing: this.gridSettings.allowResizing,
             allowMultiSorting: this.sortType.toString().toLowerCase() === 'multiplecolumns' && this.allowSorting,
             rowTemplate: this.itemTemplate,
             dataBound: function () { _this.onDataBound(); },
             actionFailure: function (args) { _this.onActionFailure(args); },
             actionBegin: function (args) { _this.trigger('actionBegin', args); },
-            actionComplete: function (args) {
-                _this.trigger('actionComplete', args);
-                if (args.requestType === 'sorting') {
-                    _this.updateRowSelection(args);
-                }
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                var dataRows = args.rows;
-                if (_this.isDataFiltered && dataRows.length > 0 && _this.inputEle.value !== '' && args.requestType !== 'sorting') {
-                    var firstRowEle = _this.gridObj.getRows()[0];
-                    firstRowEle.classList.add('e-row-focus');
-                }
-                _this.popupObj.refreshPosition();
-            },
+            actionComplete: this.handleActionComplete.bind(this),
             keyPressed: function (args) {
                 if (args.key === 'Enter') {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -341,7 +342,10 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                     args.cancel = true;
                     _this.gridKeyActionHandler(args, true);
                 }
-            }
+            },
+            resizing: function (args) { _this.gridSettings.resizing(args); },
+            resizeStart: function (args) { _this.gridSettings.resizeStart(args); },
+            resizeStop: function (args) { _this.gridSettings.resizeStop(args); }
         });
         this.gridEle = this.createElement('div', { id: getUniqueID('grid'), className: MULTICOLUMNGRID });
         this.updateGroupByField();
@@ -356,6 +360,14 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         }
         this.gridObj.appendTo(this.gridEle);
     };
+    MultiColumnComboBox.prototype.handleActionComplete = function (args) {
+        this.trigger('actionComplete', args);
+        if (args.requestType === 'sorting') {
+            this.updateRowSelection(args);
+        }
+        this.popupObj.refreshPosition();
+        this.gridObj.element.querySelector('.e-content').scrollTop = 0;
+    };
     /* eslint-disable @typescript-eslint/no-explicit-any */
     MultiColumnComboBox.prototype.isRowMatching = function (data, selectedValue, selectedText) {
         var values = Object.values(data).map(String);
@@ -456,6 +468,11 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             this.popupEle.style.visibility = 'unset';
             this.isInitialRender = false;
         }
+        var rowElements = this.gridObj.element.querySelectorAll('.e-row');
+        if (this.isDataFiltered && rowElements.length > 0 && this.inputEle.value !== '') {
+            var firstRowEle = rowElements[0];
+            firstRowEle.classList.add('e-row-focus');
+        }
     };
     MultiColumnComboBox.prototype.onActionFailure = function (args) {
         this.trigger('actionFailure', args);
@@ -1283,33 +1300,44 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         }
     };
     MultiColumnComboBox.prototype.updateSelectedItem = function (e, isUpdateIndex, isInputTarget) {
+        var _this = this;
         if (isUpdateIndex === void 0) { isUpdateIndex = true; }
         if (this.isPopupOpen) {
-            var index = !this.fields.groupBy ? this.gridObj.selectedRowIndex
-                : this.gridObj.selectedRowIndex ? this.gridObj.selectedRowIndex : 0;
-            if ((index === -1 && (e.action === 'moveDown' || e.action === 'moveUp')) || (e.action === 'home')) {
-                index = 0;
+            var index_1 = this.fields.groupBy ? (this.gridObj.selectedRowIndex || 0) : this.gridObj.selectedRowIndex;
+            var dataLength = this.dataSource instanceof DataManager ? this.remoteDataLength :
+                this.dataSource.length;
+            if ((index_1 === -1 && (e.action === 'moveDown' || e.action === 'moveUp')) || (e.action === 'home')) {
+                index_1 = 0;
             }
-            else if ((index >= this.gridObj.getRows().length && e.action === 'moveDown') || (e.action === 'end')) {
-                index = this.gridObj.getRows().length - 1;
+            else if ((index_1 >= (dataLength - 1) && e.action === 'moveDown') || (e.action === 'end')) {
+                index_1 = dataLength - 1;
             }
-            else if (e.action === 'moveDown' && (index >= 0 && index <= this.gridObj.getRows().length) && (this.fields.groupBy || isInputTarget)) {
-                index += 1;
+            else if (e.action === 'moveDown' && (index_1 >= 0 && index_1 <= (dataLength - 1)) && (this.fields.groupBy || isInputTarget)) {
+                index_1 += 1;
             }
-            else if (e.action === 'moveUp' && index > 0 && (this.fields.groupBy) || isInputTarget) {
-                index -= 1;
+            else if (e.action === 'moveUp' && index_1 > 0 && (this.fields.groupBy) || isInputTarget) {
+                index_1 -= 1;
             }
-            this.gridObj.selectRow(index);
-            this.gridObj.selectedRowIndex = index;
-            var focusedEle = this.gridEle.querySelector('.e-row-focus');
-            if (focusedEle) {
-                focusedEle.classList.remove('e-row-focus');
+            if (!this.enableVirtualization) {
+                this.selectRow(e, isUpdateIndex, index_1);
             }
-            if (isUpdateIndex) {
-                this.selectedGridRow(this.gridObj.getRows()[parseInt(index.toString(), 10)], e, true);
+            else {
+                setTimeout(function () { _this.selectRow(e, isUpdateIndex, index_1); });
             }
         }
     };
+    MultiColumnComboBox.prototype.selectRow = function (e, isUpdateIndex, index) {
+        if (isUpdateIndex === void 0) { isUpdateIndex = true; }
+        this.gridObj.selectRow(index);
+        this.gridObj.selectedRowIndex = index;
+        var focusedEle = this.gridEle.querySelector('.e-row-focus');
+        if (focusedEle) {
+            focusedEle.classList.remove('e-row-focus');
+        }
+        if (isUpdateIndex) {
+            this.selectedGridRow(this.gridObj.getRows()[parseInt(index.toString(), 10)], e, true);
+        }
+    };
     MultiColumnComboBox.prototype.updateClearIconState = function () {
         var clearIconEle = this.inputWrapper.querySelector('.e-clear-icon');
         if (clearIconEle) {
@@ -1404,6 +1432,12 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                         _this.inputEle.setAttribute('aria-activedescendant', contentEle.querySelector('.e-row').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);
             }
         });
@@ -1657,6 +1691,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                         this.gridObj.gridLines = newProp.gridSettings.gridLines;
                         this.gridObj.rowHeight = newProp.gridSettings.rowHeight;
                         this.gridObj.enableAltRow = newProp.gridSettings.enableAltRow;
+                        this.gridObj.allowResizing = newProp.gridSettings.allowResizing;
                         if (!(isNOU(newProp.gridSettings.allowTextWrap))) {
                             this.gridObj.allowTextWrap = newProp.gridSettings.allowTextWrap;
                         }