Merge pull request #5952 from IgniteUI/tzhelev/fix-5886-8.2.x

Exclude column groups from column select in advanced filtering dialog - 8.2.x

Author: DiyanDimitrov

projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts

@@ -254,7 +254,7 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
     }
 
     get filterableColumns(): IgxColumnComponent[] {
-        return this.grid.columns.filter((col) => col.filterable);
+        return this.grid.columns.filter((col) => !col.columnGroup && col.filterable);
     }
 
     public dragStart(dragArgs: IDragStartEventArgs) {

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

@@ -13,6 +13,7 @@ import { changei18n, getCurrentResourceStrings } from '../../core/i18n/resources
 import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
 import { FilteringLogic } from '../../data-operations/filtering-expression.interface';
 import {
+    IgxGridAdvancedFilteringColumnGroupComponent,
     IgxGridAdvancedFilteringComponent
 } from '../../test-utils/grid-samples.spec';
 
@@ -26,6 +27,7 @@ describe('IgxGrid - Advanced Filtering', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             declarations: [
+                IgxGridAdvancedFilteringColumnGroupComponent,
                 IgxGridAdvancedFilteringComponent
             ],
             imports: [
@@ -2660,6 +2662,34 @@ describe('IgxGrid - Advanced Filtering', () => {
             }));
         });
     });
+
+    describe('', () => {
+        let fix, grid: IgxGridComponent;
+        beforeEach(fakeAsync(() => {
+            fix = TestBed.createComponent(IgxGridAdvancedFilteringColumnGroupComponent);
+            grid = fix.componentInstance.grid;
+            fix.detectChanges();
+        }));
+
+        it('Should not display column groups in advanced filtering dialog.', fakeAsync(() => {
+            // Open dialog through API.
+            grid.openAdvancedFilteringDialog();
+            fix.detectChanges();
+
+            // Click the initial 'Add And Group' button.
+            const addAndGroupButton = GridFunctions.getAdvancedFilteringInitialAddGroupButtons(fix)[0];
+            addAndGroupButton.click();
+            tick(100);
+            fix.detectChanges();
+
+            // Open column dropdown and verify that there are no column groups present.
+            GridFunctions.clickAdvancedFilteringColumnSelect(fix);
+            fix.detectChanges();
+            const dropdownValues = GridFunctions.getAdvancedFilteringSelectDropdownItems(fix).map((x: any) => x.innerText);
+            const expectedValues = ['ID', 'ProductName', 'Downloads', 'Released', 'ReleaseDate', 'Another Field'];
+            expect(expectedValues).toEqual(dropdownValues);
+        }));
+    });
 });
 
 
@@ -2852,8 +2882,6 @@ function verifyContextMenuType(fix, shouldBeContextualGroup: boolean) {
 
 function verifyEqualArrays(firstArr: any[], secondArr: any[]) {
     expect(firstArr.length).toEqual(secondArr.length, 'Array lengths mismatch.');
-    firstArr = firstArr.sort();
-    secondArr = secondArr.sort();
     // Verify sorted arrays have equal respective elements.
     const len = firstArr.length;
     for (let index = 0; index < len; index++) {

projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

@@ -1198,6 +1198,31 @@ export class IgxGridAdvancedFilteringComponent extends BasicGridComponent {
     }
 }
 
+@Component({
+    template: `<igx-grid [data]="data" height="500px" [allowAdvancedFiltering]="true" [showToolbar]="true">
+        <igx-column width="100px" [field]="'ID'" [header]="'ID'" [hasSummary]="true"></igx-column>
+        <igx-column width="100px" [field]="'ProductName'" dataType="string"></igx-column>
+        <igx-column width="100px" [field]="'Downloads'" dataType="number" [hasSummary]="true"></igx-column>
+        <igx-column-group header="Released Group">
+            <igx-column width="100px" [field]="'Released'" dataType="boolean"></igx-column>
+            <igx-column width="100px" [field]="'ReleaseDate'" dataType="date" headerClasses="header-release-date"></igx-column>
+        </igx-column-group>
+        <igx-column width="100px" [field]="'AnotherField'" [header]="'Another Field'" dataType="string" [filters]="customFilter">
+        </igx-column>
+    </igx-grid>`
+})
+export class IgxGridAdvancedFilteringColumnGroupComponent extends BasicGridComponent {
+    public customFilter = CustomFilter.instance();
+    public resizable = false;
+    public filterable = true;
+
+    public data = SampleTestData.excelFilteringData();
+    public activateFiltering(activate: boolean) {
+        this.grid.allowFiltering = activate;
+        this.grid.cdr.markForCheck();
+    }
+}
+
 @Component({
     template: `
     <igx-grid [data]="data" height="500px" width="500px">