new GridFilter()
A generic filtering component that utilizes a property expression to extract all available options for a given
property.
If a property expression is not provided, a custom filterFunc and optionsFunc must be provided
Requires to be nested within a Grid component.
Examples
// Given the following object being searched:
{
name: 'John Doe',
nickname: 'JD',
counts: [1,2,3,4],
products: [{
name: 'Prod',
related: [{
relatedItemName: 'Some related item'
}]
}]
}
Property expression examples:
'i.relatedItemName in products.related' => would search everything in relatedItemName
'i.name in products' => would search everything in the name key in products
'i in counts' => would searching everything in the counts array
'nickname' => would search in nickname
If a property expression is not provided, a filterFunc and optionsFunc must be provided.
// Example HTML
<grid-filter property="name" header="Name" options="" opened="true"></grid-filter>
// Example of custom filterFunc
function myCustomFilterFunc(myObj, index, arr, selectedOptions){
selectedOptionValues.forEach(function(selectedOption){
if(myObj.someProperty === selectedOption.value){
return myObj;
}
return null;
});
}
// Example of custom optionsFunc
function myCustomOptionsFunc(dataset){
return [{
label: 'Option 1',
value: 'My val'
}];
}
Methods
(static) applyFilter()
Filter using current property or filterFunc to populate a list containing items relevant to current filter.
Then, we call the doFilter() on the parent gridController which will consolidate and merge all filtered
data from other filters.
(static) clear()
Clears filter and resets dataset
(static) loadOptions(source)
Loads an array of available options
Parameters:
Name | Type | Description |
---|---|---|
source |
array | Dataset from which to generate available options from. |
(static) optionsFunc(source) → {array}
Creates a set of options for a particular property to be filtered on. If an optionsFunc
is NOT passed in, utilizes the property expression passed into `property` to automatically
traverse the dataset for available options.
You can also override this method to add custom options.
Parameters:
Name | Type | Description |
---|---|---|
source |
array | The dataset to generate options from. |
Returns:
An array of options that can be selected to filter.
- Type
- array
Example
//Sample dataset to return if overriding
{
value: value,
label: label,
selected: boolean
}
(static) restoreState()
Checks if any relevant query params exist containing filter values to load and then
adds them. Non-primitive objects are stored in the query param as follows:
paramName=:(),:()
(static) saveState()
Stores all selected values to the grid state. Primitive values get stored as a comma-separated list
of strings. Non-primitive values (objects) get stored as a json string.
(static) selectOption()
Toggles the selection of an option and then executes filter.
(static) toggleCss()
Toggles the selected css class.
(static) wrapFilterFunc()
Wraps a custom filter func with some additonal pre-processing logic to ensure
that a filter without any selected options is returned. We also ensure to pass an additonal
parameter selectedOptionValues to the callers.
(inner) filterFunc(obj, index, arr, selectedOptionValues)
Executes a filter on the current data set.
If custom behavior is required, this method may be overriden by passing in
a function for this component.
Parameters:
Name | Type | Description |
---|---|---|
obj |
object | Current object in dataset being filtered |
index |
int | Index of current object |
arr |
array | Array containing entire dataset being filtered |
selectedOptionValues |
array | Array of options that have been selected by the user |
Returns:
whether an object was found within the selected options.
(inner) toggleExpand()
Toggles the opening and closing of filter options. If a filter was initially closed,
the options are then generated.