FieldFilterPicker
Widget for defining a CollectionFilter for use in filtering a Store.
Filters consist of property (the name of the data field whose values are checked), operator
(the type of comparison to use), and value (the pre-defined value against which to compare the
data field value during filtering).
//<code-header>
fiddle.title = 'Field filter picker';
//</code-header>
const
store = new Store({
fields : [
{ name : 'name', type : 'string', text : 'Name' },
{ name : 'type', type : 'string', text : 'Type' },
{ name : 'calories', type : 'number', text : 'Calories' }
],
data : [
{ id : 1, name : 'Cheese sticks', type : 'starters', calories : 312 },
{ id : 2, name : 'Fried onion rings', type : 'starters', calories : 234 },
{ id : 3, name : 'Hummus', type : 'starters', calories : 532 },
{ id : 4, name : 'Fried fish', type : 'food', calories : 243 },
{ id : 5, name : 'Pizza', type : 'food', calories : 687 },
{ id : 6, name : 'Hamburger', type : 'food', calories : 734 },
{ id : 7, name : 'Hot dog', type : 'food', calories : 435 },
{ id : 8, name : 'Salad', type : 'food', calories : 112 },
{ id : 9, name : 'Gin tonic', type : 'drinks', calories : 145 },
{ id : 10, name : 'Wine', type : 'drinks', calories : 150 },
{ id : 11, name : 'Soda', type : 'drinks', calories : 205 },
{ id : 12, name : 'Beer', type : 'drinks', calories : 109 }
]
}),
container = new Container({
appendTo : targetElement,
layout : 'hbox',
items : {
results : {
type : 'list',
store,
itemTpl : record => `${record.name} (${record.calories} calories)`,
width : '30%',
style : { marginRight : '1em' }
},
picker : {
type : 'fieldfilterpicker',
store,
fields : ArrayHelper.keyBy(store.fields, 'name'),
filter : {
property : 'calories',
operator : '<',
value : '400'
},
listeners : {
change : ({ filter, isValid }) => isValid && store.filter(filter)
}
}
}
});
store.filter(container.widgetMap.picker.filter);For example:
new FieldFilterPicker({
appendTo : domElement,
fields: {
// Allow filters to be defined against the 'age' and 'role' fields in our data
age : { title: 'Age', type: 'number' },
startDate : { title: 'Start Date', type: 'date' }
},
filter : {
property : 'startDate',
operator : '<',
value : new Date()
}
});
Configs
104
Configs
104Common
Other
The date format string used to display dates in value input fields. Defaults to the current locale's
FieldFilterPicker.dateFormat value.
Make the entire picker 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 : { title: 'Age', type: 'number' },
role : { title: 'Role', type: 'string' }
}
Configuration object for the CollectionFilter displayed and editable in this picker.
Example:
{
property: 'age',
operator: '=',
value: 25
}
Optional function that modifies the configuration of value fields shown for a filter. The default configuration is received as an argument and the returned value will be used as the final configuration. For example:
getValueFieldConfig : (filter, fieldConfig) => {
return {
...fieldConfig,
title : fieldName // Override the `title` config for the field
};
}
The supplied function should accept the following arguments:
| Parameter | Type | Description |
|---|---|---|
filter | CollectionFilter | The filter being displayed |
fieldConfig | ContainerItemConfig | Configuration object for the value field |
the resulting configuration
Make only the operator selector readOnly.
Overrides the built-in list of operators that are available for selection. Specify operators as an object with data types as keys and lists of operators as values, like this:
operators : {
string : [
{ value : 'empty', text : 'is empty', argCount : 0 },
{ value : 'notEmpty', text : 'is not empty', argCount : 0 }
],
number : [
{ value : '=', text : 'equals' },
{ value : '!=', text : 'does not equal' }
],
date : [
{ value : '<', text : 'is before' }
]
}
Here value is what will be stored in the operator field in the filter when selected, text is the text
displayed in the Combo for selection, and argCount is the number of arguments (comparison values) the
operator requires. The default argCount if not specified is 1.
Note: The operators config is a subset of valid operators described in CollectionCompareOperator. The use of any other operator apart from these is not supported and will lead to unexpected behavior.
Optional configuration for the property selector Combo.
Make only the property selector readOnly.
Make the entire picker read-only.
Optional {Core.data.Store} against which filters are being defined. This is used to supply options to filter against when using the 'is one of' and 'is not one of' operators.
Optional ValueFieldPlaceholders object specifying custom placeholder text for value input fields.
Make only the value input(s) readOnly.
CSS
DOM
Float & align
Layout
misc
Misc
Scrolling
Properties
81
Properties
81Class hierarchy
CSS
DOM
Layout
Misc
Other
Widget hierarchy
Functions
68
Functions
68Other
Return an array of unique values in the data store for the currently selected field. If no store is configured or no field is selected, returns an empty array.
Configuration
Events
Misc
Widget hierarchy
Events
17
Events
17Fires when the filter is modified.
// Adding a listener using the "on" method
fieldFilterPicker.on('change', ({ source, filter, isValid }) => {
});| Parameter | Type | Description |
|---|---|---|
source | FieldFilterPicker | The FieldFilterPicker instance that fired the event. |
filter | Array | The CollectionFilter configuration object for the filter represented by this FieldFilterPicker. |
isValid | Boolean | Whether the current configuration object represents a complete and valid filter |
Event handlers
17
Event handlers
17Called when the filter is modified.
new FieldFilterPicker({
onChange({ source, filter, isValid }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | FieldFilterPicker | The FieldFilterPicker instance that fired the event. |
filter | Array | The CollectionFilter configuration object for the filter represented by this FieldFilterPicker. |
isValid | Boolean | Whether the current configuration object represents a complete and valid filter |
Typedefs
8
Typedefs
8A field that is available for selection when defining filters.
| Parameter | Type | Description |
|---|---|---|
type | string | number | date | boolean | The data type of the values in this field in the data source |
title | String | The human-friendly display name for the field, as might be displayed in a data column header |
format | String | (Optional) Format string for formatting values shown in value fields. Applicable only for
|
A dictionary of value field placeholder strings, keyed by data type.
| Parameter | Type | Description |
|---|---|---|
string | String | Placeholder text for text value fields |
number | String | Placeholder text for number value fields |
date | String | Placeholder text for date value fields |
list | String | Placeholder text for multi-select list values, e.g. for the 'is one of' operator |