Wijmo Flex grid clearing filter

Wijmo Flex grid clearing filter

Posted by: ankita on 1 May 2019, 12:11 pm EST

• 

  ankita

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 1 May 2019, 12:11 pm EST - Updated 3 October 2022, 8:04 pm EST

  Hello,
  
  I am using Wijmo flex grid pure js.

  How to clear the filter on the column?
  
  

  

  781×261 19.1 KB

  We are showing applied filter details as text above the grid with a close button.
  
  On click of button(X) we need to clear/remove that particular filter from the grid.

  Below is the sample code we are useing to show applied filter on the grid.
  
  MyGridFilter.filterChanged.addHandler(function (s, e) {
  
  var filterDefinition = JSON.parse(MyGridFilter.filterDefinition);
  
  var FilterText = ‘’;
  
  for (var i = 0; i < filterDefinition.filters.length; i++) {
  
  var _CurFilter = filterDefinition.filters[i];
  
  var FilterName = _CurFilter.binding;
  
  var FilterValuesObj = Object.keys(_CurFilter.showValues);
  
  var FilterValues = FilterValuesObj.join(“, “);
  
  FilterText = FilterText + ((FilterText != ‘’) ? “|” : “”) +
  
  “” + FilterName + “(” + FilterValues + “) X ”;
  
  }
  
  $(”#AppliedFilters”).html(FilterText);
  
  });

• 

  ankita

  • Post Options:
  • Link
    Copy

  Posted 1 May 2019, 2:06 pm EST

  Below code works for me.
  
  Please suggest if there is a better way to do this.!!

  
  function ClearThisFilter(e) {
      var id = e.id;
      var filterDefinition = JSON.parse(MyGridFilter.filterDefinition);
      $.each(filterDefinition.filters, function (key, value) {
          if (value.binding == id) {
              console.log(value);
              filterDefinition.filters.splice(key, 1);
              return false;
          }
      });  
      MyGridFilter.filterDefinition = JSON.stringify(filterDefinition);   
  }
  
  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 2 May 2019, 5:31 am EST

  Hi,

  In order to remove the filter, you could use the clear() method of ColumnFilter class. Please refer to the code snippet below:

  function ClearThisFilter(e) {
      var f = filter.getColumnFilter(e.id); // get the curren column filter
      f.clear(); // Clear the filter
      gridDefault.collectionView.refresh(); // refresh the collectionView
      $(e).parent().remove(); // remove the chip
  }
  

  You may also refer to the sample below:
  
  https://jsfiddle.net/rhs89naj/

  API Reference:

  • clear method:
  
  https://www.grapecity.com/wijmo/api/classes/wijmo_grid_filter.columnfilter.html#clear

  •ColumnFilter class:
  
  https://www.grapecity.com/wijmo/api/classes/wijmo_grid_filter.columnfilter.html

  ~Sharad

• 

  ankita

  • Post Options:
  • Link
    Copy

  Posted 2 May 2019, 10:53 am EST

  Hello Sharad,
  
  Thank you for prompt response.