Vue FilterBuilder - fields
This property accepts an array of objects, each configuring a filter condition's appearance. Each condition consists of a data field, operation and value. A logical operation can combine conditions on the same level in a group.
See the Field section for details on fields you can specify in each object.
calculateFilterExpression
A user input value.
Contains an array if the selectedFilterOperation
is one of the following: "between", "anyof", "noneof".
The calculateFilterExpression function should return a filter expression. A basic filter expression has the following format:
- [selector, comparisonOperator, filterValue]
selector
A dataField to filter.comparisonOperator
One of the following operators: "=", "<>", ">", ">=", "<", "<=", "startswith", "endswith", "contains", "notcontains".filterValue
A user input value. Values from theselector
are compared to this value.
In the following code, the calculateFilterExpression function implements an exclusive "between" operation. The function overrides the default inclusive implementation. Note that for the "between" operation, the filter expression has a different format:
- [ [selector, ">=", startValue], "and", [selector, "<=", endValue] ]
- <template>
- <DxFilterBuilder>
- <DxField ...
- :calculate-filter-expression="calculateFilterExpression"
- />
- </DxFilterBuilder>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import DxFilterBuilder, {
- DxField
- } from 'devextreme-vue/filter-builder';
- export default {
- components: {
- DxFilterBuilder,
- DxField
- },
- data() {
- return {
- calculateFilterExpression (filterValue, selectedFilterOperation) {
- const field = this;
- // Override implementation for the "between" filter operation
- if (selectedFilterOperation === "between" && Array.isArray(filterValue)) {
- const filterExpression = [
- [field.dataField, ">", filterValue[0]],
- "and",
- [field.dataField, "<", filterValue[1]]
- ];
- return filterExpression;
- }
- // Invoke the default implementation for other filter operations
- return field.defaultCalculateFilterExpression.apply(field, arguments);
- }
- }
- }
- }
- </script>
this
keyword refers to the field's configuration.See Also
caption
If you do not specify this property, the FilterBuilder generates the caption based on the dataField property. For example, if dataField is "fullName", the caption is "Full Name".
editorOptions
Depending on the dataType, the FilterBuilder offers a user different UI components for editing: TextBox, DateBox, Lookup, etc. In the editorOptions object, you can specify properties for the UI component.
Because editorOptions depend on the dataType, they cannot be typed and are not implemented as nested configuration components. Specify editorOptions with an object. We recommend that you declare the object outside the configuration component to prevent possible issues caused by unnecessary re-rendering.
- <template>
- <DxFilterBuilder ... >
- <DxField ...
- :editor-options="fieldEditorOptions"
- />
- </DxFilterBuilder>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import DxFilterBuilder, {
- DxField
- } from 'devextreme-vue/filter-builder';
- export default {
- components: {
- DxFilterBuilder,
- DxField
- },
- data() {
- return {
- fieldEditorOptions: { format: 'currency', showClearButton: true }
- }
- }
- }
- </script>
Do not specify the onValueChanged property in this object. If you need to add custom logic to the default value change handler, override the handler in the onEditorPreparing function as follows:
- <template>
- <DxFilterBuilder ...
- @editor-preparing="overrideOnValueChanged">
- </DxFilterBuilder>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import DxFilterBuilder from 'devextreme-vue/filter-builder';
- export default {
- components: {
- DxFilterBuilder
- },
- // ...
- methods: {
- overrideOnValueChanged(e) {
- if (e.dataField === 'requiredDataField') {
- const defaultValueChangeHandler = e.editorOptions.onValueChanged;
- e.editorOptions.onValueChanged = function (args) { // Override the default handler
- // ...
- // Custom commands go here
- // ...
- // If you want to modify the editor value, call the setValue function:
- // e.setValue(newValue);
- // Otherwise, call the default handler:
- defaultValueChangeHandler(args);
- }
- }
- }
- }
- }
- </script>
filterOperations
The following table lists available filter operations by data type. The FilterBuilder uses the first operation in each array as the default operation for the specified data type.
dataType | filterOperations |
---|---|
"string" | [ "contains", "notcontains", "startswith", "endswith", "=", "<>", "isblank", "isnotblank" ] |
"numeric" | [ "=", "<>", "<", ">", "<=", ">=", "between", "isblank", "isnotblank" ] |
"date", "datetime" | [ "=", "<>", "<", ">", "<=", ">=", "between", "isblank", "isnotblank" ] |
"boolean" | [ "=", "<>", "isblank", "isnotblank" ] |
"object" | [ "isblank", "isnotblank" ] |
The "isblank" operation returns null values and empty strings; "isnotblank" returns other values.
format
See the format section for information on accepted values.
This property also controls the user input in cells that use the DateBox UI component for editing. For cells that use other UI components, you can specify the editorOptions.format property.
- <template>
- <DxFilterBuilder ... >
- <DxField
- data-field="SaleAmount"
- format="currency"
- :editor-options="saleAmountEditorOptions"
- />
- </DxFilterBuilder>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import DxFilterBuilder, {
- DxField
- } from 'devextreme-vue/filter-builder';
- export default {
- components: {
- DxFilterBuilder,
- DxField
- },
- data() {
- return {
- saleAmountEditorOptions: {
- format: "$ #,##0.##"
- }
- }
- }
- }
- </script>
See Also
name
Specifies the field's name. Use it to distinguish the field from other fields when they have identical dataField values.
If you have technical questions, please create a support ticket in the DevExpress Support Center.