<div class="header-panel member">
<h2><span class="identifier">FlexGridFilter</span> Class</h2>
<dl class="dl-horizontal">
<dt>File</dt><dd class="filename">wijmo.grid.filter.js</dd>
<dt>Module</dt><dd><a href="topic/wijmo.grid.filter.Module.html"><span class="identifier">wijmo.grid.filter</span></a></dd>
<dt>Derived Classes</dt><dd><a href="topic/wijmo.grid.sheet.FlexSheetFilter.Class.html"><span class="identifier">FlexSheetFilter</span></a>, <a href="topic/wijmo-wijmo.angular2.grid.filter.WjFlexGridFilter.Class.html"><span class="identifier">WjFlexGridFilter</span></a></dd>
</dl>
<div class="comment"><p>Implements an Excel-style filter for <a href="topic/wijmo.grid.FlexGrid.Class.html"><span class="identifier">FlexGrid</span></a> controls.</p>
<p>To enable filtering on a <a href="topic/wijmo.grid.FlexGrid.Class.html"><span class="identifier">FlexGrid</span></a> control, create an instance 
of the <a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html"><span class="identifier">FlexGridFilter</span></a> and pass the grid as a parameter to the 
constructor. For example:</p>


<pre>// create FlexGrid
var flex = new wijmo.grid.FlexGrid('#gridElement');

// enable filtering on the FlexGrid
var filter = new wijmo.grid.filter.FlexGridFilter(flex);</pre>
<p>Once this is done, a filter icon is added to the grid's column headers. 
Clicking the icon shows an editor where the user can edit the filter
conditions for that column.</p>
<p>The <a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html"><span class="identifier">FlexGridFilter</span></a> class depends on the <b>wijmo.grid</b> and 
<b>wijmo.input</b> modules.</p></div>
</div>
<div class="member-panel class members" ng-class="{ 'show-inherited' : ctx.showInherited, 'show-raisers' : ctx.showRaisers }">
<h3 class="node">Constructor</h3>
<ul>
<li class="mmethod"><a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html/#constructor">constructor</a></li>
</ul>
<h3 class="node">Properties</h3>
<ul>
<li class="mproperty"><a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html/#activeEditor">activeEditor</a></li>
<li class="mproperty"><a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html/#defaultFilterType">defaultFilterType</a></li>
<li class="mproperty"><a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html/#filterColumns">filterColumns</a></li>
<li class="mproperty"><a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html/#filterDefinition">filterDefinition</a></li>
<li class="mproperty"><a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html/#grid">grid</a></li>
<li class="mproperty"><a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html/#showFilterIcons">showFilterIcons</a></li>
<li class="mproperty"><a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html/#showSortButtons">showSortButtons</a></li>
</ul>
<h3 class="node">Methods</h3>
<ul>
<li class="mmethod"><a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html/#apply">apply</a></li>
<li class="mmethod"><a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html/#clear">clear</a></li>
<li class="mmethod"><a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html/#closeEditor">closeEditor</a></li>
<li class="mmethod"><a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html/#editColumnFilter">editColumnFilter</a></li>
<li class="mmethod"><a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html/#getColumnFilter">getColumnFilter</a></li>
<li class="mmethod raiser"><a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html/#onFilterApplied">onFilterApplied</a></li>
<li class="mmethod raiser"><a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html/#onFilterChanged">onFilterChanged</a></li>
<li class="mmethod raiser"><a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html/#onFilterChanging">onFilterChanging</a></li>
</ul>
<h3 class="node">Events</h3>
<ul>
<li class="mevent"><a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html/#filterApplied">filterApplied</a></li>
<li class="mevent"><a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html/#filterChanged">filterChanged</a></li>
<li class="mevent"><a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html/#filterChanging">filterChanging</a></li>
</ul>
</div>
<h3>Constructor</h3>
<div id="constructor" class="member-panel mmethod">
<h3>constructor</h3>
<pre>constructor(grid: <a href="topic/wijmo.grid.FlexGrid.Class.html"><span class="identifier">FlexGrid</span></a>, options?: <span class="identifier">any</span>): <a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html"><span class="identifier">FlexGridFilter</span></a></pre>
<div class="comment"><p>Initializes a new instance of the <a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html"><span class="identifier">FlexGridFilter</span></a> class.</p></div>
<dl class="dl-horizontal">
  <dt>Parameters</dt><dd></dd>
