igniteui-angular 12.3.21 → 12.3.22

package/fesm2015/igniteui-angular.js

@@ -41404,6 +41404,7 @@ class IgxExcelStyleCustomDialogComponent {
                 this.grid.rootGrid ? this.grid.rootGrid.nativeElement : this.grid.nativeElement :
                 esf;
         this.toggle.open(this._customDialogOverlaySettings);
+        this.overlayComponentId = this.toggle.overlayId;
     }
     onClearButtonClick() {
         this.filteringService.clearFilter(this.column.field);
@@ -41413,6 +41414,7 @@ class IgxExcelStyleCustomDialogComponent {
     closeDialog() {
         if (this.overlayComponentId) {
             this.overlayService.hide(this.overlayComponentId);
+            this.overlayComponentId = null;
         }
         else {
             this.toggle.close();
@@ -43920,7 +43922,8 @@ class IgxGridNavigationService {
         if (rowIndex < 0 || rowIndex > this.grid.dataView.length - 1) {
             curRow = this.grid.dataView[rowIndex - this.grid.virtualizationState.startIndex];
             if (!curRow) {
-                return false;
+                // if data is remote, record might not be in the view yet.
+                return this.grid.verticalScrollContainer.isRemote && rowIndex >= 0 && rowIndex <= this.grid.totalItemCount - 1;
             }
         }
         else {
@@ -44192,8 +44195,11 @@ class IgxGridNavigationService {
         event.preventDefault();
         if ((this.grid.crudService.rowInEditMode && this.grid.rowEditTabs.length) &&
             (this.activeNode.row !== next.rowIndex || this.isActiveNode(next.rowIndex, next.visibleColumnIndex))) {
-            this.grid.crudService.updateCell(true, event);
-            if (shift) {
+            const args = this.grid.crudService.updateCell(true, event);
+            if (args.cancel) {
+                return;
+            }
+            else if (shift) {
                 this.grid.rowEditTabs.last.element.nativeElement.focus();
             }
             else {
@@ -53750,22 +53756,24 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      */
     getNextCell(currRowIndex, curVisibleColIndex, callback = null) {
         const columns = this.columnList.filter(col => !col.columnGroup && col.visibleIndex >= 0);
-        if (!this.isValidPosition(currRowIndex, curVisibleColIndex)) {
+        const dataViewIndex = this._getDataViewIndex(currRowIndex);
+        if (!this.isValidPosition(dataViewIndex, curVisibleColIndex)) {
             return { rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex };
         }
         const colIndexes = callback ? columns.filter((col) => callback(col)).map(editCol => editCol.visibleIndex).sort((a, b) => a - b) :
             columns.map(editCol => editCol.visibleIndex).sort((a, b) => a - b);
         const nextCellIndex = colIndexes.find(index => index > curVisibleColIndex);
-        if (this.dataView.slice(currRowIndex, currRowIndex + 1)
+        if (this.dataView.slice(dataViewIndex, dataViewIndex + 1)
             .find(rec => !rec.expression && !rec.summaries && !rec.childGridsData && !rec.detailsData) && nextCellIndex !== undefined) {
             return { rowIndex: currRowIndex, visibleColumnIndex: nextCellIndex };
         }
         else {
-            if (colIndexes.length === 0 || this.getNextDataRowIndex(currRowIndex) === currRowIndex) {
+            const nextIndex = this.getNextDataRowIndex(currRowIndex);
+            if (colIndexes.length === 0 || nextIndex === currRowIndex) {
                 return { rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex };
             }
             else {
-                return { rowIndex: this.getNextDataRowIndex(currRowIndex), visibleColumnIndex: colIndexes[0] };
+                return { rowIndex: nextIndex, visibleColumnIndex: colIndexes[0] };
             }
         }
     }
@@ -53783,22 +53791,24 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      */
     getPreviousCell(currRowIndex, curVisibleColIndex, callback = null) {
         const columns = this.columnList.filter(col => !col.columnGroup && col.visibleIndex >= 0);
-        if (!this.isValidPosition(currRowIndex, curVisibleColIndex)) {
+        const dataViewIndex = this._getDataViewIndex(currRowIndex);
+        if (!this.isValidPosition(dataViewIndex, curVisibleColIndex)) {
             return { rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex };
         }
         const colIndexes = callback ? columns.filter((col) => callback(col)).map(editCol => editCol.visibleIndex).sort((a, b) => b - a) :
             columns.map(editCol => editCol.visibleIndex).sort((a, b) => b - a);
         const prevCellIndex = colIndexes.find(index => index < curVisibleColIndex);
-        if (this.dataView.slice(currRowIndex, currRowIndex + 1)
+        if (this.dataView.slice(dataViewIndex, dataViewIndex + 1)
             .find(rec => !rec.expression && !rec.summaries && !rec.childGridsData && !rec.detailsData) && prevCellIndex !== undefined) {
             return { rowIndex: currRowIndex, visibleColumnIndex: prevCellIndex };
         }
         else {
-            if (colIndexes.length === 0 || this.getNextDataRowIndex(currRowIndex, true) === currRowIndex) {
+            const prevIndex = this.getNextDataRowIndex(currRowIndex, true);
+            if (colIndexes.length === 0 || prevIndex === currRowIndex) {
                 return { rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex };
             }
             else {
-                return { rowIndex: this.getNextDataRowIndex(currRowIndex, true), visibleColumnIndex: colIndexes[0] };
+                return { rowIndex: prevIndex, visibleColumnIndex: colIndexes[0] };
             }
         }
     }
@@ -54382,7 +54392,6 @@ class IgxGridBaseDirective extends DisplayDensityBase {
             let added = false;
             let removed = false;
             diff.forEachAddedItem((record) => {
-                this.columnInit.emit(record.item);
                 added = true;
                 if (record.item.pinned) {
                     this._pinnedColumns.push(record.item);
@@ -54391,7 +54400,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
                     this._unpinnedColumns.push(record.item);
                 }
             });
-            this.initColumns(this.columnList);
+            this.initColumns(this.columnList, (col) => this.columnInit.emit(col));
             diff.forEachRemovedItem((record) => {
                 const isColumnGroup = record.item instanceof IgxColumnGroupComponent;
                 if (!isColumnGroup) {
@@ -55012,6 +55021,31 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         }
         directive.scrollTo(goal);
     }
+    /**
+     * @hidden
+     * @internal
+     */
+    _getDataViewIndex(index) {
+        let newIndex = index;
+        if ((index < 0 || index >= this.dataView.length) && this.pagingMode === 1 && this.paginator.page !== 0) {
+            newIndex = index - this.paginator.perPage * this.paginator.page;
+        }
+        else if (this.gridAPI.grid.verticalScrollContainer.isRemote) {
+            newIndex = index - this.gridAPI.grid.virtualizationState.startIndex;
+        }
+        return newIndex;
+    }
+    /**
+     * @hidden
+     * @internal
+     */
+    getDataIndex(dataViewIndex) {
+        let newIndex = dataViewIndex;
+        if (this.gridAPI.grid.verticalScrollContainer.isRemote) {
+            newIndex = dataViewIndex + this.gridAPI.grid.virtualizationState.startIndex;
+        }
+        return newIndex;
+    }
     getColumnWidthSum() {
         let colSum = 0;
         const cols = this.hasColumnLayouts ?
@@ -55111,7 +55145,8 @@ class IgxGridBaseDirective extends DisplayDensityBase {
                     cb(cbArgs);
                 });
             }
-            if (this.dataView[rowIndex].detailsData) {
+            const dataViewIndex = this._getDataViewIndex(rowIndex);
+            if (this.dataView[dataViewIndex].detailsData) {
                 this.navigation.setActiveNode({ row: rowIndex });
                 this.cdr.detectChanges();
             }
@@ -55145,13 +55180,15 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         return { targetType, target };
     }
     getNextDataRowIndex(currentRowIndex, previous = false) {
-        if (currentRowIndex < 0 || (currentRowIndex === 0 && previous) || (currentRowIndex >= this.dataView.length - 1 && !previous)) {
+        const resolvedIndex = this._getDataViewIndex(currentRowIndex);
+        if (currentRowIndex < 0 || (currentRowIndex === 0 && previous) || (resolvedIndex >= this.dataView.length - 1 && !previous)) {
             return currentRowIndex;
         }
         // find next/prev record that is editable.
         const nextRowIndex = previous ? this.findPrevEditableDataRowIndex(currentRowIndex) :
-            this.dataView.findIndex((rec, index) => index > currentRowIndex && this.isEditableDataRecordAtIndex(index));
-        return nextRowIndex !== -1 ? nextRowIndex : currentRowIndex;
+            this.dataView.findIndex((rec, index) => index > resolvedIndex && this.isEditableDataRecordAtIndex(index));
+        const nextDataIndex = this.getDataIndex(nextRowIndex);
+        return nextDataIndex !== -1 ? nextDataIndex : currentRowIndex;
     }
     /**
      * Returns the previous editable row index or -1 if no such row is found.
@@ -55160,8 +55197,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      */
     findPrevEditableDataRowIndex(currentIndex) {
         let i = this.dataView.length;
+        const resolvedIndex = this._getDataViewIndex(currentIndex);
         while (i--) {
-            if (i < currentIndex && this.isEditableDataRecordAtIndex(i)) {
+            if (i < resolvedIndex && this.isEditableDataRecordAtIndex(i)) {
                 return i;
             }
         }
@@ -56933,7 +56971,10 @@ class IgxGridCellComponent {
         const node = this.selectionNode;
         const shouldEmitSelection = !this.selectionService.isActiveNode(node);
         if (this.selectionService.primaryButton) {
-            this._updateCRUDStatus(event);
+            const cancel = this._updateCRUDStatus(event);
+            if (cancel) {
+                return;
+            }
             const activeElement = this.selectionService.activeElement;
             const row = activeElement ? this.gridAPI.get_row_by_index(activeElement.row) : null;
             if ((this.grid.crudService.rowEditingBlocked && row && this.intRow.rowID !== row.rowID) ||
@@ -62663,7 +62704,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
      */
     createRow(index, data) {
         let row;
-        const dataIndex = this._getResolvedDataIndex(index);
+        const dataIndex = this._getDataViewIndex(index);
         const rec = data !== null && data !== void 0 ? data : this.dataView[dataIndex];
         if (rec && this.isGroupByRecord(rec)) {
             row = new IgxGroupByRow(this, index, rec);
@@ -66008,7 +66049,7 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
      */
     createRow(index, data) {
         let row;
-        const dataIndex = this._getResolvedDataIndex(index);
+        const dataIndex = this._getDataViewIndex(index);
         const rec = data !== null && data !== void 0 ? data : this.dataView[dataIndex];
         if (this.isSummaryRow(rec)) {
             row = new IgxSummaryRow(this, index, rec.summaries, GridInstanceType.TreeGrid);
@@ -68798,7 +68839,7 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
      */
     isChildGridRecord(record) {
         // Can be null when there is defined layout but no child data was found
-        return record.childGridsData !== undefined;
+        return (record === null || record === void 0 ? void 0 : record.childGridsData) !== undefined;
     }
     /**
      * @hidden
@@ -68992,7 +69033,7 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
      */
     createRow(index, data) {
         let row;
-        const dataIndex = this._getResolvedDataIndex(index);
+        const dataIndex = this._getDataViewIndex(index);
         const rec = data !== null && data !== void 0 ? data : this.dataView[dataIndex];
         if (!row && rec && !rec.childGridsData) {
             row = new IgxHierarchicalGridRow(this, index, rec);