WJgrid filter not working after applying custom filter

WJgrid filter not working after applying custom filter

Posted by: parmarkinjalk on 23 January 2020, 3:01 am EST

• 

  parmarkinjalk

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 23 January 2020, 3:01 am EST

  Hi Team,

  I am using angular 4 with wijmo. I have a “wj-flex-grid” inside that I have “wj-flex-grid-filter”. I am using the column filters and they are working fine on their own. Our users use 1 filter very often so we have to put in a checkbox and if the user clicks that checkbox that filter is applied to the grid. Now this checkbox is working as well. But when I use the checkbox filter the column filter on the grid stops working. What I want to do is first apply the checkbox filter and then apply the column filter to narrow the the list more.
  
  So basically when I apply custom filter the built in filters stops working. I know there is another post on this issue but I didn’t understand the example provided in that forum.

  <input 
      type="checkbox" 
      name="BUSINESS_LINE_2019" 
      (change)="filterCoverage($event)"
      /> BUSINESS_LINE_2019
  

   <wj-flex-grid [itemsSource]="data" [frozenColumns]="1" #flex>
              <wj-flex-grid-filter #gridFilter>
              </wj-flex-grid-filter>
              <wj-flex-grid-column
              [width]="'2.5*'"
                header="Document Name"
                binding="documentNm">
              </wj-flex-grid-column>
              <wj-flex-grid-column
              [width]="'1.5*'"
                header="Sub-Type"
                binding="documentSubTypeCd.code">
              </wj-flex-grid-column>
  

  filterCoverage(e){
    console.log(e)
    let filter = (<HTMLInputElement>e.target).name.toLowerCase();
    this.flex.collectionView.filter = (item: any) => {
      
        return filter.length == 0 || !e.target.checked || item.documentSubTypeCd.code.toLowerCase().indexOf(filter) > -1
    }
    
  }
  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 23 January 2020, 3:22 pm EST

  Hi Kinjalk,

  For this, you may use the filters property of the CollectionView class to push a default filter. And when the checkbox is unchecked, remove this filter:

  <input type="checkbox" checked (change)="refreshFilter(grid, $event)" />Filter
  <br><br>
  <wj-flex-grid #grid (initialized)="initGrid(grid)" [itemsSource]="source">
    <wj-flex-grid-filter></wj-flex-grid-filter>
    <wj-flex-grid-column header="Country" binding="country"></wj-flex-grid-column>
    <wj-flex-grid-column header="Date" binding="date"></wj-flex-grid-column>
    <wj-flex-grid-column header="Amount" binding="amount"></wj-flex-grid-column>
  </wj-flex-grid>
  

  initGrid(grid) {
  	grid.collectionView.filters.push(this.defaultFilterFunction.bind(this));
  }
  
  refreshFilter(grid, e) {
  	if(e.target.checked) {
  		grid.collectionView.filters.push(this.defaultFilterFunction.bind(this));
  	}
      	else {
        		grid.collectionView.filters.pop();
      	}
  }
  
  private defaultFilterFunction(item) {
  	return item.country !== "US";
  }
  

  https://stackblitz.com/edit/angular-j6numu

  Regards,
  
  Ashwin

  API Reference:
  
  CollectionView.filters: https://www.grapecity.com/wijmo/api/classes/wijmo.collectionview.html#filters

• 

  parmarkinjalk

  • Post Options:
  • Link
    Copy

  Posted 24 January 2020, 7:37 am EST

  Getting this error “‘filters’ does not exist on type ‘ICollectionView’. Did you mean ‘filter’?”

  If I put filter it gives error saying “Property ‘push’ does not exist on type ‘IPredicate’.”

  I am using wjcGrid.FlexGrid, I put a debugger and saw there is a “filter” proprerty but no “filters” property.

  I am using Wijmo Library 5.20162.207

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 26 January 2020, 8:30 pm EST

  Hi Kinjalk,

  The filters property was added in the later version of wijmo. In the 16v2 version, you will need to use the filter property only. Initially, set the filter property to the default function. Then, in the filterApplied event of FlexGridFilter class, update the filter to use the default filter as well as the newly added filter. Please refer to the updated sample below:

  https://stackblitz.com/edit/angular-5cfk3v

  ~regards