</dl>
<ul>
<li><b>grid</b>: <a href="topic/wijmo.grid.FlexGrid.Class.html"><span class="identifier">FlexGrid</span></a><br/><p>The <a href="topic/wijmo.grid.FlexGrid.Class.html"><span class="identifier">FlexGrid</span></a> to filter.</p></li><li><b>options</b>: <span class="identifier">any</span> <span class="badge">Optional</span><br/><p>Initialization options for the <a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html"><span class="identifier">FlexGridFilter</span></a>.</p></li></ul>
<dl class="dl-horizontal">
  <dt>Returns</dt><dd><a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html"><span class="identifier">FlexGridFilter</span></a></dd>
</dl>
</div>
<h3 class="node">Properties</h3>
<div class="member-list" ng-class="{ 'show-inherited' : ctx.showInherited, 'show-raisers' : ctx.showRaisers }">
<div id="activeEditor" class="member-panel mproperty">
<h3>activeEditor</h3>
<div class="comment"><p>Gets the active <a href="topic/wijmo.grid.filter.ColumnFilterEditor.Class.html"><span class="identifier">ColumnFilterEditor</span></a>.</p>
<p>This property allows you to customize the filter editor when 
handling the <a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html/#filterChanging"><span class="identifier">filterChanging</span></a> event.
It returns null when no filters are being edited.</p></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><a href="topic/wijmo.grid.filter.ColumnFilterEditor.Class.html"><span class="identifier">ColumnFilterEditor</span></a></dd>
</dl>
</div>
<div id="defaultFilterType" class="member-panel mproperty">
<h3>defaultFilterType</h3>
<div class="comment"><p>Gets or sets the default filter type to use.</p>
<p>This value can be overridden in filters for specific columns.
For example, the code below creates a filter that filters by
conditions on all columns except the "ByValue" column:</p>


<pre>var f = new wijmo.grid.filter.FlexGridFilter(flex);
f.defaultFilterType = wijmo.grid.filter.FilterType.Condition;
var col = flex.columns.getColumn('ByValue'),
    cf = f.getColumnFilter(col);
cf.filterType = wijmo.grid.filter.FilterType.Value;</pre></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><a href="topic/wijmo.grid.filter.FilterType.Enum.html"><span class="identifier">FilterType</span></a></dd>
</dl>
</div>
<div id="filterColumns" class="member-panel mproperty">
<h3>filterColumns</h3>
<div class="comment"><p>Gets or sets an array containing the names or bindings of the columns
that have filters.</p>
<p>Setting this property to null or to an empty array adds filters to 
all columns.</p></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank"><span class="identifier">string</span></a>[]</dd>
</dl>
</div>
<div id="filterDefinition" class="member-panel mproperty">
<h3>filterDefinition</h3>
<div class="comment"><p>Gets or sets the current filter definition as a JSON string.</p></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank"><span class="identifier">string</span></a></dd>
</dl>
</div>
<div id="grid" class="member-panel mproperty">
<h3>grid</h3>
<div class="comment"><p>Gets a reference to the <a href="topic/wijmo.grid.FlexGrid.Class.html"><span class="identifier">FlexGrid</span></a> that owns this filter.</p></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><a href="topic/wijmo.grid.FlexGrid.Class.html"><span class="identifier">FlexGrid</span></a></dd>
</dl>
</div>
<div id="showFilterIcons" class="member-panel mproperty">
<h3>showFilterIcons</h3>
<div class="comment"><p>Gets or sets a value indicating whether the <a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html"><span class="identifier">FlexGridFilter</span></a> adds filter
editing buttons to the grid's column headers.</p>
<p>If you set this property to false, then you are responsible for providing
a way for users to edit, clear, and apply the filters.</p></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank"><span class="identifier">boolean</span></a></dd>
</dl>
</div>
<div id="showSortButtons" class="member-panel mproperty">
<h3>showSortButtons</h3>
<div class="comment"><p>Gets or sets a value indicating whether the filter editor should include
sort buttons.</p>
<p>By default, the editor shows sort buttons like Excel does. But since users
can sort columns by clicking their headers, sort buttons in the filter editor
may not be desirable in some circumstances.</p></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank"><span class="identifier">boolean</span></a></dd>
</dl>
</div>
</div>
<h3 class="node">Methods</h3>
<div class="member-list" ng-class="{ 'show-inherited' : ctx.showInherited, 'show-raisers' : ctx.showRaisers }">
<div id="apply" class="member-panel mmethod">
<h3>apply</h3>
<pre>apply(): <span class="identifier">void</span></pre>
<div class="comment"><p>Applies the current column filters to the grid.</p></div>
<dl class="dl-horizontal">
  <dt>Returns</dt><dd><span class="identifier">void</span></dd>
