Merge pull request #6051 from IgniteUI/mkirova/fix-2531

fix(igxGrid): Remove pinning limitations when pinned columns don't fi…

Author: ChronosSF

CHANGELOG.md

@@ -13,6 +13,9 @@ All notable changes for each version of this project will be documented in this
     - `IgxRowComponent` -> `IgxRowDirective`
     - `IgxHierarchicalGridBaseComponent` -> `IgxHierarchicalGridBaseDirective`
 
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - **Behavioral Change** - Pinning columns is no longer automatically prevented when the pinning area would exceed the size of the grid.
+
 ## 8.2.4
 
 ### RTL Support

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

@@ -1689,9 +1689,7 @@ export class IgxColumnComponent implements AfterContentInit {
      *@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.directive.ts

@@ -3238,30 +3238,6 @@ export class IgxGridBaseDirective 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 IgxGridBaseDirective
-     */
-    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 IgxGridBaseDirective
-     */
-    get unpinnedAreaMinWidth(): number {
-        return (this.calcWidth * 20) / 100;
-    }
-
     /**
      * Returns the current width of the container for the pinned `IgxColumnComponent`s.
      * ```typescript
@@ -5476,7 +5452,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         let currentPinnedWidth = 0;
         const pinnedColumns = [];
         const unpinnedColumns = [];
-        const newUnpinnedCols = [];
 
         this.calculateGridWidth();
         this.resetCaches();
@@ -5497,16 +5472,8 @@ export class IgxGridBaseDirective 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]);
@@ -5519,14 +5486,6 @@ export class IgxGridBaseDirective 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-group.spec.ts

@@ -744,51 +744,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

@@ -225,42 +225,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();

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

@@ -5599,96 +5599,6 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
 
             expect(grid.filteredData).toBeNull();
         }));
-
-        it('Move-left button is disabled when using it to pin a column and max pin area width is reached.',
-            fakeAsync(() => {
-                // Test prerequisites
-                grid.width = '500px';
-                fix.detectChanges();
-                grid.getColumnByName('ID').filterable = true;
-                grid.getColumnByName('ID').movable = true;
-                grid.cdr.detectChanges();
-                tick(100);
-
-                // Pin columns until maximum pin area width is reached.
-                const columns = ['ProductName', 'Downloads', 'Released'];
-                columns.forEach((columnField) => {
-                    GridFunctions.clickExcelFilterIcon(fix, columnField);
-                    fix.detectChanges();
-                    GridFunctions.clickPinIconInExcelStyleFiltering(fix, false);
-                    tick(200);
-                    fix.detectChanges();
-                });
-
-                // Verify pinned columns and 'ID' column position.
-                const column = grid.columns.find((col) => col.field === 'ID');
-                GridFunctions.verifyColumnIsPinned(column, false, 3);
-                expect(GridFunctions.getColumnHeaderByIndex(fix, 3).innerText).toBe('ID');
-
-                // Open ESF for the 'ID' column and verify that 'move left' button is disabled.
-                GridFunctions.clickExcelFilterIcon(fix, 'ID');
-                fix.detectChanges();
-                const moveComponent = GridFunctions.getExcelFilteringMoveComponent(fix);
-                const moveLeftButton = GridFunctions.sortNativeElementsHorizontally(
-                    Array.from(moveComponent.querySelectorAll('.igx-button--flat')))[0];
-                expect(moveLeftButton.classList.contains('igx-button--disabled')).toBe(true);
-            }));
-
-        it('Pin button is disabled when using it to pin a column and max pin area width is reached.',
-            fakeAsync(() => {
-                // Test prerequisites
-                grid.width = '500px';
-                fix.detectChanges();
-                grid.getColumnByName('ID').filterable = true;
-                grid.getColumnByName('ID').movable = true;
-                grid.cdr.detectChanges();
-                tick(100);
-
-                // Pin columns until maximum pin area width is reached.
-                const columns = ['ProductName', 'Downloads', 'Released'];
-                columns.forEach((columnField) => {
-                    GridFunctions.clickExcelFilterIcon(fix, columnField);
-                    fix.detectChanges();
-                    GridFunctions.clickPinIconInExcelStyleFiltering(fix, false);
-                    tick(200);
-                    fix.detectChanges();
-                });
-
-                // Verify pinned columns and 'ID' column position.
-                const column = grid.columns.find((col) => col.field === 'ID');
-                GridFunctions.verifyColumnIsPinned(column, false, 3);
-                expect(GridFunctions.getColumnHeaderByIndex(fix, 3).innerText).toBe('ID');
-
-                // Open ESF for the 'ID' column and verify that 'pin column' button is disabled.
-                GridFunctions.clickExcelFilterIcon(fix, 'ID');
-                fix.detectChanges();
-                let pinButton = GridFunctions.getExcelFilteringPinContainer(fix);
-                expect(pinButton.classList.contains('igx-excel-filter__actions-pin--disabled')).toBe(true,
-                    'pinButton should be disabled');
-
-                // Close ESF.
-                GridFunctions.clickCancelExcelStyleFiltering(fix);
-                fix.detectChanges();
-
-                grid.displayDensity = DisplayDensity.compact;
-                tick(200);
-                fix.detectChanges();
-
-                // Pin one more column, because there is enough space for one more in 'compact' density.
-                GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate');
-                fix.detectChanges();
-                GridFunctions.clickPinIconInExcelStyleFiltering(fix, true);
-                tick(200);
-                fix.detectChanges();
-
-                // Open ESF for the 'ID' column and verify that 'pin column' icon button is disabled.
-                GridFunctions.clickExcelFilterIcon(fix, 'ID');
-                fix.detectChanges();
-                const headerButtons = GridFunctions.getExcelFilteringHeaderIcons(fix);
-                pinButton = GridFunctions.sortNativeElementsHorizontally(Array.from(headerButtons))[0];
-                expect(pinButton.classList.contains('igx-button--disabled')).toBe(true,
-                    'pinButton in header area should be disabled');
-            }));
     });
 
     describe(null, () => {
@@ -5792,27 +5702,6 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             fix.detectChanges();
         }));
 
-        it('Should not pin column when its parent group cannot be pinned.', fakeAsync(() => {
-            // Test prerequisites
-            grid.width = '1000px';
-            fix.detectChanges();
-            tick(100);
-
-            // Pin the 'AnotherField' column.
-            GridFunctions.clickExcelFilterIcon(fix, 'AnotherField');
-            fix.detectChanges();
-            GridFunctions.clickPinIconInExcelStyleFiltering(fix, false);
-            tick(200);
-            fix.detectChanges();
-
-            // Verify that the 'ProductName' pin button is disabled, because its parent column cannot be pinned.
-            GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
-            fix.detectChanges();
-            const pinButton = GridFunctions.getExcelFilteringPinContainer(fix);
-            expect(pinButton.classList.contains('igx-excel-filter__actions-pin--disabled')).toBe(true,
-                'pinButton should be disabled');
-        }));
-
         it('Should pin column next to already pinned group by moving it to the left.', fakeAsync(() => {
             // Test prerequisites
             grid.width = '1000px';

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

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