Wijmo 5 - Custom Filter Operators | Pure JS

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
<h1>Custom Filter Operators</h1>

  <p>
    The <b>FlexGridFilter</b> class is localizable, and you can take advantage of that
    not only to customize the strings displayed in the UI, but also which filter conditions
    to show for each data type.</p>
  <p>
    In this fiddle, we customized the list of operators by assigning custom arrays to the
    filter's <b>stringOperators</b>, <b>numberOperators</b>, <b>dateOperators</b>, and
    <b>booleanOperators</b>. Open the filter drop-downs to see the effect.</p>
  <p>
    This technique allows you to re-order, remove, and include operators for each data
    type. It does not allow you to create new, custom operators. For that, you would have to fork the source code and customize it.</p>

<!-- FlexGrid -->
<div id="theGrid" style="max-height:300px;"></div>

JavaScript

onload=function(){
	//customize Grid FIlter Conditions
	var filter= wijmo.culture.FlexGridFilter,
	Operator = wijmo.grid.filter.Operator;
  console.log(filter)
  filter.clear="Clear";
  filter.apply="Apply";
  filter.selectAll="Select All";
  filter.cancel="Cancel";
  
	filter.stringOperators = [
            { name: '(not set)', op: null },
            { name: 'Same', op: Operator.EQ },
            { name: 'Different', op: Operator.NE },
            { name: 'Bigger', op: Operator.GT }, // added
            { name: 'Smaller', op: Operator.LT }, // added
            //{ name: 'Begins with', op: Operator.BW },
            //{ name: 'Ends with', op: Operator.EW },
            //{ name: 'Has', op: Operator.CT },
            //{ name: 'Hasn\'t', op: Operator.NC }
        ];
		filter.numberOperators = [
            { name: '(not set)', Operator: null },
            { name: 'Same', op: Operator.EQ },
            { name: 'Different', op: Operator.NE },
            { name: 'Bigger', op: Operator.GT },
            //{ name: 'Is Greater than or equal to', op: Operator.GE },
            { name: 'Smaller', op: Operator.LT },
            //{ name: 'Is Less than or equal to', op: Operator.LE }
        ];
    filter.dateOperators = [
            { name: '(not set)', op: null },
            { name: 'Same', op: Operator.EQ },
            { name: 'Earlier', op: Operator.LT },
            { name: 'Later', op: Operator.GT }
        ];
    filter.booleanOperators = [
            { name: '(not set)', op: null },
            { name: 'Is', op: Operator.EQ },
            { name: 'Isn\'t', op: Operator.NE }
        ];
	
	// Create FlexGrid
	var grid= new wijmo.grid.FlexGrid("#theGrid",{
		itemsSource:new wijmo.collections.CollectionView(getData(100))
	});
	var gridFilter= new wijmo.grid.filter.FlexGridFilter(grid);
}
// generate Random Data
function getData(count){
	var countries= "US,Japan,UK,China,India,Italy,Greece".split(","),
	data=[];
	for(var...