</dl>
</div>
<div id="clear" class="member-panel mmethod">
<h3>clear</h3>
<pre>clear(): <span class="identifier">void</span></pre>
<div class="comment"><p>Clears all column filters.</p></div>
<dl class="dl-horizontal">
  <dt>Returns</dt><dd><span class="identifier">void</span></dd>
</dl>
</div>
<div id="closeEditor" class="member-panel mmethod">
<h3>closeEditor</h3>
<pre>closeEditor(): <span class="identifier">void</span></pre>
<div class="comment"><p>Closes the filter editor.</p></div>
<dl class="dl-horizontal">
  <dt>Returns</dt><dd><span class="identifier">void</span></dd>
</dl>
</div>
<div id="editColumnFilter" class="member-panel mmethod">
<h3>editColumnFilter</h3>
<pre>editColumnFilter(col: <span class="identifier">any</span>, ht?: <a href="topic/wijmo.grid.HitTestInfo.Class.html"><span class="identifier">HitTestInfo</span></a>): <span class="identifier">void</span></pre>
<div class="comment"><p>Shows the filter editor for the given grid column.</p></div>
<dl class="dl-horizontal">
  <dt>Parameters</dt><dd></dd>
</dl>
<ul>
<li><b>col</b>: <span class="identifier">any</span><br/><p>The <a href="topic/wijmo.grid.Column.Class.html"><span class="identifier">Column</span></a> that contains the filter to edit.</p></li><li><b>ht</b>: <a href="topic/wijmo.grid.HitTestInfo.Class.html"><span class="identifier">HitTestInfo</span></a> <span class="badge">Optional</span><br/><p>A <a href="topic/wijmo.grid.HitTestInfo.Class.html"><span class="identifier">HitTestInfo</span></a> object containing the range of the cell
that triggered the filter display.</p></li></ul>
<dl class="dl-horizontal">
  <dt>Returns</dt><dd><span class="identifier">void</span></dd>
