Merge remote-tracking branch 'origin/master' into mkirova/row-pinning-state-persist

Author: ChronosSF

projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss

@@ -155,5 +155,6 @@
 
     %igx-navbar-title {
         @include igx-type-style($type-scale, $title);
+        margin-bottom: 0;
     }
 }

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

@@ -699,6 +699,50 @@ describe('Row Pinning #grid', () => {
             verifyDOMMatchesLayoutSettings(gridUnpinnedRow, fix.componentInstance.colGroups);
         });
     });
+    describe(' Hiding', () => {
+        beforeEach(fakeAsync(() => {
+            fix = TestBed.createComponent(GridRowPinningComponent);
+            fix.detectChanges();
+            grid = fix.componentInstance.instance;
+            tick();
+            fix.detectChanges();
+        }));
+
+        it('should hide columns in pinned and unpinned area', () => {
+            // pin 2nd data row
+            grid.pinRow(fix.componentInstance.data[1]);
+            fix.detectChanges();
+            const hiddenCol = grid.columns[1];
+            hiddenCol.hidden = true;
+            fix.detectChanges();
+
+            const pinnedCells = grid.pinnedRows[0].cells;
+            expect(pinnedCells.filter(cell => cell.column.field === hiddenCol.field).length).toBe(0);
+
+            const unpinnedCells = grid.rowList.first.cells;
+            expect(unpinnedCells.filter(cell => cell.column.field === hiddenCol.field).length).toBe(0);
+
+            expect(pinnedCells.length).toBe(unpinnedCells.length);
+
+            const headerCells = grid.headerCellList;
+            expect(headerCells.filter(cell => cell.column.field === hiddenCol.field).length).toBe(0);
+
+            expect(grid.pinnedRows.length).toBe(1);
+            const pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
+            expect(pinRowContainer.length).toBe(1);
+            expect(pinRowContainer[0].children.length).toBe(1);
+            expect(pinRowContainer[0].children[0].context.rowID).toBe(fix.componentInstance.data[1]);
+            expect(pinRowContainer[0].children[0].nativeElement).toBe(grid.getRowByIndex(0).nativeElement);
+
+            expect(grid.getRowByIndex(1).rowID).toBe(fix.componentInstance.data[0]);
+            expect(grid.getRowByIndex(2).rowID).toBe(fix.componentInstance.data[2]);
+
+            // 1 records pinned + 2px border
+            expect(grid.pinnedRowHeight).toBe(grid.renderedRowHeight + 2);
+            const expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 - grid.theadRow.nativeElement.offsetHeight;
+            expect(grid.calcHeight - expectedHeight).toBeLessThanOrEqual(1);
+        });
+    });
 });
 
 @Component({

src/app/grid-column-pinning/grid-column-pinning.sample.ts

@@ -103,7 +103,7 @@ export class GridColumnPinningSampleComponent implements OnInit {
 
     togglePinRow(index) {
         const rec = this.data[index];
-        this.grid1.isRecordPinned(rec) ?
+        !this.grid1.isRecordPinned(rec) ?
          this.grid1.pinRow(rec) :
          this.grid1.unpinRow(rec)
     }

src/app/grid-row-pinning/grid-row-pinning.sample.html

@@ -13,23 +13,26 @@
                 <igx-switch (change)='onRowChange()' style="padding-left: 10px"> Bottom Row Pinning toggle</igx-switch>
                 <igx-switch (change)='onChange()' style="padding-left: 10px"> Right Column Pinning toggle</igx-switch>
             </div>
-        <igx-grid [igxGridState]="options" [allowFiltering]='true' [primaryKey]='"ID"' [pinning]="pinningConfig" [showToolbar]='true' [columnPinning]='true' #grid1 [data]="data" [width]="'800px'" [height]="'500px'" [rowSelectable]="false">
-            <igx-column width='70px' [filterable]='false'>
-                <ng-template igxCell let-cell="cell" let-val>
-                    <igx-icon class="pin-icon" (mousedown)="togglePining(cell.row, $event)">
-                        {{cell.row.pinned ? 'lock' : 'lock_open'}}
-                    </igx-icon>
-                </ng-template>
-            </igx-column>
-            <igx-column width='100px' [filterable]='false'>
-                <ng-template igxCell let-cell="cell" let-val>
-                    <button (click)="grid1.deleteRow(cell.row.rowID)">Delete</button>
-                </ng-template>
-            </igx-column>
-            <igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field" [width]="c.width" [pinned]='c.pinned' [groupable]='c.groupable'
-                [hidden]='c.hidden' [editable]='true'>
-            </igx-column>
-        </igx-grid>
+            <igx-grid [igxGridState]="options" [allowFiltering]='true' [primaryKey]='"ID"' [pinning]="pinningConfig"
+                [columnHiding]='true' [showToolbar]='true' [columnPinning]='true' #grid1 [data]="data" [width]="'800px'"
+                [height]="'500px'" [rowSelectable]="false">
+                <igx-column width='70px' [filterable]='false'>
+                    <ng-template igxCell let-cell="cell" let-val>
+                        <igx-icon class="pin-icon" (mousedown)="togglePining(cell.row, $event)">
+                            {{cell.row.pinned ? 'lock' : 'lock_open'}}
+                        </igx-icon>
+                    </ng-template>
+                </igx-column>
+                <igx-column width='100px' [filterable]='false'>
+                    <ng-template igxCell let-cell="cell" let-val>
+                        <button (click)="grid1.deleteRow(cell.row.rowID)">Delete</button>
+                    </ng-template>
+                </igx-column>
+                <igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field"
+                    [width]="c.width" [pinned]='c.pinned' [groupable]='c.groupable' [hidden]='c.hidden'
+                    [editable]='true'>
+                </igx-column>
+            </igx-grid>
         </div>
     </div>
-</div>
+</div>