@syncfusion/ej2-multicolumn-combobox 26.2.10 → 27.1.48

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

@@ -169,11 +169,11 @@ __decorate([
  * The selected value will be displayed in the input element.
  *
  * ```html
- *  <input type="text" id="multi-column"></input>
+ *  <input type='text' id='multi-column'></input>
  * ```
  * ```typescript
  *  let multiColObj: MultiColumnComboBox = new MultiColumnComboBox();
- *  multiColObj.appendTo("#multi-column");
+ *  multiColObj.appendTo('#multi-column');
  * ```
  */
 let MultiColumnComboBox = class MultiColumnComboBox extends Component {
@@ -280,6 +280,7 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                 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];
@@ -315,7 +316,7 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         }
         this.gridObj.appendTo(this.gridEle);
     }
-    // eslint-disable @typescript-eslint/no-explicit-any
+    /* eslint-disable @typescript-eslint/no-explicit-any */
     isRowMatching(data, selectedValue, selectedText) {
         const values = Object.values(data).map(String);
         const isRowPresent = values.includes(selectedValue) && values.includes(selectedText);
@@ -344,11 +345,11 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
     }
     findIndex(arr, obj) {
         return arr.findIndex((item) => {
-            return Object.keys(obj).every(key => item[key] === obj[key]);
+            // eslint-disable-next-line
+            return Object.keys(obj).every((key) => item[key] === obj[key]);
         });
     }
