Merge pull request #5609 from IgniteUI/tzhelev/fix-5557-8.1.x

Column cannot be pinned through ESF if top parent cannot be pinned - 8.1.x

Author: DiyanDimitrov

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

@@ -1687,8 +1687,8 @@ export class IgxColumnComponent implements AfterContentInit {
     */
     public get pinnable() {
         const gridUnpinnedWidth = (this.grid as any).getUnpinnedWidth(true);
-        const columnWidth = parseInt(this.width, 10);
-        return !((gridUnpinnedWidth - columnWidth) < this.grid.unpinnedAreaMinWidth);
+        const elementWidth = this.parent ? parseInt(this.topLevelParent.width, 10) : parseInt(this.width, 10);
+        return !((gridUnpinnedWidth - elementWidth) < this.grid.unpinnedAreaMinWidth);
     }
 
     /**

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

@@ -3504,7 +3504,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering', () => {
             declarations: [
                 IgxGridFilteringComponent,
                 IgxTestExcelFilteringDatePickerComponent,
-                IgxGridFilteringESFTemplatesComponent
+                IgxGridFilteringESFTemplatesComponent,
+                IgxGridFilteringMCHComponent
             ],
             imports: [
                 NoopAnimationsModule,
@@ -5614,6 +5615,37 @@ describe('IgxGrid - Filtering actions - Excel style filtering', () => {
             // expect(datePicker.componentInstance.templateDropDownTarget).toBeTruthy();
         }));
     });
+
+    describe(null, () => {
+        let fix, grid;
+        beforeEach(fakeAsync(() => {
+            fix = TestBed.createComponent(IgxGridFilteringMCHComponent);
+            grid = fix.componentInstance.grid;
+            grid.filterMode = FilterMode.excelStyleFilter;
+            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');
+        }));
+    });
 });
 
 const expectedResults = [];