Custom Filtering in Wijmo Grid

WijGrid provides built-in filtering features that does not require you to write a lot of code. You just need to set the showFilter option to true and the condition filters will be displayed for each column based on its datatype. However, there are many times as a developer, you want to customize the filters as per the project requirement. For example, you don’t want to display ‘contains’ as a filter option for Country column etc. Don’t worry! In this blog, I have tried to cover such scenarios and will share different ways to customize filtering in WijGrid. The most common customization's are:

1. Removing built-in options from Filter Dropdown
2. Adding custom options in Filter DropDown
3. Value Based filter

Removing built-in options from Filter Dropdown By default, WijGrid displays options like Begins With, Contains, etc. for string column and Equals, Greater Than etc. for numeric column. Plus, you may customize and display only a few options as per your requirement by simply handling the ‘filterOperatorsListShowing’ event. Here is the code to display only the "Equals" filter operator:

// Limit the filters that will be shown to the "Equals" filter operator  
$("#element").wijgrid({  
  filterOperatorsListShowing: function (e, args) {  
    args.operators = $.grep(args.operators, function(op) {  
      return op.name === "Equals" || op.name === "NoFilter";  
   }  
  }  
});

For more details, you can refer to this documentation link. Adding custom options in Filter DropDown You can provide custom options like filtering, even numbers for numeric column etc. to the end user by creating custom filter operators in WijGrid. Here is the code snippet:

var fop_Even = {  
  name: "Even",  
  arity: 1,  
  applicableTo: ["number", "currency"],  
  operator: function(dataVal) {  
    return dataVal % 2 === 0;  
  }  
 }  

$("#demo").wijgrid({  
  showFilter: true,  
  allowSorting: true,  
  customFilterOperators: [ fop_Even ],  
  columns: [ {}, { dataType: "number" } ]  
});

You can find the complete sample implementing this in the Wijmo package (which you must first have downloaded) at the following location : \Samples\WidgetExplorer\samples\grid\ custom-filter-operators.html Value Based filter Wijmo provide a separate filter js i.e. WijFilter for creating an Excel like filter dialog and an extended version of wijGrid js for its implementation with Wijmo Grid. Check out the following video showing the behavior:

The sample and js files are available in the Wijmo package at the following location: \Samples\WidgetExplorer\samples\filter Feel free to share your feedback or if there is another scenario which I forgot to cover in this blog.