-    ;
-    // eslint-enable @typescript-eslint/no-explicit-any
+    /* eslint-enable @typescript-eslint/no-explicit-any */
     getGridColumns() {
         return this.columns.map((column) => {
             let changeType;
@@ -381,7 +382,7 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                 showDropArea: false,
                 columns: [this.fields.groupBy],
                 captionTemplate: (this.groupTemplate && this.fields.groupBy !== '' && !isNullOrUndefined(this.fields.groupBy))
-                    ? this.groupTemplate : "${key}"
+                    ? this.groupTemplate : '${key}'
             };
             if (this.isVue) {
                 this.gridObj.isVue = this.isVue;
@@ -405,7 +406,9 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
             }
         }
         if (this.isInitialRender) {
-            const rowHeight = !this.popupDiv.classList.contains(NODATA) ? this.popupDiv.querySelector('.e-gridcontent tr').getBoundingClientRect().height : this.popupDiv.getBoundingClientRect().height;
+            const rowHeight = !this.popupDiv.classList.contains(NODATA) ? this.popupDiv.querySelector('.e-gridcontent tr') ?
+                this.popupDiv.querySelector('.e-gridcontent tr').getBoundingClientRect().height : 0 :
+                this.popupDiv.getBoundingClientRect().height;
             this.popupRowHeight = rowHeight;
             this.popupObj.hide();
             this.popupEle.style.visibility = 'unset';
@@ -584,8 +587,29 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                 });
             }
             else if (!isNullOrUndefined(this.dataSource) && this.dataSource instanceof Array) {
-                item = this.dataSource[this.index];
-                updateValues(this.dataSource);
+                if (!this.fields.groupBy) {
+                    item = this.dataSource[this.index];
+                    updateValues(this.dataSource);
+                }
+                else {
+                    setTimeout(() => {
+                        const rows = this.gridObj.getRows();
+                        if (rows && rows.length > 0) {
+                            const rowData = this.gridObj.getRowInfo(rows[this.index]).rowData;
+                            const value = this.fields.value;
+                            for (let i = 0; i < rows.length; i++) {
+                                if (rowData && rowData[parseInt(value.toString(), 10)] ===
+                                    this.dataSource[parseInt(i.toString(), 10)][parseInt(value.toString(), 10)]) {
+                                    item = rowData;
+                                    updateValues(this.dataSource);
+                                    this.updateChangeEvent(item, prevItemData, prevItemEle, currentValue, currentText, currentIndex, isRerender, isInitial);
+                                    this.gridObj.selectRow(this.index);
+                                    break;
+                                }
+                            }
+                        }
+                    });
+                }
             }
         }
         if (!(this.dataSource instanceof DataManager)) {
@@ -864,6 +888,7 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         let data;
         if (this.dataSource instanceof DataManager) {
             const query = new Query();
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.dataSource.executeQuery(query).then((result) => {
                 const totaldata = result.result;
                 data = totaldata.filter((item) => {
@@ -896,25 +921,45 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     filterAction(dataSource, inputValue, query, fields) {
-        const filterType = this.filterType.toString().toLowerCase();
-        const isQuery = query || new Query();
-        let filteredData;
-        if (dataSource instanceof DataManager) {
-            // Handle filtering for DataManager
-            dataSource.executeQuery(isQuery).then((e) => {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                const dataLists = e.result;
-                const dataLength = dataLists.length;
-                filteredData = dataLists.filter((item) => this.filterData(item, filterType, inputValue, fields));
-                this.updateGridDataSource(filteredData, dataLength);
-            });
+        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 (Array.isArray(dataSource)) {
-            // Handle filtering for array data source
-            filteredData = dataSource.filter((item) => this.filterData(item, filterType, inputValue, fields));
-            this.updateGridDataSource(filteredData);
+        else {
+            const isQuery = query || new Query();
+            if (dataSource instanceof DataManager) {
+                this.filteringHandler(dataSource, inputValue, isQuery, fields);
+            }
+            else if (Array.isArray(dataSource)) {
+                const filterType = this.filterType.toString().toLowerCase();
+                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;
+            const dataLength = dataLists.length;
+            filteredData = dataLists.filter((item) => this.filterData(item, filterType, inputValue, fields));
+            this.updateGridDataSource(filteredData, dataLength);
+        });
+    }
     filterData(item, filterType, inputValue, fields) {
         const itemValue = item[fields ? fields.text : this.fields.text].toString().toLowerCase();
         switch (filterType) {
@@ -931,7 +976,8 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
     updateGridDataSource(dataSource, dataLength) {
         let autoHeight = true;
         if (dataSource.length > 0) {
-            const length = this.dataSource instanceof DataManager ? dataLength : this.dataSource.length;
+            const length = this.dataSource instanceof DataManager ? dataLength
+                : this.dataSource.length;
             autoHeight = length !== dataSource.length;
             removeClass([this.popupDiv], [NODATA]);
             const noRecordEle = this.popupDiv.querySelector('.e-no-records');
@@ -1009,7 +1055,7 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
     onMouseClick(e) {
         const target = e.target;
         const row = closest(target, '.e-row');
-        let selectedRowIndex = this.gridObj.selectedRowIndex;
+        const selectedRowIndex = this.gridObj.selectedRowIndex;
         if (row) {
             if (selectedRowIndex >= 0) {
                 this.selectedGridRow(row, e);
@@ -1038,7 +1084,7 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
             }
         }
     }
-    updateValuesOnInput(mouseEvent, keyEvent, isClearValues) {
+    updateValuesOnInput(mouseEvent, keyEvent, isClearValues = false) {
         const e = mouseEvent ? mouseEvent : keyEvent;
         this.hidePopup(e);
         if (this.matchedRowEle && !isClearValues) {
@@ -1184,7 +1230,8 @@ 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
+                : this.gridObj.selectedRowIndex ? this.gridObj.selectedRowIndex : 0;
             if ((index === -1 && (e.action === 'moveDown' || e.action === 'moveUp')) || (e.action === 'home')) {
                 index = 0;
             }
@@ -1204,7 +1251,7 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                 focusedEle.classList.remove('e-row-focus');
             }
             if (isUpdateIndex) {
-                this.selectedGridRow(this.gridObj.getRows()[index], e, true);
+                this.selectedGridRow(this.gridObj.getRows()[parseInt(index.toString(), 10)], e, true);
             }
         }
     }
@@ -1245,19 +1292,22 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         if (this.isPopupOpen) {
             this.hidePopup(e);
         }
-        removeClass([this.inputWrapper], [INPUTFOCUS]);
-        const clearIconEle = this.inputWrapper.querySelector('.e-clear-icon');
-        if (clearIconEle) {
-            clearIconEle.style.display = 'none';
-        }
-        if (this.floatLabelType !== 'Never') {
-            Input.calculateWidth(this.inputEle, this.inputWrapper);
+        if (this.inputWrapper) {
+            removeClass([this.inputWrapper], [INPUTFOCUS]);
+            const clearIconEle = this.inputWrapper.querySelector('.e-clear-icon');
+            if (clearIconEle) {
+                clearIconEle.style.display = 'none';
+            }
+            if (this.floatLabelType !== 'Never') {
+                Input.calculateWidth(this.inputEle, this.inputWrapper);
+            }
         }
     }
     /**
      * Opens the popup that displays the list of items.
      *
      * @param {MouseEvent | KeyboardEventArgs | TouchEvent} e - Specifies the event.
+     * @param {boolean} isInputOpen - Specifies whether the input is open or not.
      * @returns {void}
      */
     showPopup(e, isInputOpen) {
@@ -1271,9 +1321,19 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                 attributes(this.inputEle, { 'aria-expanded': 'true', 'aria-owns': this.element.id + '_popup', 'aria-controls': this.element.id });
                 if (!isInputOpen) {
                     if ((this.value || this.text || this.index)) {
-                        const dataRows = this.gridObj.currentViewData;
+                        const dataRows = this.gridObj.getRowsObject();
+                        let groupIndex;
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         dataRows.forEach((data, index) => {
-                            this.selectDataRow(data, index);
+                            if (this.fields.groupBy && isNullOrUndefined(data.data.items)) {
+                                if (isNullOrUndefined(groupIndex)) {
+                                    groupIndex = 0;
+                                }
+                                else {
+                                    groupIndex += 1;
+                                }
+                            }
+                            this.selectDataRow(data.data, !this.fields.groupBy ? index : groupIndex);
                         });
                     }
                     this.focusIn(e);
@@ -1485,12 +1545,14 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                     this.initValue(true, false);
                     break;
                 case 'index':
-                    this.initValue();
+                    this.initValue(true);
                     break;
                 case 'sortOrder':
                     if (this.gridObj) {
-                        this.gridObj.sortSettings.columns = [{ field: this.fields.text, direction: newProp.sortOrder === SortOrder.Ascending ?
-                                    SortOrder.Ascending : SortOrder.Descending }];
+                        this.gridObj.sortSettings.columns = [{
+                                field: this.fields.text, direction: newProp.sortOrder === SortOrder.Ascending ?
+                                    SortOrder.Ascending : SortOrder.Descending
+                            }];
                     }
                     break;
                 case 'htmlAttributes':
@@ -1557,7 +1619,10 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                     }
                     break;
                 case 'sortType':
-                    this.sortType = newProp.sortType;
+                    if (this.gridObj) {
+                        this.sortType = newProp.sortType;
+                        this.gridObj.allowMultiSorting = this.sortType.toString().toLowerCase() === 'multiplecolumns' && this.allowSorting;
+                    }
                     break;
                 case 'allowFiltering':
                     this.allowFiltering = newProp.allowFiltering;