fix(igxGrid): Remove pinning limitations when pinned columns don't fit in available grid width. Removing tests that test for the limitation.

Author: MKirova

projects/igniteui-angular/karma.conf.js

@@ -41,7 +41,7 @@ module.exports = function (config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ['ChromeHeadless'],
     singleRun: false
   });
 };

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

@@ -1694,9 +1694,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
      *@hidden
     */
     public get pinnable() {
-        const gridUnpinnedWidth = (this.grid as any).getUnpinnedWidth(true);
-        const elementWidth = this.parent ? parseInt(this.topLevelParent.width, 10) : parseInt(this.width, 10);
-        return (this.grid as any)._init || !((gridUnpinnedWidth - elementWidth) < this.grid.unpinnedAreaMinWidth);
+        return (this.grid as any)._init || !this.pinned;
     }
 
     /**

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

@@ -3315,30 +3315,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         return DisplayDensity.compact;
     }
 
-    /**
-     * Returns the maximum width of the container for the pinned `IgxColumnComponent`s.
-     * The width is 80% of the total grid width.
-     * ```typescript
-     * const maxPinnedColWidth = this.grid.calcPinnedContainerMaxWidth;
-     * ```
-	 * @memberof IgxGridBaseComponent
-     */
-    get calcPinnedContainerMaxWidth(): number {
-        return (this.calcWidth * 80) / 100;
-    }
-
-    /**
-     * Returns the minimum width of the container for the unpinned `IgxColumnComponent`s.
-     * The width is 20% of the total grid width.
-     * ```typescript
-     * const minUnpinnedColWidth = this.grid.unpinnedAreaMinWidth;
-     * ```
-	 * @memberof IgxGridBaseComponent
-     */
-    get unpinnedAreaMinWidth(): number {
-        return (this.calcWidth * 20) / 100;
-    }
-
     /**
      * Returns the current width of the container for the pinned `IgxColumnComponent`s.
      * ```typescript
@@ -5553,7 +5529,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         let currentPinnedWidth = 0;
         const pinnedColumns = [];
         const unpinnedColumns = [];
-        const newUnpinnedCols = [];
 
         this.calculateGridWidth();
         this.resetCaches();
@@ -5574,16 +5549,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
             if (this._columns[i].pinned && !this._columns[i].parent) {
                 // Pinned column. Check if with it the unpinned min width is exceeded.
                 const colWidth = parseInt(this._columns[i].width, 10);
-                if (currentPinnedWidth + colWidth > this.calcWidth - this.unpinnedAreaMinWidth) {
-                    // unpinned min width is exceeded. Unpin the columns and add it to the unpinned collection.
-                    this._columns[i].pinned = false;
-                    unpinnedColumns.push(this._columns[i]);
-                    newUnpinnedCols.push(this._columns[i]);
-                } else {
-                    // unpinned min width is not exceeded. Keep it pinned and add it to the pinned collection.
-                    currentPinnedWidth += colWidth;
-                    pinnedColumns.push(this._columns[i]);
-                }
+                currentPinnedWidth += colWidth;
+                pinnedColumns.push(this._columns[i]);
             } else if (this._columns[i].pinned && this._columns[i].parent) {
                 if (this._columns[i].topLevelParent.pinned) {
                     pinnedColumns.push(this._columns[i]);
@@ -5596,14 +5563,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
             }
         }
 
-        if (newUnpinnedCols.length) {
-            console.warn(
-                'igxGrid - The pinned area exceeds maximum pinned width. ' +
-                'The following columns were unpinned to prevent further issues:' +
-                newUnpinnedCols.map(col => '"' + col.header + '"').toString() + '. For more info see our documentation.'
-            );
-        }
-
         // Assign the applicaple collections.
         this._pinnedColumns = pinnedColumns;
         this._unpinnedColumns = unpinnedColumns;

projects/igniteui-angular/src/lib/grids/grid-column-resizing.service.ts

@@ -64,24 +64,10 @@ export class IgxColumnResizingService {
      */
     get restrictResizeMax(): number {
         const actualWidth = this.column.headerCell.elementRef.nativeElement.getBoundingClientRect().width;
-
-        if (this.column.pinned) {
-            const pinnedMaxWidth = this.pinnedMaxWidth =
-                this.column.grid.calcPinnedContainerMaxWidth - this.column.grid.getPinnedWidth(true) + actualWidth;
-
-            if (this.column.maxWidth && parseFloat(this.column.maxWidth) < pinnedMaxWidth) {
-                this.pinnedMaxWidth = this.column.maxWidth;
-
-                return parseFloat(this.column.maxWidth) - actualWidth;
-            } else {
-                return pinnedMaxWidth - actualWidth;
-            }
+        if (this.column.maxWidth) {
+            return parseFloat(this.column.maxWidth) - actualWidth;
         } else {
-            if (this.column.maxWidth) {
-                return parseFloat(this.column.maxWidth) - actualWidth;
-            } else {
-                return Number.MAX_SAFE_INTEGER;
-            }
+            return Number.MAX_SAFE_INTEGER;
         }
     }
 
@@ -96,14 +82,7 @@ export class IgxColumnResizingService {
         const currentColWidth = this.column.headerCell.elementRef.nativeElement.getBoundingClientRect().width;
 
         const size = this.column.getLargestCellWidth();
-
-        if (this.column.pinned) {
-            const newPinnedWidth = this.column.grid.getPinnedWidth(true) - currentColWidth + parseFloat(size);
-
-            if (newPinnedWidth <= this.column.grid.calcPinnedContainerMaxWidth) {
-                this.column.width = size;
-            }
-        } else if (this.column.maxWidth && (parseFloat(size) > parseFloat(this.column.maxWidth))) {
+        if (this.column.maxWidth && (parseFloat(size) > parseFloat(this.column.maxWidth))) {
             this.column.width = parseFloat(this.column.maxWidth) + 'px';
         } else if (parseFloat(size) < parseFloat(this.column.minWidth)) {
             this.column.width = this.column.minWidth + 'px';
@@ -175,15 +154,6 @@ export class IgxColumnResizingService {
         const relativeColumns = column.getResizableColUnderEnd();
         const combinedSpan = relativeColumns.reduce((acc, col) =>  acc + col.spanUsed, 0);
 
-        if (column.pinned) {
-            const pinnedWidth = this.column.grid.getPinnedWidth(true);
-            const maxPinnedWidth = this.column.grid.calcPinnedContainerMaxWidth;
-
-            if (pinnedWidth + diff > maxPinnedWidth) {
-                diff = maxPinnedWidth - pinnedWidth;
-            }
-        }
-
         // Resize first those who might reach min/max width
         let columnsToResize = [...relativeColumns];
         let updatedDiff = diff;

projects/igniteui-angular/src/lib/grids/grid.common.ts

@@ -533,13 +533,7 @@ export class IgxColumnMovingDropDirective extends IgxDropDirective implements On
                 }
 
                 if (!this.cms.column.pinned && this.column.pinned) {
-                    const nextPinnedWidth = this.column.grid.getPinnedWidth(true) + parseFloat(this.cms.column.width);
-
-                    if (nextPinnedWidth <= this.column.grid.calcPinnedContainerMaxWidth) {
-                        this.cms.icon.innerText = 'lock';
-                    } else {
-                        this.cms.icon.innerText = 'block';
-                    }
+                    this.cms.icon.innerText = 'lock';
                 }
             } else {
                 this.cms.icon.innerText = 'block';
@@ -594,20 +588,6 @@ export class IgxColumnMovingDropDirective extends IgxDropDirective implements On
                 target: this.column
             };
 
-            let nextPinnedWidth;
-            if (this.column.pinned && !this.cms.column.pinned) {
-                nextPinnedWidth = this.column.grid.getPinnedWidth(true) + parseFloat(this.cms.column.width);
-            }
-
-            if ((nextPinnedWidth && nextPinnedWidth > this.column.grid.calcPinnedContainerMaxWidth) ||
-                this.column.level !== this.cms.column.level ||
-                this.column.parent !== this.cms.column.parent ||
-                this.cms.cancelDrop) {
-                    this.cms.cancelDrop = false;
-                    this.column.grid.onColumnMovingEnd.emit(args);
-                    return;
-            }
-
             this.column.grid.moveColumn(this.cms.column, this.column, this._dropPos);
 
             this.column.grid.draggedColumn = null;

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

@@ -742,51 +742,6 @@ describe('IgxGrid - multi-column headers #grid', () => {
         });
     }));
 
