FieldFilterPickerGroup
A set of FieldFilterPickers, representing an array of CollectionFilters. The filters are provided to the picker as an array of filter configuration objects.
//<code-header>
fiddle.title = 'Field filter picker group';
//</code-header>
const
store = new Store({
fields : [
{ name : 'name', type : 'string' },
{ name : 'type', type : 'string' },
{ name : 'calories', type : 'number' },
{ name : 'icon', type : 'string' }
],
data : [
{ id : 1, name : 'Cheese sticks', type : 'starters', calories : 312, icon : 'cheese' },
{ id : 2, name : 'Fried onion rings', type : 'starters', calories : 234, icon : 'ring' },
{ id : 3, name : 'Hummus', type : 'starters', calories : 532, icon : 'seedling' },
{ id : 4, name : 'Fried fish', type : 'food', calories : 243, icon : 'fish' },
{ id : 5, name : 'Pizza', type : 'food', calories : 687, icon : 'pizza-slice' },
{ id : 6, name : 'Hamburger', type : 'food', calories : 734, icon : 'hamburger' },
{ id : 7, name : 'Hot dog', type : 'food', calories : 435, icon : 'hotdog' },
{ id : 8, name : 'Salad', type : 'food', calories : 112, icon : 'salad' },
{ id : 9, name : 'Gin tonic', type : 'drinks', calories : 145, icon : 'glass-martini' },
{ id : 10, name : 'Wine', type : 'drinks', calories : 150, icon : 'glass-wine' },
{ id : 11, name : 'Soda', type : 'drinks', calories : 205, icon : 'glass-citrus' },
{ id : 12, name : 'Beer', type : 'drinks', calories : 109, icon : 'beer' }
]
}),
container = new Container({
appendTo : targetElement,
layout : 'hbox',
items : {
results : {
type : 'list',
store,
itemTpl : record => `${record.name} (${record.calories} calories)`,
width : '30%',
style : { marginRight : '1em' }
},
filters : {
type : 'container',
margin : '0 0 0 1em',
flex : 1,
items : {
pickergroup : {
type : 'fieldfilterpickergroup',
store,
fields : ArrayHelper.keyBy(store.fields, 'name'),
filters : [{
property : 'name',
operator : 'includes',
value : 'fried',
caseSensitive : false
}]
}
}
}
}
});When store is provided in the configuration, the picker group will read filters from the store and monitor for filter changes, and reflect any changes. It is possible to synchronize multiple FieldFilterPickerGroups by configuring them with the same store.
Does not support modifying filters defined as custom functions.
Configs
105
Configs
105Common
Other
Sets the text displayed in the 'add filter' button if one is present.
Optional array of field names that are allowed as selectable properties for filters. This should be a subset of the field names found in the store. When supplied, only the named fields will be shown in the property selector combo.
Optional predicate that returns whether a given filter can be deleted. When canDeleteFilter is provided,
it will be called for each filter and will not show the delete button for those for which the
function returns false.
| Parameter | Type | Description |
|---|---|---|
filter | * | filter for checking |
truthy value if filter can be deleted
Optional predicate that returns whether a given filter can be managed by this widget. When canManageFilter
is provided, it will be used to decide whether to display filters found in the configured
store.
| Parameter | Type | Description |
|---|---|---|
filter | * | filter for checking |
truthy value if filter can be managed
The date format string used to display dates when using the 'is one of' / 'is not one of' operators with a date
field. Defaults to the current locale's FieldFilterPicker.dateFormat value.
Whether the picker group is disabled.
Dictionary of FieldOption representing the fields against which filters can be defined, keyed by field name.
If filtering a Grid, consider using GridFieldFilterPicker, which can be configured with an existing Grid instead of, or in combination with, defining fields manually.
Example:
fields: {
// Allow filters to be defined against the 'age' and 'role' fields in our data
age : { text: 'Age', type: 'number' },
role : { text: 'Role', type: 'string' }
}
Array of CollectionFilter configuration objects. One FieldFilterPicker will be created for each object in the array.
When store is provided, any filters in the store will be automatically added and do not need to be provided explicitly.
Example:
filters: [{
// Filter properties should exist among field names configured
// via `fields` or `store`
property: 'age',
operator: '<',
value: 30
},{
property: 'title',
operator: 'startsWith',
value: 'Director'
}]
Optional function that returns FieldFilterPicker configuration properties for
a given filter. When getFieldFilterPickerConfig is provided, it will be called for each filter and the returned
object will be merged with the configuration properties for the individual
FieldFilterPicker representing that filter.
The supplied function should accept a single argument, the CollectionFilter whose picker is being created.
| Parameter | Type | Description |
|---|---|---|
filter | CollectionFilterConfig | The filter to be displayed in the FieldFilterPicker being configured |
When limitToProperty is set to the name of an available field (as specified either
explicitly in fields or implicitly in the
store's model), it has the following effects:
- the picker group will only show filters defined on the specified property
- it will automatically set the
propertyto the specified property for all newly added filters where the property is not already set - the property selector is made read-only
Whether the picker group is read-only.
Example: fields: [ { name: 'age', type: 'number' }, { name: 'title', type: 'string' } ]
Show a button at the bottom of the group that adds a new, blank filter to the group.
The Store whose records will be filtered. The store's modelClass will be used to determine field types.
This store will be kept in sync with the filters defined in the picker group, and new filters added to the store via other means will appear in this filter group when they are able to be modified by it. (Some types of filters, like arbitrary filter functions, cannot be managed through this widget.)
As a corollary, multiple FieldFilterPickerGroups configured with the same store will stay in sync, showing the
same filters as the store's filters change.
CSS
DOM
Float & align
Layout
misc
Misc
Scrolling
Properties
82
Properties
82Class hierarchy
Other
Returns the array of filter configuration objects currently represented by this picker group.
CSS
DOM
Layout
Misc
Widget hierarchy
Functions
73
Functions
73Other
Sets all current filters to enabled and checks their checkboxes.
Appends a filter at the bottom of the list.
| Parameter | Type | Description |
|---|---|---|
filter | CollectionFilterConfig | Configuration object for the CollectionFilter to add. Defaults to an empty filter. |
Sets all current filters to disabled and clears their checkboxes.
Return the FieldFilterPicker for the filter at the specified index.
| Parameter | Type | Description |
|---|---|---|
filterIndex | Number |
Get the configuration object for one child FieldFilterPicker.
| Parameter | Type | Description |
|---|---|---|
filter | CollectionFilter | The filter represented by the child FieldFilterPicker |
The FieldFilterPicker configuration
Remove the filter at the given index.
| Parameter | Type | Description |
|---|---|---|
filterIndex | Number | The index of the filter to remove |
Configuration
Events
Misc
Widget hierarchy
Events
18
Events
18Fires before a new filter is added to the picker group (and its store, if configured and the filter is valid).
Return false from the event handler to prevent the filter being added.
// Adding a listener using the "on" method
fieldFilterPickerGroup.on('beforeAddFilter', ({ source, filter }) => {
});| Parameter | Type | Description |
|---|---|---|
source | FieldFilterPicker | The FieldFilterPicker instance that fired the event. |
filter | CollectionFilterConfig | The CollectionFilter configuration object for the filter represented by this FieldFilterPicker. |
Fires when any filter in the group is added, removed, or modified.
// Adding a listener using the "on" method
fieldFilterPickerGroup.on('change', ({ source, filters, validFilters }) => {
});| Parameter | Type | Description |
|---|---|---|
source | FieldFilterPickerGroup | The FieldFilterPickerGroup instance that fired the event. |
filters | CollectionFilterConfig[] | The array of CollectionFilter configuration
objects currently represented by the FieldFilterPickerGroup. IMPORTANT: Note that this includes all filters
currently present in the UI, including partially completed ones that may not be ready to apply to a Store.
To retrieve only valid filters, use the |
validFilters | CollectionFilterConfig[] | The subset of CollectionFilter configuration
objects in the |
Event handlers
18
Event handlers
18Called before a new filter is added to the picker group (and its store, if configured and the filter is valid).
Return false from the event handler to prevent the filter being added.
new FieldFilterPickerGroup({
onBeforeAddFilter({ source, filter }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | FieldFilterPicker | The FieldFilterPicker instance that fired the event. |
filter | CollectionFilterConfig | The CollectionFilter configuration object for the filter represented by this FieldFilterPicker. |
Called when any filter in the group is added, removed, or modified.
new FieldFilterPickerGroup({
onChange({ source, filters, validFilters }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | FieldFilterPickerGroup | The FieldFilterPickerGroup instance that fired the event. |
filters | CollectionFilterConfig[] | The array of CollectionFilter configuration
objects currently represented by the FieldFilterPickerGroup. IMPORTANT: Note that this includes all filters
currently present in the UI, including partially completed ones that may not be ready to apply to a Store.
To retrieve only valid filters, use the |
validFilters | CollectionFilterConfig[] | The subset of CollectionFilter configuration
objects in the |
Typedefs
6
Typedefs
6CSS variables
32
CSS variables
32| Name | Description |
|---|---|
--b-field-filter-picker-group-gap | Gap between field filter picker rows |