filterApplied Example with Angular-Ionic

filterApplied Example with Angular-Ionic

Posted by: hoang.nguyen on 15 August 2018, 4:08 am EST

• 

  hoang.nguyen

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 15 August 2018, 4:08 am EST

  Do you have any sample code on how to use filterApplied on Angular-Ionic?

  I have tried following but is it not working:

  html page:

  <wj-flex-grid
  
  id=“Projects”
  
  #flexProjects
  
  [autoGenerateColumns]=“true”
  
  [headersVisibility]=“1”
  
  [allowSorting]=“true”
  
  [itemsSource]=“projects”
  
  [isReadOnly]=“true”
  
  [selectionMode]=“3”
  
  (filterApplied)=“filterApplied(flexProjects,$event)”
  
  (loadedRows)=“loadedRows(flexProjects)”
  
  (formatItem)=“formatItem(flexProjects,$event)”>
  
  <wj-flex-grid-filter
  
  [filterColumns]=“[‘ProjectName’]”>
  
  

  on ts page:

  import * as wjFilter from ‘wijmo/wijmo.grid.filter’;

  filterApplied(s, e): void {
  
  const filter = new wjFilter.FlexGridFilter(s);
  
  const colFilter = filter.getColumnFilter(e.col);

  console.log(colFilter);
  

  }

  this filterApplied function had never been triggered even I have clicked the filter icon on column header and applied new filter.

  Thank you very much.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 15 August 2018, 10:17 pm EST

  Hi,
  
  The filterApplied event belongs to the WjFlexGridFilter so the handler needs to be attached to the filter.
  
  Please refer to the following code snippet:-

  <wj-flex-grid #grid [itemsSource]="data">
   
  	<wj-flex-grid-filter (filterApplied)="filterApplied(grid,$event)"></wj-flex-grid-filter>
   
  </wj-flex-grid>
  

  You may also refer to the following sample in ionic:-
  
  https://stackblitz.com/edit/ionic-kch4yy?file=pages%2Fwijmo-grid%2Fwijmo-flexgrid.html

  ~Sharad

• 

  hoang.nguyen

  • Post Options:
  • Link
    Copy

  Posted 16 August 2018, 9:34 am EST - Updated 3 October 2022, 11:23 am EST

  Thank you Sharad very much for your quick respond. With you help, Now I can tell when user has click the ApPLY button. My next question is how can I retrieve the list of filter texts that user has selected for filtering

  As you can see in my example, user has select all values. Thank you very much.

  

  618×515 64.1 KB

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 16 August 2018, 11:28 pm EST

  Hi,

  You can get the list of selected filter values using showValues properties of the valueFilter.

  Also, filterChanged event would be a better alternative for this as we can get the column in EventArgs whose filter has been changed.

  Please refer to the following code snippet:-

  filterChanged(filter, args){
  	let valFilter = filter.getColumnFilter(args.panel.columns[args.col]).valueFilter;
  	//get show values
  	let showValues = valFilter.showValues;
  }
  

  You may also refer to the following sample:-
  
  https://stackblitz.com/edit/ionic-jmpgs1?file=pages%2Fwijmo-grid%2Fwijmo-flexgrid.ts

  ~Sharad

• 

  hoang.nguyen

  • Post Options:
  • Link
    Copy

  Posted 20 August 2018, 12:58 am EST

  Thank you sir very much

• 

  hoang.nguyen

  • Post Options:
  • Link
    Copy

  Posted 30 August 2018, 5:47 am EST

  I need to code a button that when Clicked will clear all filter values on all columns in a flexgrid but I do not know where to start.

  This is what I have tried but it does not work:

  import * as wjGrid from ‘wijmo/wijmo.grid’;
  
  import * as wjGridFilter from ‘wijmo/wijmo.grid.filter’;

  @ViewChild(‘flexProjects’) flexProjects: wjGrid.FlexGrid;

  resetFilter() {
  
  const filter = new wjGridFilter.FlexGridFilter(this.flexProjects);

  filter.clear();
  

  }

  Am I missing anything?

  Thank you very much.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 30 August 2018, 4:57 pm EST

  Hi,

  To clear filter, all you need to do is call clear() method on existing instance of FlexGridFilter.
  
  Please refer to the following code snippet:-

  <wj-flex-grid [itemsSource]="data">
  	<wj-flex-grid-filter #filter></wj-flex-grid-filter>
  </wj-flex-grid>
  <button (click)="filter.clear()" >Clear Filter</button>
  

  You may also refer to the following sample for the same:-
  
  https://stackblitz.com/edit/ionic-mmiovk?file=pages%2Fwijmo-grid%2Fwijmo-flexgrid.ts

  Regards
  
  Sharad

• 

  hoang.nguyen

  • Post Options:
  • Link
    Copy

  Posted 31 August 2018, 1:00 am EST

  Thank you Sharad very much.