Merge branch 'master' into tzhelev/esf-load-on-demand

Author: tachojelev

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

@@ -3506,7 +3506,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering', () => {
                 IgxGridFilteringComponent,
                 IgxTestExcelFilteringDatePickerComponent,
                 IgxGridFilteringESFTemplatesComponent,
-                IgxGridFilteringESFLoadOnDemandComponent
+                IgxGridFilteringESFLoadOnDemandComponent,
+                IgxGridFilteringMCHComponent
             ],
             imports: [
                 NoopAnimationsModule,
@@ -5646,6 +5647,37 @@ describe('IgxGrid - Filtering actions - Excel style filtering', () => {
             expect(listItems.length).toBe(6, 'incorrect rendered list items count');
             loadingIndicator = GridFunctions.getExcelFilteringLoadingIndicator(fix);
             expect(loadingIndicator).toBeNull('esf loading indicator is visible');
+          }));
+    });
+
+    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');
         }));
     });
 });