fix(filter): should be able to filter even on hidden columns, fixes #310

Author: ghiscoding-SE

src/app/examples/grid-menu.component.ts

@@ -26,7 +26,6 @@ export class GridMenuComponent implements OnInit {
   gridOptions: GridOption;
   dataset: any[];
   selectedLanguage: string;
-  visibleColumns: Column[];
 
   constructor(private translate: TranslateService) {
     // always start with English for Cypress E2E tests to be consistent
@@ -60,8 +59,6 @@ export class GridMenuComponent implements OnInit {
       }
     ];
 
-    this.visibleColumns = this.columnDefinitions;
-
     this.gridOptions = {
       columnPicker: {
         hideForceFitButton: true,

src/app/modules/angular-slickgrid/services/__tests__/filter.service.spec.ts

@@ -15,6 +15,7 @@ import {
 import { Filters } from '../../filters';
 import { FilterService } from '../filter.service';
 import { FilterFactory } from '../../filters/filterFactory';
+import { SharedService } from '../shared.service';
 import { SlickgridConfig, CollectionService } from '../..';
 import { of, throwError } from 'rxjs';
 
@@ -66,6 +67,7 @@ const gridStub = {
 
 describe('FilterService', () => {
   let service: FilterService;
+  let sharedService: SharedService;
   let slickgridEventHandler: SlickEventHandler;
 
   beforeEach(async(() => {
@@ -79,13 +81,15 @@ describe('FilterService', () => {
         FilterService,
         CollectionService,
         FilterFactory,
+        SharedService,
         SlickgridConfig,
       ],
       imports: [
         TranslateModule.forRoot()
       ]
     });
     service = TestBed.get(FilterService);
+    sharedService = TestBed.get(SharedService);
     slickgridEventHandler = service.eventHandler;
   }));
 
@@ -550,7 +554,7 @@ describe('FilterService', () => {
       mockItem1 = { firstName: 'John', lastName: 'Doe', fullName: 'John Doe', age: 26, address: { zip: 123456 } };
     });
 
-    it('should return False when there are no column definition found', () => {
+    it('should return True (nothing to filter, all rows will be returned) when there are no column definition found', () => {
       const searchValue = 'John';
       const mockColumn1 = { id: 'firstName', field: 'firstName', filterable: true } as Column;
       jest.spyOn(gridStub, 'getColumns').mockReturnValue([]);
@@ -559,7 +563,7 @@ describe('FilterService', () => {
       const columnFilters = { firstName: { columnDef: mockColumn1, columnId: 'firstName', operator: 'EQ', searchTerms: [searchValue] } };
       const output = service.customLocalFilter(mockItem1, { dataView: dataViewStub, grid: gridStub, columnFilters });
 
-      expect(output).toBe(false);
+      expect(output).toBe(true);
     });
 
     it('should return True when input value from datacontext is the same as the searchTerms', () => {
@@ -574,6 +578,19 @@ describe('FilterService', () => {
       expect(output).toBe(true);
     });
 
+    it('should work on a hidden column by using the sharedService "allColumns" and return True when input value the same as the searchTerms', () => {
+      const searchValue = 'John';
+      const mockColumn1 = { id: 'firstName', field: 'firstName', filterable: true } as Column;
+      sharedService.allColumns = [mockColumn1];
+      jest.spyOn(gridStub, 'getColumns').mockReturnValue([]);
+
+      service.init(gridStub);
+      const columnFilters = { firstName: { columnDef: mockColumn1, columnId: 'firstName', operator: 'EQ', searchTerms: [searchValue] } };
+      const output = service.customLocalFilter(mockItem1, { dataView: dataViewStub, grid: gridStub, columnFilters });
+
+      expect(output).toBe(true);
+    });
+
     it('should return True when the searchTerms is an empty array', () => {
       const mockColumn1 = { id: 'firstName', field: 'firstName', filterable: true } as Column;
       jest.spyOn(gridStub, 'getColumns').mockReturnValue([mockColumn1]);
@@ -597,6 +614,19 @@ describe('FilterService', () => {
       expect(output).toBe(false);
     });
 
+    it('should work on a hidden column by using the sharedService "allColumns" and return return False when input value is not equal to the searchTerms', () => {
+      const searchValue = 'Johnny';
+      const mockColumn1 = { id: 'firstName', field: 'firstName', filterable: true } as Column;
+      sharedService.allColumns = [mockColumn1];
+      jest.spyOn(gridStub, 'getColumns').mockReturnValue([]);
+
+      service.init(gridStub);
+      const columnFilters = { firstName: { columnDef: mockColumn1, columnId: 'firstName', operator: 'EQ', searchTerms: [searchValue] } };
+      const output = service.customLocalFilter(mockItem1, { dataView: dataViewStub, grid: gridStub, columnFilters });
+
+      expect(output).toBe(false);
+    });
+
     it('should return True when input value from datacontext is a number and searchTerms is also a number', () => {
       const searchValue = 26;
       const mockColumn1 = { id: 'age', field: 'age', filterable: true } as Column;

src/app/modules/angular-slickgrid/services/filter.service.ts

@@ -22,6 +22,7 @@ import { executeBackendCallback } from './backend-utilities';
 import { getDescendantProperty } from './utilities';
 import { FilterConditions } from './../filter-conditions';
 import { FilterFactory } from '../filters/filterFactory';
+import { SharedService } from './shared.service';
 import { Subject } from 'rxjs';
 import * as isequal_ from 'lodash.isequal';
 const isequal = isequal_; // patch to fix rollup to work
@@ -47,7 +48,7 @@ export class FilterService {
   onFilterChanged = new Subject<CurrentFilter[]>();
   onFilterCleared = new Subject<boolean>();
 
-  constructor(private filterFactory: FilterFactory) {
+  constructor(private filterFactory: FilterFactory, private sharedService: SharedService) {
     this._eventHandler = new Slick.EventHandler();
     this._onSearchChange = new Slick.Event();
   }
@@ -238,10 +239,19 @@ export class FilterService {
     const dataView = args && args.dataView;
     for (const columnId of Object.keys(args.columnFilters)) {
       const columnFilter = args.columnFilters[columnId];
-      const columnIndex = args.grid.getColumnIndex(columnId);
-      const columnDef = args.grid.getColumns()[columnIndex];
+      let columnIndex = args.grid.getColumnIndex(columnId);
+      let columnDef = args.grid.getColumns()[columnIndex];
+
+      // it might be a hidden column, if so it won't be part of the getColumns (because it we hide a column via setColumns)
+      // when that happens we can try to get the column definition from all defined columns
+      if (!columnDef && this.sharedService && Array.isArray(this.sharedService.allColumns)) {
+        columnIndex = this.sharedService.allColumns.findIndex((col) => col.field === columnId);
+        columnDef = this.sharedService.allColumns[columnIndex];
+      }
+
+      // if we still don't have a column definition then we should return then row anyway (true)
       if (!columnDef) {
-        return false;
+        return true;
       }
 
       // Row Detail View plugin, if the row is padding we just get the value we're filtering on from it's parent