Merge branch 'master' into mkirova/fix-pinned-area-changes

Author: ChronosSF

projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html

@@ -1,3 +1,6 @@
+<ng-template #defaultPinnedIndicator>
+    <igx-chip *ngIf="displayPinnedChip" class="igx-grid__td--pinned-chip" [disabled]="true" [displayDensity]="'compact'">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>
+</ng-template>
 <ng-template #defaultCell>
     <div igxTextHighlight style="pointer-events: none" [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
         [value]="formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value"
@@ -33,6 +36,8 @@
         </ng-container>
     </div>
 </ng-container>
+<ng-container *ngTemplateOutlet="pinnedIndicatorTemplate; context: context">
+</ng-container>
 <ng-container *ngTemplateOutlet="template; context: context">
 </ng-container>
 <ng-template #defaultExpandedTemplate>

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

@@ -459,6 +459,9 @@ describe('Row Pinning #grid', () => {
             expect(grid.expansionStates.get(pinnedRow.rowID)).toBeTruthy();
             // disabled row should have expand icon
             expect(firstRowIconName).toEqual('expand_more');
+            // disabled row should have chip
+            const cell = grid.getRowByIndex(0).cells.first;
+            expect(cell.nativeElement.getElementsByClassName('igx-grid__td--pinned-chip').length).toBe(1);
             // pinned row shouldn't have expand icon
             const hasIconForPinnedRow = pinnedRow.cells.first.nativeElement.querySelector('igx-icon');
             expect(hasIconForPinnedRow).toBeNull();

projects/igniteui-angular/src/lib/grids/state.directive.spec.ts

@@ -414,6 +414,15 @@ describe('IgxGridState - input properties #grid', () => {
         expect(grid.pinnedRows[1].rowID).toBe(3);
         gridState = state.getState(true, 'rowPinning');
         expect(gridState).toBe(rowPinState);
+
+        grid.getRowByIndex(3).pin();
+
+        state.setState(rowPinStateObject);
+        fix.detectChanges();
+
+        expect(grid.pinnedRows.length).toBe(2);
+        expect(grid.pinnedRows[0].rowID).toBe(1);
+        expect(grid.pinnedRows[1].rowID).toBe(3);
     });
 
     it('setState should correctly restore grid cell selection state from string', () => {

projects/igniteui-angular/src/lib/grids/state.directive.ts

@@ -478,6 +478,8 @@ export class IgxGridStateDirective {
     }
 
     private restoreRowPinning(state: any[]) {
+        // clear current state.
+        this.grid.pinnedRows.forEach(row => row.unpin());
         state.forEach(rowID => this.grid.pinRow(rowID));
     }
 

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

@@ -32,7 +32,7 @@
                 <ng-template igxToolbarCustomContent>
                     <app-grid-search-box [grid]="grid1" [style.width]="'400px'"></app-grid-search-box>
                 </ng-template>
-                <igx-column width='120px' [filterable]='false'>
+                <igx-column width='150px' [filterable]='false'>
                     <ng-template igxCell let-cell="cell" let-val>
                         <igx-icon class="pin-icon" (mousedown)="togglePining(cell.row, $event)"
                         fontSet="filtering-icons" name="{{cell.row.pinned ? 'unpin' : 'pin'}}">