Merge remote-tracking branch 'remotes/origin/master' into mvenkov/remove-internal-overlay-outlets

Author: wnvko

projects/igniteui-angular/core/src/data-operations/merge-strategy.ts

@@ -74,7 +74,7 @@ export class DefaultMergeStrategy implements IGridMergeStrategy {
                 index++;
                 continue;
             }
-            const recToUpdateData = recData ?? { recordRef: grid.isGhostRecord(rec) ? rec.recordRef : rec, cellMergeMeta: new Map<string, IMergeByResult>(), ghostRecord: rec.ghostRecord };
+            const recToUpdateData = recData ?? { recordRef: grid.isGhostRecord(rec) ? rec.recordRef : rec, cellMergeMeta: new Map<string, IMergeByResult>(), ghostRecord: rec.ghostRecord, index: index };
             recToUpdateData.cellMergeMeta.set(field, { rowSpan: 1, childRecords: [] });
             if (prev && comparer.call(this, prev.recordRef, recToUpdateData.recordRef, field, isDate, isTime) && prev.ghostRecord === recToUpdateData.ghostRecord) {
                 const root = prev.cellMergeMeta.get(field)?.root ?? prev;

projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts

@@ -275,8 +275,11 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
     protected _differ: IterableDiffer<T> | null = null;
     protected _trackByFn: TrackByFunction<T>;
     protected individualSizeCache: number[] = [];
+    /**
+     * @hidden
+     */
     /** Internal track for scroll top that is being virtualized */
-    protected _virtScrollPosition = 0;
+    public _virtScrollPosition = 0;
     /** If the next onScroll event is triggered due to internal setting of scrollTop */
     protected _bScrollInternal = false;
     // End properties related to virtual height handling
@@ -901,7 +904,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
                 const maxVirtScrollTop = this._virtSize - containerSize;
                 this._bScrollInternal = true;
                 this._virtScrollPosition = maxVirtScrollTop;
-                this.scrollPosition = maxVirtScrollTop;
+                this.scrollPosition = maxVirtScrollTop / this._virtRatio;
                 return;
             }
             if (this._adjustToIndex) {
@@ -1529,11 +1532,12 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
         let currentScroll = this.scrollPosition;
         if (this._virtRatio !== 1) {
             this._calcVirtualScrollPosition(this.scrollPosition);
-            currentScroll = this._virtScrollPosition;
+            scrollOffset = this.fixedUpdateAllElements(this._virtScrollPosition);
+        } else {
+            const scroll = this.scrollComponent.nativeElement;
+            scrollOffset = scroll && this.scrollComponent.size ?
+            currentScroll - this.sizesCache[this.state.startIndex] : 0;
         }
-        const scroll = this.scrollComponent.nativeElement;
-        scrollOffset = scroll && this.scrollComponent.size ?
-        currentScroll - this.sizesCache[this.state.startIndex] : 0;
         const dir = this.igxForScrollOrientation === 'horizontal' ? 'left' : 'transform';
         this.dc.instance._viewContainer.element.nativeElement.style[dir] = this.igxForScrollOrientation === 'horizontal' ?
          -(scrollOffset) + 'px' :

projects/igniteui-angular/grids/grid/src/grid-add-row.spec.ts

@@ -4,7 +4,8 @@ import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
 import { DebugElement } from '@angular/core';
 import { GridFunctions, GridSummaryFunctions } from '../../../test-utils/grid-functions.spec';
 import {
-    IgxAddRowComponent, IgxGridRowEditingDefinedColumnsComponent, IgxGridRowEditingTransactionComponent
+    IgxAddRowComponent, IgxGridRowEditingDefinedColumnsComponent, IgxGridRowEditingTransactionComponent,
+    GridDynamicActionStripComponent
 } from '../../../test-utils/grid-samples.spec';
 
 import { By } from '@angular/platform-browser';
@@ -45,7 +46,8 @@ describe('IgxGrid - Row Adding #grid', () => {
                 IgxGridRowEditingTransactionComponent,
                 IgxGridRowEditingDefinedColumnsComponent,
                 ColumnLayoutTestComponent,
-                DefaultGridMasterDetailComponent
+                DefaultGridMasterDetailComponent,
+                GridDynamicActionStripComponent
             ],
             providers: [
                 IgxGridMRLNavigationService
@@ -1121,4 +1123,28 @@ describe('IgxGrid - Row Adding #grid', () => {
             expect(grid.rowChangesCount).toEqual(3);
         });
     });
+
+    describe('ActionStrip - Dynamic Addition', () => {
+        beforeEach(() => {
+            fixture = TestBed.createComponent(GridDynamicActionStripComponent);
+            fixture.detectChanges();
+            grid = fixture.componentInstance.grid;
+        });
+
+        it('Should set outlet for actionstrip menu when added post-init', async () => {
+            // Verify no actionstrip initially
+            expect(fixture.componentInstance.actionStrip).toBeUndefined();
+            expect(grid.actionStrip).toBeUndefined();
+
+            // Add the actionstrip dynamically
+            fixture.componentInstance.showActionStrip = true;
+            fixture.detectChanges();
+            await wait(16);
+
+            // Get reference to the actionstrip
+            actionStrip = fixture.componentInstance.actionStrip;
+            expect(actionStrip).toBeDefined();
+            expect(grid.actionStrip).toBeDefined();
+        });
+    });
 });

