Give default filter value in the per-column filtering for the FlexGrid

Give default filter value in the per-column filtering for the FlexGrid

Posted by: rasika-sinha on 14 September 2017, 12:06 pm EST

• 

  rasika-sinha

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 12:06 pm EST

  Hi Team,

  I have a flex grid in which there are few columns having in-column filter functionality via the FlexGridFilter. I want to assign a filter value to one of the columns by default.

  For example there is a column named Status which has values open/close/archived, I want the in-column filter to filter out only rows with open status by default when the grid loads and then the user can clear or update the filter by opening the filtereditor.

  Can you please help me identify how I can achieve the same.

  Thanks.

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:06 pm EST

  Hello Rasika,
  
  You can apply filter on page load using filterDefinintion.
  
  In your case, filterDefinition would be as following:

  var filter = new wijmo.grid.filter.FlexGridFilter(grid);
              filter.filterDefinition = '{ "defaultFilterType": 3, "filters": [{ "binding": "status ", "type": "value", "filterText": "", "showValues": { "open": true } }] }';

  For your reference, please see the attached sample that implements the same.

  Thanks,
  
  Manish Kumar Gupta
  
  2017/06/FlexGrid_onloadFiltering.zip

• 

  rasika-sinha

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:06 pm EST

  Hi Manish,

  Thanks for the code snippet, I have tried this, but the filter is removed if I update the ItemSource of the grid, is there anyway to retain the filter?
  
  Please refer the updated code.

  In my scenario, the grid loads with no data initially with a loader and as the data is received by the api, it is assigned to the grid, therefore the ItemSource needs to be updated.

  Thanks,
  
  Rasika
  
  2017/06/FlexGrid_onloadFiltering-updated.zip

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:06 pm EST

  Hi Rasika,
  
  You can update itemsSource without removing applied filtering by replacing updated data through sourceCollection instead of creating new collectionView. Please use the following code snippet for the same.

  var cvData = new wijmo.collections.CollectionView(data);
  countries = 'US,UK,Japan,Italy,Greece'.split(','),
                  data = [];
  
  for (var i = 0; i < 300; i++) {
      data.push({
           id:i,
           country: countries[i % countries.length],
           downloads: Math.random() * 20000,
           date: new Date(2014, i % 12, i % 28),
           sales: Math.random() * 10000,
           discount: 0.0000027
       });
  }
  // update the collection
  cvData.sourceCollection= data;
  cvData.refresh();

  Thanks,
  
  Manish Kumar Gupta

• 

  rasika-sinha

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:06 pm EST

  Thanks Manish, its working for me now!

• 

  aranjan6

  • Post Options:
  • Link
    Copy

  Posted 24 September 2020, 9:52 am EST

  Hello Manish… Can you please provide any example how to implement this in Angular.
  
  I am referring to your first reply of this thread.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 25 September 2020, 5:00 am EST

  Hello,
  
  Please find the Angular version in the following demo:
  
  https://stackblitz.com/edit/angular-5s1bsn?file=src%2Fapp%2Fapp.component.ts

  Response