Merge pull request #6775 from IgniteUI/mkirova/pinning-conf-rowSelectors

Right Pinning + Row Selectors Integration

Author: ChronosSF

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -1003,8 +1003,8 @@ export class IgxColumnComponent implements AfterContentInit {
     }
 
     get rightPinnedOffset(): string {
-        return this.pinned ?
-            - this.grid.pinnedWidth + 'px' :
+        return this.pinned && !this.grid.isPinningToStart ?
+            - this.grid.pinnedWidth - this.grid.headerFeaturesWidth + 'px' :
             null;
     }
 

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

@@ -180,6 +180,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     private overlayIDs = [];
     private _filteringStrategy: IFilteringStrategy;
     private _sortingStrategy: IGridSortingStrategy;
+    private _pinning: IPinningConfig = { columns: ColumnPinningPosition.Start };
 
     private _hostWidth;
     private _advancedFilteringOverlayId: string;
@@ -813,7 +814,16 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * ```
      */
     @Input()
-    public pinning: IPinningConfig = { columns: ColumnPinningPosition.Start };
+    get pinning() {
+        return this._pinning;
+    }
+    set pinning(value) {
+        if (value !== this._pinning) {
+            this.resetCaches();
+        }
+        this._pinning = value;
+    }
+
 
     /**
      * Gets/Sets if the built-in column pinning UI should be shown in the toolbar.
@@ -2520,6 +2530,14 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         this.hideOverlays();
     }
 
+    /**
+    * @hidden
+    * @internal
+    */
+    public get headerFeaturesWidth() {
+        return this._headerFeaturesWidth;
+    }
+
     /**
     * @hidden
     * @internal
@@ -4651,7 +4669,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
                 sum += parseInt(col.calcWidth, 10);
             }
         }
-        sum += this.featureColumnsWidth();
+        if (this.pinning.columns === ColumnPinningPosition.Start) {
+            sum += this.featureColumnsWidth();
+        }
 
         return sum;
     }
@@ -4668,6 +4688,10 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         if (this.hasVerticalSroll() && !this.isPercentWidth) {
             width -= this.scrollWidth;
         }
+        if (this.pinning.columns === ColumnPinningPosition.End) {
+            width -= this.featureColumnsWidth();
+        }
+
         return width - this.getPinnedWidth(takeHidden);
     }
 

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

@@ -188,7 +188,7 @@
 </div>
 
 <div class="igx-grid__scroll" [style.height]="'18px'" #scr [hidden]="isHorizontalScrollHidden">
-    <div class="igx-grid__scroll-start" [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]="pinnedWidth === 0 || !isPinningToStart"></div>
+    <div class="igx-grid__scroll-start" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>
     <div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
         <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>
         </ng-template>

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

@@ -460,6 +460,35 @@ describe('IgxGrid - Column Pinning to End', () => {
         expect(grid.pinnedWidth).toEqual(400);
         expect(grid.unpinnedWidth + grid.scrollWidth).toEqual(400);
     }));
+
+    it('should correctly pin column to right when row selectors are enabled.', fakeAsync(() => {
+        const fix = TestBed.createComponent(GridRightPinningComponent);
+
+        tick();
+        fix.detectChanges();
+        const grid = fix.componentInstance.instance;
+        grid.rowSelectable = true;
+        tick();
+        fix.detectChanges();
+
+        // check row DOM
+        const row = grid.getRowByIndex(0).nativeElement;
+        expect(row.children[0].className).toBe('igx-grid__cbx-selection');
+        expect(row.children[1].className).toBe('igx-display-container');
+        expect(row.children[2].getAttribute('aria-describedby')).toBe(grid.id + '_CompanyName');
+        expect(row.children[3].getAttribute('aria-describedby')).toBe(grid.id + '_ContactName');
+
+        // check scrollbar DOM
+        const scrBarStartSection = fix.debugElement.query(By.css('.igx-grid__scroll-start'));
+        const scrBarMainSection = fix.debugElement.query(By.css('.igx-grid__scroll-main'));
+        const scrBarEndSection = fix.debugElement.query(By.css('.igx-grid__scroll-end'));
+
+        expect(scrBarStartSection.nativeElement.offsetWidth).toEqual(grid.featureColumnsWidth());
+        const pinnedColSum = grid.pinnedColumns.map(x => parseInt(x.calcWidth, 10)).reduce((x, y) => x + y);
+        expect(scrBarEndSection.nativeElement.offsetWidth).toEqual(pinnedColSum);
+        const expectedUnpinAreWidth = parseInt(grid.width, 10) - grid.featureColumnsWidth() - pinnedColSum - grid.scrollWidth;
+        expect(scrBarMainSection.nativeElement.offsetWidth).toEqual(expectedUnpinAreWidth);
+    }));
 });
 
 /* tslint:disable */

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

@@ -4,7 +4,7 @@
     </app-page-header>
     <div class="sample-content">
         <div class="sample-column">
-        <igx-grid [pinning]="pinningConfig" #grid1 [data]="data" [width]="'800px'" [height]="'800px'" [rowSelectable]="true">
+        <igx-grid [pinning]="pinningConfig" #grid1 [data]="data" [width]="'800px'" [height]="'800px'" [rowSelectable]="false">
             <igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field" [width]="c.width" [pinned]='c.pinned'
                 [hidden]='c.hidden'>
             </igx-column>
@@ -23,6 +23,9 @@
         <div class="sample-switches">
             <igx-switch [(ngModel)]="grid1.showToolbar">Toolbar</igx-switch>
             <igx-switch [(ngModel)]="grid1.columnPinning" style="padding-left: 10px">Column Pinning</igx-switch>
+            <igx-switch [(ngModel)]="grid1.rowSelectable" style="padding-left: 10px">Row Selectors</igx-switch>
+            <igx-switch (change)='onChange()' style="padding-left: 10px">Left Pinning toggle</igx-switch>
+
         </div>
         </div>
     </div>

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

@@ -10,12 +10,19 @@ import { IPinningConfig } from 'projects/igniteui-angular/src/lib/grids/common/g
 })
 
 export class GridColumnPinningSampleComponent implements OnInit {
-
     public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
 
     @ViewChild('grid1', { static: true })
     grid1: IgxGridComponent;
 
+    onChange() {
+        if (this.pinningConfig.columns === ColumnPinningPosition.End) {
+            this.pinningConfig = { columns: ColumnPinningPosition.Start };
+        } else {
+            this.pinningConfig = { columns: ColumnPinningPosition.End };
+        }
+    }
+
     data: any[];
     columns: any[];