Flexgrid. Filter rows based on multiple columns

Flexgrid. Filter rows based on multiple columns

Posted by: hme on 11 February 2019, 11:17 pm EST

• 

  hme

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 11 February 2019, 11:17 pm EST - Updated 3 October 2022, 11:11 am EST

  

  1681×217 17.7 KB

  Hello

  In our app we have flexible report that may contain just a rows as well as data grouped by multiple fields. Also, it can be exported to Excel.

  Question. Is there any built-in way to filter out rows based on multiple columns values? In our case highlighted rows with ze ro values should be filtered out.
  
  Grouping and exporting should also use filtered rows.

  PS. We cannot filter data in backend code, so looking for a way to get it done using flex-grid features.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 12 February 2019, 4:50 pm EST

  Hi,

  We can assign a filter function to the underlying collectionView of the grid to filter items as required.
  
  Please refer to the following code snippet and sample demonstrating the same:

  var grid=new wijmo.grid.FlexGrid('#theGrid',{
    itemsSource:getData(50),
  });
  // assign filter function to underlying collection view
  grid.collectionView.filter = function(item){
    if(item.id < 10){
      return false;
    }
    if(item.country == 'UK'){
      return false;
    }
    return true;
  }
  

  https://stackblitz.com/edit/js-c9pg74?file=index.js
  
  You may also refer to the following doc for more info on the filter function: https://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.collections.CollectionView.Class.html#filter
  
  Could you please explain more on what you mean by “Grouping and exporting should also use filtered rows.”?

• 

  hme

  • Post Options:
  • Link
    Copy

  Posted 13 February 2019, 2:53 am EST

  We cannot use collection view filtering because columns are dynamic.
  
  This is how it works in our app:

                  <wj-flex-grid-column [dataMap]="getDataMap(column.field)" [header]="column.header" [binding]="column.field" [visible]="column.visible"
                                       [name]="column.field" [align]="'center'" [width]="column.width" [aggregate]="column.aggregation" [sortMemberPath]="column.sortMemberPath"
                                       *ngFor="let column of gridColumns">
  
  

  So, grid is dynamic and we never know what properties should be used to check if specific row should be hidden.
  
  What we look for is an event that occurs right before specific row is rendered. Inside an event handler we check if all row cells but left one are zero and cancel row rendering.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 17 February 2019, 5:44 pm EST

  In this case, all we have to do is refresh the filter function after changing the definition of gridColumns.
  
  Please refer to the following updated sample demonstrating the same:
  
  https://stackblitz.com/edit/angular-bevdk7?file=src%2Fapp%2Fapp.component.html