Field

The FilterBuilder's field structure.

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:
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.

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' | 'datetime' | 'boolean' | 'object'

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.

editorTemplate

Specifies the editor's custom template.

Type:

template

Function parameters:
conditionInfo:

Object

The condition's settings.

Object structure:
value:

String

|

Number

|

Date

The condition's data field value.

filterOperation:

String

The condition's operation.

The condition's configuration.

setValue:

function

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

container:

Element (jQuery or HTML)

The editor's container.

Return Value:

String

|

DOM Node

|

jQuery

A template name or container.

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

Specifies the input value's format.

Type:

Format

Default Value: ''

See the format section for details on the accepted values.

lookup

Configures the field's lookup.

Type:

Object

Default Value: undefined

Use the lookup when you need to restrict a set of values a user can choose or to substitute displayed values for required ones. For example, consider that you have the following array of objects and need to filter other widget's data by driverID's:

JavaScript
var drivers = [
    { driverID: 1, name: 'John Smith' },
    { driverID: 2, name: 'Lizzy Cook' },
    { driverID: 3, name: 'Brian Hawkins' }
];

Displaying IDs is not informative to a user. Assign name to the displayExpr option to display driver names and driverID to the valueExpr to write IDs in the resulting filter expression.

jQuery
JavaScript
$(function() {
    $("#filterBuilder").dxFilterBuilder({
        fields: [{
            dataField: "Driver",
            lookup: {
                dataSource: drivers,
                valueExpr: 'driverID',
                displayExpr: 'name'
            }
        },
        // ...
        ]
    });
})
Angular
HTML
TypeScript
<dx-filter-builder>
    <dxi-field
        dataField="Driver">
        <dxo-lookup 
            [dataSource]="drivers"
            valueExpr="driverID"
            displayExpr="name">
        </dxo-lookup> 
    </dxi-field>
</dx-filter-builder>
import { DxFilterBuilderModule } from 'devextreme-angular';
// ...
export class AppComponent {
    drivers = [
        { driverID: 1, name: 'John Smith' },
        { driverID: 2, name: 'Lizzy Cook' },
        { driverID: 3, name: 'Brian Hawkins' }
    ];
}
@NgModule({
    imports: [
        // ...
        DxFilterBuilderModule
    ],
    // ...
})

trueText

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

Type:

String

Default Value: 'true'