Flexgrid. Filter rows based on multiple columns

Posted by: hme on 12 February 2019, 8:17 am EST

  • Posted 12 February 2019, 8:17 am EST



    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.
  • Replied 13 February 2019, 1:50 am 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."?
  • Replied 13 February 2019, 11: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.
  • Marked as Answer

    Replied 18 February 2019, 2:44 am 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
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels