Implements an Excel-style filter for FlexGrid controls.
To enable filtering on a FlexGrid control, create an instance of the FlexGridFilter and pass the grid as a parameter to the constructor. For example:
// create FlexGrid
var flex = new wijmo.grid.FlexGrid('#gridElement');
// enable filtering on the FlexGrid
var filter = new wijmo.grid.filter.FlexGridFilter(flex);
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.
The FlexGridFilter class depends on the wijmo.grid and wijmo.input modules.
The example below shows how you can use a FlexGridFilter to add filtering to a FlexGrid control:
{@sample Grid/FilteringSearching/Excel-likeFilter/Overview/purejs Example}
constructor(grid: FlexGrid, options?: any): FlexGridFilter
Initializes a new instance of the FlexGridFilter class.
Initialization options for the FlexGridFilter.
Gets the active ColumnFilterEditor.
This property allows you to customize the filter editor when handling the filterChanging event. It returns null when no filters are being edited.
Gets or sets the default filter type to use.
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:
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;
The default value for this property is FilterType.Both.
Gets or sets a value that determines whether the filter should include only values selected by the filterText property.
This property is set to true by default, which matches Excel's behavior.
Set it to false to disable this behavior, so searching only affects which items are displayed on the list and not which items are included in the filter.
Gets or sets an array containing the names or bindings of the columns that have filters.
Setting this property to null or to an empty array adds filters to all columns.
Gets or sets the current filter definition as a JSON string.
The filterDefinition includes information about all currently active column filters. It does not include data maps because data maps are not serializable.
Gets or sets a value indicating whether the FlexGridFilter adds filter editing buttons to the grid's column headers.
If you set this property to false, then you are responsible for providing a way for users to edit, clear, and apply the filters.
The default value for this property is true.
Gets or sets a value indicating whether the filter editor should include sort buttons.
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.
The default value for this property is true.
apply(): void
Applies the current column filters to the grid.
clear(): void
Clears all column filters.
closeEditor(): void
Closes the filter editor.
editColumnFilter(col: any, ht?: HitTestInfo, refElem?: HTMLElement): void
Shows the filter editor for the given grid column.
The Column that contains the filter to edit.
A HitTestInfo object containing the range of the cell that triggered the filter display.
An HTMLElement to use as a reference for positioning the editor.
getColumnFilter(col: any, create?: boolean): ColumnFilter
Gets the filter for the given column.
The Column that the filter applies to (or column name or index).
Whether to create the filter if it does not exist.
onFilterApplied(e?: EventArgs): void
Raises the filterApplied event.
onFilterChanged(e: CellRangeEventArgs): void
Raises the filterChanged event.
onFilterChanging(e: CellRangeEventArgs): boolean
Raises the filterChanging event.
CellRangeEventArgs that contains the event data.
Occurs after a column filter has been edited by the user.
Use the event parameters to determine the column that owns the filter and whether changes were applied or canceled.
Occurs when a column filter is about to be edited by the user.
Use this event to customize the column filter if you want to override the default settings for the filter.
For example, the code below sets the operator used by the filter conditions to 'contains' if they are null:
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;
}
});