• 

  parmarkinjalk

  • Post Options:
  • Link
    Copy

  Posted 27 January 2020, 3:19 am EST

  Hi Ashwin,

  Thanks for the response. can I use the same license to upgrade my wijmo to latest version?

  Also, In the above example can you please modify the code so that I can setup multiple filters like you did for US. For eg. put another checkbox for germany and I can choose either germany or US or both.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 27 January 2020, 4:10 pm EST

  Hi,

  Regarding multiple filters, please refer to the updated sample below:

  https://stackblitz.com/edit/angular-ecgxc7

  In this sample, I have created a Filters class that can be used to provide a filter function. You can create an array of Filters class and add your custom filter functions to this class. Then, in the defaultFilterFunction, iterate over each filter and return the result accordingly.

  Regarding the license, if you have purchased a license for the 16v2 version, then you can only upgrade your product up to 17v2 (5.20172.*) version. To upgrade to the latest build, you will need to purchase the latest license. For purchasing the license, you may contact the sales team at us.sales@grapecity.com.

  Let me know in case you have any doubts.

  ~regards

• 

  parmarkinjalk

  • Post Options:
  • Link
    Copy

  Posted 28 January 2020, 3:49 am EST

  Thanks Ashwin,

  In you code you hide the country which is selected. I changed that to show the country which is selected. But Now I am only able to either show US or Germany but not both. is there a way to make it work exactly like the column filter . When I choose US and Germany it should show data for both countries so basically run each filter on the entire data-set not just the filtered out set.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 28 January 2020, 4:05 pm EST

  Hi Kinjalk,

  The defaultFilterFunction provided earlier was using AND(&&) operator because the conditions needed to be evaluated using AND operator. If you change the filter functions to show the values instead of not showing the values, you will need an OR(||) operator.
  
  This means that the logical operator used in the defaultFitlerFunction must be set beforehand according to the conditions. If you need to show the values, then change it to OR:

  private defaultFilterFunction(item) {
      let result = false;
      this.filters.forEach(f => {
        if(!f.isActive) {
          return;
        }
        else {
          result = result || f.filterFunction(item);
        }
      });
      return result;
    }
  

  So, basically, you will need to update this method according to your requirements.
  
  In our condition filter also, we ask the user to provide an operator (AND or OR). But, in your case, since the filters are provided by you only, you can set them in your code.
  
  Let me know in case you have any doubts.

  ~regards

• 

  parmarkinjalk

  • Post Options:
  • Link
    Copy

  Posted 18 February 2020, 2:25 am EST

  Hi Ashwin,

  I modified the code to show the contries that have been selected. But now initially the grid is blank and when I click on the check box for any country, that country shows up in the grid. I want the entire dataset to be shown on the grid initially and as I click on the checkbox I want to apply that filter on the entire dataset not just the filtered dataset.

  
  <input type="checkbox" [(ngModel)]="filters[1].isActive" (change)="grid.collectionView.refresh()" />Germany Filter
  
  constructor() {
      this.source = this.getData(50);
      this.filters = [
        { key: 'us', filterFunction: this.usFilterFunction, isActive: false },
        { key: 'germany', filterFunction: this.germanyFilterFunction, isActive: false}
      ]
    }
  
    initGrid(grid) {
      grid.collectionView.filter = this.defaultFilterFunction.bind(this);
    }
  
    onFilter(filter) {
      let _oldFilter = filter.grid.collectionView.filter;
      let f = this;
      filter.grid.collectionView.filter = function(item) {
        return f.defaultFilterFunction(item) && _oldFilter.call(this, item);
      };
    }
  
    private defaultFilterFunction(item) {
      let result = false;
      this.filters.forEach(f => {
        if(!f.isActive) {
          return;
        }
        result = result || f.filterFunction(item);
      });
      return result;
    }
  
    private usFilterFunction(item): boolean {
      return item.country == "US";
    }
  
    private germanyFilterFunction(item): boolean {
      return item.country == "Germany";
    }
  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 19 February 2020, 3:04 pm EST

  Hi Kinjalk,

  In the defaultFilterFunction, you can first check whether any of the filters is enabled then only call their filterFunctions:

  private defaultFilterFunction(item) {
    if(!this.filterEnabled) {
      return true;
    }
    let result = false;
    this.filters.forEach(f => {
      if(!f.isActive) {
        return;
      }
      result = result || f.filterFunction(item);
    });
    return result;
  }
  
  get filterEnabled(): boolean {
    for(let i = 0; i < this.filters.length; i++) {
      if(this.filters[i].isActive) {
        return true;
      }
    }
    return false;
  }
  

  https://stackblitz.com/edit/angular-u73ist

  ~regards