</dl>
</div>
<div id="getColumnFilter" class="member-panel mmethod">
<h3>getColumnFilter</h3>
<pre>getColumnFilter(col: <span class="identifier">any</span>, create?: <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank"><span class="identifier">boolean</span></a>): <a href="topic/wijmo.grid.filter.ColumnFilter.Class.html"><span class="identifier">ColumnFilter</span></a></pre>
<div class="comment"><p>Gets the filter for the given column.</p></div>
<dl class="dl-horizontal">
  <dt>Parameters</dt><dd></dd>
</dl>
<ul>
<li><b>col</b>: <span class="identifier">any</span><br/><p>The <a href="topic/wijmo.grid.Column.Class.html"><span class="identifier">Column</span></a> that the filter applies to (or column name or index).</p></li><li><b>create</b>: <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank"><span class="identifier">boolean</span></a> <span class="badge">Optional</span><br/><p>Whether to create the filter if it does not exist.</p></li></ul>
<dl class="dl-horizontal">
  <dt>Returns</dt><dd><a href="topic/wijmo.grid.filter.ColumnFilter.Class.html"><span class="identifier">ColumnFilter</span></a></dd>
</dl>
</div>
<div id="onFilterApplied" class="member-panel mmethod raiser">
<h3>onFilterApplied</h3>
<pre>onFilterApplied(e?: <a href="topic/wijmo.EventArgs.Class.html"><span class="identifier">EventArgs</span></a>): <span class="identifier">void</span></pre>
<div class="comment"><p>Raises the <a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html/#filterApplied"><span class="identifier">filterApplied</span></a> event.</p></div>
<dl class="dl-horizontal">
  <dt>Parameters</dt><dd></dd>
</dl>
<ul>
<li><b>e</b>: <a href="topic/wijmo.EventArgs.Class.html"><span class="identifier">EventArgs</span></a> <span class="badge">Optional</span><br/></li></ul>
<dl class="dl-horizontal">
  <dt>Returns</dt><dd><span class="identifier">void</span></dd>
</dl>
</div>
<div id="onFilterChanged" class="member-panel mmethod raiser">
<h3>onFilterChanged</h3>
<pre>onFilterChanged(e: <a href="topic/wijmo.grid.CellRangeEventArgs.Class.html"><span class="identifier">CellRangeEventArgs</span></a>): <span class="identifier">void</span></pre>
<div class="comment"><p>Raises the <a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html/#filterChanged"><span class="identifier">filterChanged</span></a> event.</p></div>
<dl class="dl-horizontal">
  <dt>Parameters</dt><dd></dd>
</dl>
<ul>
<li><b>e</b>: <a href="topic/wijmo.grid.CellRangeEventArgs.Class.html"><span class="identifier">CellRangeEventArgs</span></a><br/></li></ul>
<dl class="dl-horizontal">
  <dt>Returns</dt><dd><span class="identifier">void</span></dd>
</dl>
</div>
<div id="onFilterChanging" class="member-panel mmethod raiser">
<h3>onFilterChanging</h3>
<pre>onFilterChanging(e: <a href="topic/wijmo.grid.CellRangeEventArgs.Class.html"><span class="identifier">CellRangeEventArgs</span></a>): <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank"><span class="identifier">boolean</span></a></pre>
<div class="comment"><p>Raises the <a href="topic/wijmo.grid.filter.FlexGridFilter.Class.html/#filterChanging"><span class="identifier">filterChanging</span></a> event.</p></div>
<dl class="dl-horizontal">
  <dt>Parameters</dt><dd></dd>
</dl>
<ul>
<li><b>e</b>: <a href="topic/wijmo.grid.CellRangeEventArgs.Class.html"><span class="identifier">CellRangeEventArgs</span></a><br/><p><a href="topic/wijmo.grid.CellRangeEventArgs.Class.html"><span class="identifier">CellRangeEventArgs</span></a> that contains the event data.</p></li></ul>
<dl class="dl-horizontal">
  <dt>Returns</dt><dd><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank"><span class="identifier">boolean</span></a></dd>
</dl>
</div>
</div>
<h3 class="node">Events</h3>
<div class="member-list" ng-class="{ 'show-inherited' : ctx.showInherited, 'show-raisers' : ctx.showRaisers }">
<div id="filterApplied" class="member-panel mevent">
<h3>filterApplied</h3>
<div class="comment"><p>Occurs after the filter is applied.</p></div>
<dl class="dl-horizontal">
  <dt>Arguments</dt><dd><a href="topic/wijmo.EventArgs.Class.html"><span class="identifier">EventArgs</span></a></dd>
</dl>
</div>
<div id="filterChanged" class="member-panel mevent">
<h3>filterChanged</h3>
<div class="comment"><p>Occurs after a column filter has been edited by the user.</p>
<p>Use the event parameters to determine the column that owns
the filter and whether changes were applied or canceled.</p></div>
<dl class="dl-horizontal">
  <dt>Arguments</dt><dd><a href="topic/wijmo.grid.CellRangeEventArgs.Class.html"><span class="identifier">CellRangeEventArgs</span></a></dd>
</dl>
</div>
<div id="filterChanging" class="member-panel mevent">
<h3>filterChanging</h3>
<div class="comment"><p>Occurs when a column filter is about to be edited by the user.</p>
<p>Use this event to customize the column filter if you want to 
override the default settings for the filter.</p>
<p>For example, the code below sets the operator used by the filter 
conditions to 'contains' if they are null:</p>


<pre>filter.filterChanging.addHandler(function (s, e) {
  var cf = filter.getColumnFilter(e.col);
  if (!cf.valueFilter.isActive && cf.conditionFilter.condition1.operator == null) {
    cf.filterType = wijmo.grid.filter.FilterType.Condition;
    cf.conditionFilter.condition1.operator = wijmo.grid.filter.Operator.CT;
  }
});</pre></div>
<dl class="dl-horizontal">
  <dt>Arguments</dt><dd><a href="topic/wijmo.grid.CellRangeEventArgs.Class.html"><span class="identifier">CellRangeEventArgs</span></a></dd>
</dl>
</div>
</div>
