Merge pull request #6909 from IgniteUI/mdragnev/row-pinning-mdv

feat(igxGrid): Row Pinning + MDV integration

Author: ChronosSF

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

@@ -3080,6 +3080,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     public set expansionStates(value) {
         this._expansionStates = new Map<any, boolean>(value);
         this.expansionStatesChange.emit(this._expansionStates);
+        this.notifyChanges(true);
         if (this.gridAPI.grid) {
             this.cdr.detectChanges();
         }

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

@@ -8,6 +8,7 @@ import { configureTestSuite } from '../../test-utils/configure-suite';
 import { ColumnPinningPosition, RowPinningPosition } from '../common/enums';
 import { IPinningConfig } from '../common/grid.interface';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
+import { GridFunctions } from '../../test-utils/grid-functions.spec';
 import { SortingDirection } from '../../data-operations/sorting-expression.interface';
 import { IgxGridTransaction } from '../tree-grid';
 import { IgxTransactionService } from '../../services';
@@ -23,6 +24,7 @@ describe('Row Pinning #grid', () => {
         TestBed.configureTestingModule({
             declarations: [
                 GridRowPinningComponent,
+                GridRowPinningWithMDVComponent,
                 GridRowPinningWithTransactionsComponent
             ],
             imports: [
@@ -274,6 +276,40 @@ describe('Row Pinning #grid', () => {
             expect(grid.getRowByIndex(2).rowID).toBe(fix.componentInstance.data[lastIndex]);
         });
     });
+    describe('Row pinning with Master Detail View', () => {
+        beforeEach(fakeAsync(() => {
+            fix = TestBed.createComponent(GridRowPinningWithMDVComponent);
+            fix.detectChanges();
+            grid = fix.componentInstance.instance;
+            tick();
+            fix.detectChanges();
+        }));
+
+        it('should be in view when expanded and pinning row to bottom of the grid.', () => {
+            fix.componentInstance.pinningConfig = { columns: ColumnPinningPosition.Start, rows: RowPinningPosition.Bottom };
+            fix.detectChanges();
+            // pin 1st row
+            const row = grid.getRowByIndex(0);
+            row.pinned = true;
+            fix.detectChanges();
+
+            GridFunctions.toggleMasterRow(fix, grid.pinnedRows[0]);
+            fix.detectChanges();
+
+
+            expect(grid.pinnedRows.length).toBe(1);
+
+            const firstRowIconName = GridFunctions.getRowExpandIconName(grid.pinnedRows[0]);
+            const firstRowDetail = GridFunctions.getMasterRowDetail(grid.pinnedRows[0]);
+            expect(grid.expansionStates.size).toEqual(1);
+            expect(grid.expansionStates.has(grid.pinnedRows[0].rowID)).toBeTruthy();
+            expect(grid.expansionStates.get(grid.pinnedRows[0].rowID)).toBeTruthy();
+            expect(firstRowIconName).toEqual('expand_more');
+
+            // check last pinned and expanded is fully in view
+            expect(firstRowDetail.getBoundingClientRect().bottom - grid.tbody.nativeElement.getBoundingClientRect().bottom).toBe(0);
+        });
+    });
 
     describe(' Editing ', () => {
         beforeEach(fakeAsync(() => {
@@ -374,6 +410,25 @@ export class GridRowPinningComponent {
     public instance: IgxGridComponent;
 }
 
+@Component({
+    template: `
+    <igx-grid
+        [pinning]='pinningConfig'
+        [width]='"800px"'
+        [height]='"500px"'
+        [data]="data"
+        [autoGenerate]="true">
+        <ng-template igxGridDetail let-dataItem>
+            <div>
+                <div><span class='categoryStyle'>Country:</span> {{dataItem.Country}}</div>
+                <div><span class='categoryStyle'>City:</span> {{dataItem.City}}</div>
+                <div><span class='categoryStyle'>Address:</span> {{dataItem.Address}}</div>
+            </div>
+        </ng-template>
+</igx-grid>`
+})
+export class GridRowPinningWithMDVComponent extends GridRowPinningComponent {}
+
 
 @Component({
     template: `
@@ -388,6 +443,4 @@ export class GridRowPinningComponent {
     `,
     providers: [{ provide: IgxGridTransaction, useClass: IgxTransactionService }]
 })
-export class GridRowPinningWithTransactionsComponent extends GridRowPinningComponent {
-    public data = SampleTestData.contactInfoDataFull();
-}
+export class GridRowPinningWithTransactionsComponent extends GridRowPinningComponent {}