WjFlexGridFilter Class
WjFlexGridFilter Class
Heirarchy
-
FlexGridFilter
- WjFlexGridFilter
Properties
Methods
Events
Properties
activeEditor
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.
defaultFilterType
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:
import { FlexGridFilter, FilterType } from '@mescius/wijmo.grid.filter';
let filter = new FlexGridFilter(flex);
filter.defaultFilterType = FilterType.Condition;
let col = flex.getColumn('ByValue'),
cf = filter.getColumnFilter(col);
cf.filterType = FilterType.Value;The default value for this property is FilterType.Both.
editingFilterNg
Angular (EventEmitter) version of the Wijmo editingFilter event for programmatic access. Use this event name if you want to subscribe to the Angular version of the event in code. In template bindings use the conventional editingFilter Wijmo event name.
exclusiveValueSearch
Gets or sets a value that determines whether the filter should include only values selected by the ValueFilter.filterText property.
The default value for this property is true, 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.
filterAppliedNg
Angular (EventEmitter) version of the Wijmo filterApplied event for programmatic access. Use this event name if you want to subscribe to the Angular version of the event in code. In template bindings use the conventional filterApplied Wijmo event name.
filterChangedNg
Angular (EventEmitter) version of the Wijmo filterChanged event for programmatic access. Use this event name if you want to subscribe to the Angular version of the event in code. In template bindings use the conventional filterChanged Wijmo event name.
filterChangingNg
Angular (EventEmitter) version of the Wijmo filterChanging event for programmatic access. Use this event name if you want to subscribe to the Angular version of the event in code. In template bindings use the conventional filterChanging Wijmo event name.
filterColumns
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.
filterDefinition
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.
grid
Gets a reference to the FlexGrid that owns this filter.
initialized
This event is triggered after the component has been initialized by Angular, that is all bound properties have been assigned and child components (if any) have been initialized.
isInitialized
Indicates whether the component has been initialized by Angular. Changes its value from false to true right before triggering the initialized event.
reApplyFilterOnUpdate
Gets or sets a value indicating whether to apply filter on the updated rows. If this property is set to true, then events such as row update, row insertion, sorting etc refreshes filter and rows which do not pass filter gets filtered out. If this property is set to false, then filter is not applied immediately and we need to click the apply button again to refresh filter. For complete excel behavior you also need to set the refreshOnEdit property CollectionView.refreshOnEdit of CollectionView to false
// For flexgrid
flexgrid.collectionView.refreshOnEdit = false;
// For flexsheet
flexSheet.itemsSourceChanged.addHandler((s, e) => {
if(s.collectionView){
s.collectionView.refreshOnEdit = false;
}
});The default value for this property is false.
showFilterIcons
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.
showSortButtons
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.
wjProperty
Gets or sets a name of a property that this component is assigned to. Default value is ''.
Methods
apply
-
Applies the current column filters to the grid.
Returns void
clear
-
Clears all column filters.
Returns void
closeEditor
-
Closes the filter editor.
Returns void
created
-
If you create a custom component inherited from a Wijmo component, you can override this method and perform necessary initializations that you usually do in a class constructor. This method is called in the last line of a Wijmo component constructor and allows you to not declare your custom component's constructor at all, thus preventing you from a necessity to maintain constructor parameters and keep them in synch with Wijmo component's constructor parameters.
Returns void
editColumnFilter
-
Shows the filter editor for the given grid column.
Parameters
-
col: any
The Column that contains the filter to edit.
-
Optional ht: HitTestInfo
A wijmo.grid.HitTestInfo object containing the range of the cell that triggered the filter display.
-
Optional ref: HTMLElement
An HTMLElement to use as a reference for positioning the editor.
Returns void
-
getColumnFilter
-
Gets the filter for the given column.
Parameters
-
col: Column | string | number
The Column that the filter applies to (or column name or index). If the specified column does not exist, the method returns null.
-
Optional create: boolean
Whether to create the filter if it does not exist.
Returns ColumnFilter
-
onEditingFilter
-
Raises the editingFilter event.
Parameters
-
e: CellRangeEventArgs
CellRangeEventArgs that contains the event data.
Returns boolean
True if the event was not canceled.
-
onExclusiveValueSearchChanged
-
Raises the exclusiveValueSearchChanged event.
Parameters
-
Optional e: EventArgs
Returns void
-
onFilterApplied
-
Raises the filterApplied event.
Parameters
-
Optional e: EventArgs
Returns void
-
onFilterChanged
-
Raises the filterChanged event.
Parameters
Returns void
onFilterChanging
-
Raises the filterChanging event.
Parameters
-
e: CellRangeEventArgs
CellRangeEventArgs that contains the event data.
Returns boolean
True if the event was not canceled.
-
Events
editingFilter
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.
This event fires before the filter editor is created, so the activeEditor property is null at this point. If you want to customize the editor, use the filterChanging event.
For example, the code below customizes the list of country names in the value filter editor so "Italy" is always the first value:
new FlexGridFilter(theGrid, {
editingFilter: (s, e) => {
if (e.getColumn().binding == 'country') {
// start with Italy
let vals = ["Italy"];
// append other unique values (except Italy)
let valueFilter = s.getColumnFilter("country", true).valueFilter;
valueFilter.uniqueValues = null;
valueFilter.getUniqueValues().forEach(item => {
if (item.text != "Italy") {
vals.push(item.text);
}
});
// assign custom unique value list to the valueFilter
valueFilter.uniqueValues = vals;
valueFilter.sortValues = false;
}
}
});exclusiveValueSearchChanged
Occurs after the exclusiveValueSearch is changed.
filterApplied
Occurs after the filter is applied.
filterChanged
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.
filterChanging
Occurs when a column filter is about to be edited by the user.
Use this event to customize the filter editor if you want to override its default settings. You can use the activeEditor property to get a reference to the currently active filter editor.
For example, the code below applies a custom sort to the list of country names in the value filter editor so "Italy" is always the first value:
new FlexGridFilter(theGrid, {
filterChanging: (s, e) => {
if (e.getColumn().binding == "country") {
let edt = s.activeEditor,
lbHost = edt.hostElement.querySelector('[wj-part=div-values]'),
lb = Control.getControl(lbHost) as ListBox;
(lb.collectionView as CollectionView).sortComparer = (a: any, b: any) => {
if (a != b) { // sort Italy first
if (a == 'Italy') return -1;
if (b == 'Italy') return +1;
}
return null; // use default sort order
}
lb.collectionView.refresh();
}
},
});
Angular 2 component for the wijmo.grid.filter.FlexGridFilter class.
The wj-flex-grid-filter component must be contained in a wijmo.angular2.grid.WjFlexGrid component.
Use the wj-flex-grid-filter component to add FlexGridFilter controls to your Angular 2 applications. For details about Angular 2 markup syntax, see Angular 2 Markup.
The WjFlexGridFilter component is derived from the FlexGridFilter class and inherits all its properties, events and methods.