• 

  parmarkinjalk

  • Post Options:
  • Link
    Copy

  Posted 27 February 2020, 4:24 pm EST

  Thanks for the above solution.

  I was trying to add more checkbox filter in the above example for different column. What I did was I added another column named ‘Format’ with the below code

     var format = "pdf,excel,txt".split(",")
      for (var i = 0; i < count; i++) {
        data.push({
          id: i,
          country: countries[i % countries.length],
          format: format[i % format.length],
          date: new Date(2014, i % 12, i % 28),
          amount: Math.random() * 10000,
          active: i % 4 == 0
        });
  

  Then I added the column to the html as well as the checkboxes

  <wj-flex-grid-column header="Format" binding="format"></wj-flex-grid-column>
  
  <input type="checkbox" [(ngModel)]="Formatfilters[0].isActive" (change)="grid.collectionView.refresh()" />PDF Filter
  <br>
  <input type="checkbox" [(ngModel)]="Formatfilters[1].isActive" (change)="grid.collectionView.refresh()" />Excel Filter
  

  Then I added the Format filter array and filter functions

  this.Formatfilters = [
        { key: 'pdf', filterFunction: this.pdfFilterFunction, isActive: false },
        { key: 'excel', filterFunction: this.excelFilterFunction, isActive: false}
      ]
  
  
  private pdfFilterFunction(item): boolean {
      return item.format === "pdf";
    }
  
    private excelFilterFunction(item): boolean {
      return item.format === "excel";
    }
  
  

  Then I added the formatFilterEnabled function similar to filterEnabled.

  get FormatfilterEnabled(): boolean {
      for(let i = 0; i < this.Formatfilters.length; i++) {
        if(this.Formatfilters[i].isActive) {
          return true;
        }
      }
      return false;
    }
  

  Now I am not understanding how to change “defaultFilterFunction” function so the filter for both column “country” and “format” work simultaneously. I have 2 other checkboxes ‘Pdf’ and ‘excel’ that need to work on the format column. Thanks.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 1 March 2020, 11:23 pm EST

  Hi Kinjalk,

  I am working on this and will update you as soon as possible.

  ~regards

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 2 March 2020, 2:57 pm EST

  Hi Kinjalk,

  You do not need to create another filters array. Simply add the pdf and excel filter to the original array and it will work as expected. Please refer to the sample below:

  https://stackblitz.com/edit/angular-kjkc5t

  ~regards

• 

  parmarkinjalk

  • Post Options:
  • Link
    Copy

  Posted 6 March 2020, 5:42 am EST

  hi ashwin,

  In the above example you provided, if I choose ‘US filter’ and ‘PDF filter’ I also see other countries in the list. I want to see result which have both ‘US’ and ‘PDF’. and after that if I choose ‘germany’ it should add germany to the list with format as pdf,basically how it would work in the column filter.

  Also, is there a way to call the method that column filter uses and pass the parameter to filter from the outside.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 8 March 2020, 8:09 pm EST

  Hi,
  
  You may add the conditions to filtered out accordingly by pushing search condition in collectionView’s filters properties which add additional filters.

  Please refer to the following sample:
  
  https://stackblitz.com/edit/angular-mzggj3?file=src/app/app.component.ts

  Hope it helps!

  Regards,
  
  Manish Gupta