@syncfusion/ej2-multicolumn-combobox 27.2.2 → 27.2.4

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

@@ -1,8 +1,8 @@
-import { ChildProperty, Property, Component, getUniqueID, isNullOrUndefined, addClass, removeClass, formatUnit, attributes, prepend, Browser, append, L10n, select, compile, EventHandler, KeyboardEvents, closest, Animation, detach, Complex, Collection, Event, NotifyPropertyChanges } from '@syncfusion/ej2-base';
+import { ChildProperty, Property, Event, Component, getUniqueID, isNullOrUndefined, addClass, removeClass, formatUnit, attributes, prepend, Browser, append, L10n, select, compile, EventHandler, KeyboardEvents, closest, Animation, detach, Complex, Collection, NotifyPropertyChanges } from '@syncfusion/ej2-base';
 import { Input } from '@syncfusion/ej2-inputs';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { Popup } from '@syncfusion/ej2-popups';
-import { Grid, VirtualScroll, Group, Edit, Sort } from '@syncfusion/ej2-grids';
+import { Grid, VirtualScroll, Group, Edit, Sort, Resize } from '@syncfusion/ej2-grids';
 export { Edit, Group, Sort, VirtualScroll } from '@syncfusion/ej2-grids';
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -27,7 +27,7 @@ class MultiColumnGrid {
      * @private
      */
     InjectModules() {
-        Grid.Inject(VirtualScroll, Group, Edit, Sort);
+        Grid.Inject(VirtualScroll, Group, Edit, Sort, Resize);
     }
 }
 /**
@@ -164,6 +164,18 @@ __decorate([
 __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);
 /**
  * The `MultiColumnComboBox` allows the user to search and select values from a list. It provides a list of options that can be selected using a filter input.
  * The selected value will be displayed in the input element.
@@ -270,24 +282,13 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
             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: () => { this.onDataBound(); },
             actionFailure: (args) => { this.onActionFailure(args); },
             actionBegin: (args) => { this.trigger('actionBegin', args); },
-            actionComplete: (args) => {
-                this.trigger('actionComplete', args);
-                if (args.requestType === 'sorting') {
-                    this.updateRowSelection(args);
-                }
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                const dataRows = args.rows;
-                if (this.isDataFiltered && dataRows.length > 0 && this.inputEle.value !== '' && args.requestType !== 'sorting') {
-                    const firstRowEle = this.gridObj.getRows()[0];
-                    firstRowEle.classList.add('e-row-focus');
-                }
-                this.popupObj.refreshPosition();
-            },
+            actionComplete: this.handleActionComplete.bind(this),
             keyPressed: (args) => {
                 if (args.key === 'Enter') {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -303,7 +304,10 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                     args.cancel = true;
                     this.gridKeyActionHandler(args, true);
                 }
-            }
+            },
+            resizing: (args) => { this.gridSettings.resizing(args); },
+            resizeStart: (args) => { this.gridSettings.resizeStart(args); },
+            resizeStop: (args) => { this.gridSettings.resizeStop(args); }
         });
         this.gridEle = this.createElement('div', { id: getUniqueID('grid'), className: MULTICOLUMNGRID });
         this.updateGroupByField();
@@ -318,6 +322,14 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         }
         this.gridObj.appendTo(this.gridEle);
     }
+    handleActionComplete(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 */
     isRowMatching(data, selectedValue, selectedText) {
         const values = Object.values(data).map(String);
@@ -416,6 +428,11 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
             this.popupEle.style.visibility = 'unset';
             this.isInitialRender = false;
         }
+        const rowElements = this.gridObj.element.querySelectorAll('.e-row');
+        if (this.isDataFiltered && rowElements.length > 0 && this.inputEle.value !== '') {
+            const firstRowEle = rowElements[0];
+            firstRowEle.classList.add('e-row-focus');
+        }
     }
     onActionFailure(args) {
         this.trigger('actionFailure', args);
@@ -1232,31 +1249,40 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
     }
     updateSelectedItem(e, isUpdateIndex = true, isInputTarget) {
         if (this.isPopupOpen) {
-            let index = !this.fields.groupBy ? this.gridObj.selectedRowIndex
-                : this.gridObj.selectedRowIndex ? this.gridObj.selectedRowIndex : 0;
+            let index = this.fields.groupBy ? (this.gridObj.selectedRowIndex || 0) : this.gridObj.selectedRowIndex;
+            const dataLength = this.dataSource instanceof DataManager ? this.remoteDataLength :
+                this.dataSource.length;
             if ((index === -1 && (e.action === 'moveDown' || e.action === 'moveUp')) || (e.action === 'home')) {
                 index = 0;
             }
-            else if ((index >= this.gridObj.getRows().length && e.action === 'moveDown') || (e.action === 'end')) {
-                index = this.gridObj.getRows().length - 1;
+            else if ((index >= (dataLength - 1) && e.action === 'moveDown') || (e.action === 'end')) {
+                index = dataLength - 1;
             }
-            else if (e.action === 'moveDown' && (index >= 0 && index <= this.gridObj.getRows().length) && (this.fields.groupBy || isInputTarget)) {
+            else if (e.action === 'moveDown' && (index >= 0 && index <= (dataLength - 1)) && (this.fields.groupBy || isInputTarget)) {
                 index += 1;
             }
             else if (e.action === 'moveUp' && index > 0 && (this.fields.groupBy) || isInputTarget) {
                 index -= 1;
             }
-            this.gridObj.selectRow(index);
-            this.gridObj.selectedRowIndex = index;
-            const focusedEle = this.gridEle.querySelector('.e-row-focus');
-            if (focusedEle) {
-                focusedEle.classList.remove('e-row-focus');
+            if (!this.enableVirtualization) {
+                this.selectRow(e, isUpdateIndex, index);
             }
-            if (isUpdateIndex) {
-                this.selectedGridRow(this.gridObj.getRows()[parseInt(index.toString(), 10)], e, true);
+            else {
+                setTimeout(() => { this.selectRow(e, isUpdateIndex, index); });
             }
         }
     }
+    selectRow(e, isUpdateIndex = true, index) {
+        this.gridObj.selectRow(index);
+        this.gridObj.selectedRowIndex = index;
+        const 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);
+        }
+    }
     updateClearIconState() {
         const clearIconEle = this.inputWrapper.querySelector('.e-clear-icon');
         if (clearIconEle) {
@@ -1350,6 +1376,12 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                         this.inputEle.setAttribute('aria-activedescendant', contentEle.querySelector('.e-row').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);
             }
         });
@@ -1600,6 +1632,7 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                         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 (!(isNullOrUndefined(newProp.gridSettings.allowTextWrap))) {
                             this.gridObj.allowTextWrap = newProp.gridSettings.allowTextWrap;
                         }