Vue FilterBuilder Field

The FilterBuilder's field structure.

Type:

Object

View Demo

caption

Specifies the data field's caption.

Type:

String

Default Value: undefined

If you do not specify this option, the FilterBuilder generates the caption based on the dataField option. For example, if dataField is "fullName", the caption is "Full Name".

customizeText

Customizes the input value's display text.

Type:

Function

Function parameters:
fieldInfo:

Object

The field's data.

Object structure:
Name Type Description
value

String

|

Number

|

Date

The unformatted value (as specified using the editor or in the lookup's data source).
valueText

String

The value with the format applied.
Return Value:

String

The input value's text.

NOTE
The this keyword refers to the field's configuration.

dataField

Specifies the name of a field to be filtered.

Type:

String

Default Value: undefined

dataType

Casts field values to a specific data type.

Type:

String

Default Value: 'string'
Accepted Values: 'string' | 'number' | 'date' | 'boolean' | 'object' | 'datetime'

When using the widget as an ASP.NET MVC Control, specify this option using the FilterBuilderFieldDataType enum. This enum accepts the following values: String, Number, Date, DateTime, Boolean and Object.

editorOptions

Configures the widget used to edit the field value.

Type:

Object

Depending on the dataType, the FilterBuilder offers a user different widgets for editing: TextBox, DateBox, Lookup, etc. In the editorOptions object, you can specify options for the widget.

NOTE

Do not specify the onValueChanged option in this object. If you need to add custom logic to the standard value change handler, override the handler in the onEditorPreparing function in the following manner.

jQuery
JavaScript
$(function() {
    $("#filterBuilderContainer").dxFilterBuilder({
        // ...
        onEditorPreparing: function(e) {
            if (e.dataField == "requiredDataField") {
                var standardHandler = e.editorOptions.onValueChanged;
                e.editorOptions.onValueChanged = function(e) { // Overriding the standard handler
                    // ...
                    // Custom commands go here
                    // ...
                    standardHandler(e); // Calling the standard handler to save the edited value
                }
            }
        }
    });
});
Angular
TypeScript
HTML
import { DxFilterBuilderModule } from 'devextreme-angular';
// ...
export class AppComponent {
    onEditorPreparing (e) {
        if (e.dataField == "requiredDataField") {
            let standardHandler = e.editorOptions.onValueChanged;
            e.editorOptions.onValueChanged = function (e) { // Overriding the standard handler
                // ...
                // Custom commands go here
                // ...
                standardHandler(e); // Calling the standard handler to save the edited value
            }
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxFilterBuilderModule
    ],
    // ...
})
<dx-filter-builder ... 
    (onEditorPreparing)="onEditorPreparing($event)">
</dx-filter-builder>

editorTemplate

Specifies the editor's custom template.

Type:

template

Template Data:
Name Type Description
value

String

|

Number

|

Date

The condition's data field value.
filterOperation

String

The condition's operation.
field

FilterBuilder Field

The condition's configuration.
setValue

Function

A method that you should call to change the field value after the editor's value is changed.
See Also

falseText

Specifies the false value text. Applies only if dataType is "boolean".

Type:

String

Default Value: 'false'

filterOperations

Specifies a set of available filter operations.

Type:

Array<String>

Default Value: undefined
Accepted Values: '=' | '<>' | '<' | '<=' | '>' | '>=' | 'notcontains' | 'contains' | 'startswith' | 'endswith' | 'isblank' | 'isnotblank'

The following table lists default operations by data type:

dataType filterOperations
"string" [ "contains", "notcontains", "startswith", "endswith", "=", "<>", "isblank", "isnotblank" ]
"numeric" [ "=", "<>", "<", ">", "<=", ">=", "isblank", "isnotblank" ]
"date", "datetime" [ "=", "<>", "<", ">", "<=", ">=", "isblank", "isnotblank" ]
"boolean" [ "=", "<>", "isblank", "isnotblank" ]
"object" [ "isblank", "isnotblank" ]

The "isblank" operation returns null values only; "isnotblank" - non-null values.

NOTE
Lookup's default operations are [ "=", "<>", "isblank", "isnotblank" ] regardless of the data type.

When using the widget as an ASP.NET MVC Control, specify this option using the FilterBuilderFieldFilterOperations enum. This enum accepts the following values: Equal, NotEqual, LessThan, LessThanOrEqual, GreaterThan, GreaterThanOrEqual, NotContains, Contains, StartsWith, EndsWith, IsBlank and IsNotBlank.

format

Formats a value before it is displayed.

Type:

Format

Default Value: ''

This option also controls the user input in cells that use the DateBox widget for editing. For cells that use other widgets, you can specify the editorOptions.format option.

jQuery
JavaScript
$(function(){
    $("#filterBuilderContainer").dxFilterBuilder({
        fields: [{
            dataField: "SaleAmount",
            format: "currency",
            editorOptions: {
                format: "$ #,##0.##"
            }
        }, 
        // ...
        ]
    });
});
Angular
TypeScript
HTML
import { DxFilterBuilderModule } from 'devextreme-angular';
// ...
export class AppComponent {
    fields = [{
        dataField: "SaleAmount",
        format: "currency",
        editorOptions: {
            format: "$ #,##0.##"
        }
    }, 
    // ...
    ];
}
@NgModule({
    imports: [
        // ...
        DxFilterBuilderModule
    ],
    // ...
})
<dx-filter-builder
    [fields]="fields">
</dx-filter-builder>
See Also

lookup

Configures the lookup field.

Type:

Object

Default Value: undefined

Use the lookup field to limit the available filter values.

See Also

trueText

Specifies the true value text. Applies only if dataType is "boolean".

Type:

String

Default Value: 'true'