projects/igniteui-angular/grids/grid/src/grid-base.directive.ts

@@ -3637,7 +3637,7 @@ export abstract class IgxGridBaseDirective implements GridType,
 
     protected getMergeCellOffset(rowData) {
         const index = rowData.dataIndex;
-        let offset = this.verticalScrollContainer.scrollPosition - this.verticalScrollContainer.getScrollForIndex(index);
+        let offset = this.verticalScrollContainer._virtScrollPosition - this.verticalScrollContainer.getScrollForIndex(index);
         if (this.hasPinnedRecords && this.isRowPinningToTop) {
             offset -= this.pinnedRowHeight;
         }
@@ -4044,7 +4044,6 @@ export abstract class IgxGridBaseDirective implements GridType,
         });
     }
 
-
     protected get activeRowIndexes(): number[] {
         if (this._activeRowIndexes) {
             return this._activeRowIndexes;
@@ -8194,16 +8193,16 @@ export abstract class IgxGridBaseDirective implements GridType,
         // recalc merged data
         if (this.columnsToMerge.length > 0) {
             const startIndex = this.verticalScrollContainer.state.startIndex;
-            const prevDataView = this.verticalScrollContainer.igxForOf?.slice(0, startIndex);
             const data = [];
-            for (let index = 0; index < startIndex; index++) {
-                const rec = prevDataView[index];
-                if (rec.cellMergeMeta &&
-                    // index + maxRowSpan is within view
-                    startIndex < (index + Math.max(...rec.cellMergeMeta.values().toArray().map(x => x.rowSpan)))) {
-                    const visibleIndex = this.isRowPinningToTop ? index + this.pinnedRecordsCount : index;
-                    data.push({ record: rec, index: visibleIndex, dataIndex: index });
-                }
+            const rec = this.verticalScrollContainer.igxForOf[startIndex];
+            if (rec && rec.cellMergeMeta) {
+                this.columnsToMerge.forEach((col) => {
+                    const root = rec.cellMergeMeta?.get(col.field)?.root;
+                    if (root) {
+                        data.push({ record: root, index: root.index, dataIndex: root.index });
+                    }
+                })
+
             }
             this._mergedDataInView = data;
             this.notifyChanges();

projects/igniteui-angular/grids/grid/src/grid.pipes.ts

@@ -121,7 +121,7 @@ export class IgxGridUnmergeActivePipe implements PipeTransform {
 
         const result = cloneArray(collection) as any;
         uniqueRoots.forEach(x => {
-            const index = collection.indexOf(x);
+            const index = x.index;
             const colKeys = [...x.cellMergeMeta.keys()];
             const cols = colsToMerge.filter(col => colKeys.indexOf(col.field) !== -1);
             for (const col of cols) {

projects/igniteui-angular/test-utils/grid-samples.spec.ts

@@ -2419,6 +2419,54 @@ export class IgxAddRowComponent implements OnInit {
     }
 }
 
+@Component({
+    template: `
+<igx-grid #grid [data]="data" [width]="'800px'" [height]="'500px'"
+    [rowEditable]="true" [primaryKey]="'ID'">
+    @for (c of columns; track c.field) {
+        <igx-column [field]="c.field" [header]="c.field" [width]="c.width"></igx-column>
+    }
+
+    @if (showActionStrip) {
+        <igx-action-strip #actionStrip>
+            <igx-grid-editing-actions [addRow]='true'></igx-grid-editing-actions>
+        </igx-action-strip>
+    }
+</igx-grid>
+`,
+    imports: [
+        IgxGridComponent,
+        IgxColumnComponent,
+        IgxActionStripComponent,
+        IgxGridEditingActionsComponent
+    ]
+})
+export class GridDynamicActionStripComponent implements OnInit {
+    @ViewChild('actionStrip', { read: IgxActionStripComponent })
+    public actionStrip: IgxActionStripComponent;
+
+    @ViewChild('grid', { read: IgxGridComponent, static: true })
+    public grid: IgxGridComponent;
+
+    public data: any[];
+    public columns: any[];
+    public showActionStrip = false;
+
+    public ngOnInit() {
+        this.columns = [
+            { field: 'ID', width: '200px' },
+            { field: 'CompanyName', width: '200px' },
+            { field: 'ContactName', width: '200px' }
+        ];
+
+        this.data = [
+            { ID: 'ALFKI', CompanyName: 'Alfreds Futterkiste', ContactName: 'Maria Anders' },
+            { ID: 'ANATR', CompanyName: 'Ana Trujillo Emparedados y helados', ContactName: 'Ana Trujillo' },
+            { ID: 'ANTON', CompanyName: 'Antonio Moreno Taquería', ContactName: 'Antonio Moreno' }
+        ];
+    }
+}
+
 @Component({
     template: GridTemplateStrings.declareGrid(` [hideGroupedColumns]="true"`, '', ColumnDefinitions.exportGroupedDataColumns),
     imports: [IgxGridComponent, IgxColumnComponent]