-    it('column pinning - Try to pin column or group which exceeds the pinned area width.', fakeAsync(() => {
-        const fixture = TestBed.createComponent(ColumnGroupFourLevelTestComponent);
-        fixture.detectChanges();
-        const ci = fixture.componentInstance;
-        const grid = ci.grid;
-        expect(grid.pinnedColumns.length).toEqual(0);
-        expect(grid.unpinnedColumns.length).toEqual(18);
-
-        // Try to pin top group
-        ci.addrInfoColGroup.pinned = true;
-        fixture.detectChanges();
-        tick();
-
-        // Verify group and all its children are not pinned
-        testColumnPinning(ci.addrInfoColGroup, false);
-        testColumnsOrder(ci.colsAndGroupsNaturalOrder);
-
-        expect(grid.pinnedColumns.length).toEqual(0);
-        expect(grid.unpinnedColumns.length).toEqual(18);
-
-        // Try to pin a column
-        ci.faxCol.pinned = true;
-        fixture.detectChanges();
-        tick();
-
-        // Verify group and all its children are not pinned
-        testColumnPinning(ci.addrInfoColGroup, false);
-        testColumnsOrder(ci.colsAndGroupsNaturalOrder);
-
-        expect(grid.pinnedColumns.length).toEqual(0);
-        expect(grid.unpinnedColumns.length).toEqual(18);
-
-        // Try to pin child group
-        ci.contactInfoColGroup.pinned = true;
-        fixture.detectChanges();
-        tick();
-
-        // Verify group and all its children are not pinned
-        testColumnPinning(ci.addrInfoColGroup, false);
-        testColumnsOrder(ci.colsAndGroupsNaturalOrder);
-
-        expect(grid.pinnedColumns.length).toEqual(0);
-        expect(grid.unpinnedColumns.length).toEqual(18);
-    }));
-
     it('column pinning - Verify pin a not fully visble group', fakeAsync(() => {
         const fixture = TestBed.createComponent(ColumnGroupTwoGroupsTestComponent);
         fixture.detectChanges();

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

@@ -224,42 +224,18 @@ describe('Column Pinning UI #grid', () => {
             expect(currentArgs.isPinned).toBe(false);
         }));
 
-        it('doesn\'t pin columns if unpinned area width will become less than the defined minimum.', async(() => {
+        it('does pin columns if unpinned area width will become less than the defined minimum.', async(() => {
             const checkboxes = GridFunctions.getCheckboxInputs(columnChooserElement);
             checkboxes[0].click();
             checkboxes[1].click();
             checkboxes[2].click();
 
-            verifyColumnIsPinned(grid.columns[0], true, 2);
-            verifyColumnIsPinned(grid.columns[1], true, 2);
-            verifyColumnIsPinned(grid.columns[2], false, 2);
+            verifyColumnIsPinned(grid.columns[0], true, 3);
+            verifyColumnIsPinned(grid.columns[1], true, 3);
+            verifyColumnIsPinned(grid.columns[2], true, 3);
 
         }));
 
-        it('doesn\'t pin columns if unpinned area width does not allow it even after hiding a pinned column.', async(() => {
-            let checkboxes = GridFunctions.getCheckboxInputs(columnChooserElement);
-            checkboxes[0].click();
-            checkboxes[1].click();
-
-            grid.columns[1].hidden = true;
-            fix.detectChanges();
-
-            expect(grid.pinnedColumns.length).toBe(1);
-
-            checkboxes = GridFunctions.getCheckboxInputs(columnChooserElement);
-            checkboxes[2].click();
-            verifyColumnIsPinned(grid.columns[2], false, 1);
-
-            checkboxes[0].click();
-            verifyColumnIsPinned(grid.columns[0], false, 0);
-
-            grid.columns[1].hidden = false;
-            fix.detectChanges();
-
-            verifyCheckbox('ProductName', true, false, columnChooserElement, fix);
-            verifyColumnIsPinned(grid.columns[1], true, 1);
-        }));
-
         it('- should size cells correctly when there is a large pinned templated column', fakeAsync(/** height/width setter rAF */() => {
             fix = TestBed.createComponent(ColumnPinningWithTemplateTestComponent);
             fix.detectChanges();

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

@@ -293,7 +293,7 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
         UIInteractions.simulateMouseEvent('mouseup', resizer, 450, 5);
         fixture.detectChanges();
 
-        expect(grid.columns[0].width).toEqual('300px');
+        expect(grid.columns[0].width).toEqual('450px');
         expect(grid.columns[1].width).toEqual('100px');
 
         UIInteractions.simulateMouseEvent('mousedown', headerResArea, 300, 0);
@@ -305,7 +305,7 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
         UIInteractions.simulateMouseEvent('mouseup', resizer, 100, 5);
         fixture.detectChanges();
 
-        expect(grid.columns[0].width).toEqual('100px');
+        expect(grid.columns[0].width).toEqual('250px');
     });
 
     it('should resize columns with initial width of null.', async() => {
@@ -391,7 +391,7 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
         UIInteractions.simulateMouseEvent('mouseup', resizer, 350, 5);
         fixture.detectChanges();
 
-        expect(grid.columns[1].width).toEqual('150px');
+        expect(grid.columns[1].width).toEqual('250px');
     });
 
     it('should autoresize column on double click.', async() => {
@@ -465,43 +465,6 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
         expect(grid.columns[2].width).toEqual('92px');
     });
 
-    it('should autoresize pinned column on double click - edge case.', async() => {
-        const fixture = TestBed.createComponent(LargePinnedColGridComponent);
-        fixture.detectChanges();
-
-        const grid = fixture.componentInstance.grid;
-        const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_GROUP_CLASS));
-
-        expect(grid.columns[0].width).toEqual('100px');
-        expect(grid.columns[1].width).toEqual('100px');
-        expect(grid.columns[2].width).toEqual('100px');
-
-        const resizeArea = headers[1].children[1].nativeElement;
-        UIInteractions.simulateMouseEvent('dblclick', resizeArea, 0, 0);
-        await wait(DEBOUNCE_TIME);
-        fixture.detectChanges();
-
-        expect(grid.columns[0].width).toEqual('100px');
-        expect(grid.columns[1].width).toEqual('100px');
-        expect(grid.columns[2].width).toEqual('100px');
-
-        const headerResArea = headers[0].children[1].nativeElement;
-        UIInteractions.simulateMouseEvent('mousedown', headerResArea, 100, 0);
-        await wait(DEBOUNCE_TIME);
-        fixture.detectChanges();
-
-        const resizer = fixture.debugElement.queryAll(By.css(RESIZE_LINE_CLASS))[0].nativeElement;
-        expect(resizer).toBeDefined();
-        UIInteractions.simulateMouseEvent('mousemove', resizer, 450, 5);
-        UIInteractions.simulateMouseEvent('mouseup', resizer, 450, 5);
-        fixture.detectChanges();
-
-        const expetedWidth = grid.calcPinnedContainerMaxWidth - parseInt(grid.columns[1].width, 10) - parseInt(grid.columns[2].width, 10);
-        expect(grid.columns[0].width).toEqual(expetedWidth + 'px');
-        expect(grid.columns[1].width).toEqual('100px');
-        expect(grid.columns[2].width).toEqual('100px');
-    });
-
     it('should fire onColumnResized with correct event args.', async() => {
         const fixture = TestBed.createComponent(GridFeaturesComponent);
         fixture.detectChanges();