feat(filtering): null text & filterableCols #5496

Author: tachojelev

Diff for: projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html

@@ -32,6 +32,12 @@ <h4 class="igx-typography__h6">
                 <igx-icon fontSet="material">add</igx-icon>
                 <span>"Or" Group</span>
             </button>
+
+            <div style="display: flex; width: 100%;">
+                <span style="display: flex; margin: auto;">
+                    Start with creating a group of conditions linked with "And" or "Or"
+                </span>                
+            </div>
         </ng-container>
 
         <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression="afterExpression">
@@ -96,7 +102,7 @@ <h4 class="igx-typography__h6">
                             type="box"
                             [displayDensity]="displayDensity"
                             [(ngModel)]="selectedColumn">
-                    <igx-select-item *ngFor="let column of grid.columns" [value]="column">
+                    <igx-select-item *ngFor="let column of filterableColumns" [value]="column">
                         {{column.header}}
                     </igx-select-item>
                 </igx-select>

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

@@ -147,6 +147,10 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
         return this.filteringService.grid;
     }
 
+    get filterableColumns(): IgxColumnComponent[] {
+        return this.grid.columns.filter((col) => col.filterable);
+    }
+
     public dragMove(dragArgs: IDragBaseEventArgs) {
         const gridRect = this.grid.nativeElement.getBoundingClientRect();
         const dialogRect = dragArgs.owner.element.nativeElement.getBoundingClientRect();