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.

View Demo

This function must return a filter expression. The simplest filter expression has the following format:

[selector, selectedFilterOperation, filterValue]

• selector
  A data source field to be filtered.

• selectedFilterOperation
  A comparison operator. One of the following: "=", "<>", ">", ">=", "<", "<=", "between", "startswith", "endswith", "contains", "notcontains".

  NOTE

  For the "between" operator, the returned filter expression has a slightly different format: [[selector, ">=", startValue], "and", [selector, "<=", endValue]].

• filterValue
  A user input value. Values the selector provides are compared to this value.

In the following code, the calculateFilterExpression function implements an exclusive between operation. This is done by overriding the default inclusive implementation.

$(function() {
    $("#filterBuilderContainer").dxFilterBuilder({
        // ...
        fields: [{
            calculateFilterExpression: function (filterValue, selectedFilterOperation) {
                if (selectedFilterOperation === "between" && $.isArray(filterValue)) {
                    var filterExpression = [
                        [this.dataField, ">", filterValue[0]], 
                        "and", 
                        [this.dataField, "<", filterValue[1]]
                    ];
                    return filterExpression;
                }
                // Invokes the default filtering behavior
                return this.defaultCalculateFilterExpression.apply(this, arguments);
            },
            // ...
        }]
    });
});

import { DxFilterBuilderModule } from "devextreme-angular";
// ...
export class AppComponent {
    calculateFilterExpression (filterValue, selectedFilterOperation) {
        let field = this as any;
        if (selectedFilterOperation === "between" && Array.isArray(filterValue)) {
            var filterExpression = [
                [field.dataField, ">", filterValue[0]], 
                "and", 
                [field.dataField, "<", filterValue[1]]
            ];
            return filterExpression;
        }
        // Invokes the default filtering behavior
        return field.defaultCalculateFilterExpression.apply(field, arguments);
    }
}
@NgModule({
    imports: [
        // ...
        DxFilterBuilderModule
    ],
    // ...
})

<dx-filter-builder ... >
    <dxi-field [calculateFilterExpression]="calculateFilterExpression" ... ></dxi-field>
</dx-filter-builder>

In the previous code, the defaultCalculateFilterExpression function invokes the default behavior. You can omit the function call if you do not need it.

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

Use the FilterBuilderFieldDataType enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: String, Number, Date, DateTime, Boolean, and Object.

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 in Angular, Vue, and React. In these frameworks, specify editorOptions with an object. We recommend that you declare the object outside the configuration component in Vue and React to prevent possible issues caused by unnecessary re-rendering.

<dx-filter-builder ... >
    <dxi-field ...
        [editorOptions]="{ format: 'currency', showClearButton: true }">
    </dxi-field>
</dx-filter-builder>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxFilterBuilderModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxFilterBuilderModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

<template>
    <DxFilterBuilder ... >
        <DxField ...
            :editor-options="fieldEditorOptions"
        />
    </DxFilterBuilder>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
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>

import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import FilterBuilder, {
    Field
} from 'devextreme-react/filter-builder';

class App extends React.Component {
    fieldEditorOptions = { format: 'currency', showClearButton: true };

    render() {
        return (
            <FilterBuilder ... >
                <Field ...
                    editorOptions={this.fieldEditorOptions}
                />
            </FilterBuilder>
        );
    }
}
export default App;

$(function() {
    $("#filterBuilderContainer").dxFilterBuilder({
        // ...
        onEditorPreparing: function(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);
                }
            }
        }
    });
});

import { DxFilterBuilderModule } from "devextreme-angular";
// ...
export class AppComponent {
    onEditorPreparing (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);
            }
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxFilterBuilderModule
    ],
    // ...
})

<dx-filter-builder ... 
    (onEditorPreparing)="onEditorPreparing($event)">
</dx-filter-builder>

See Also

• Custom Templates

The following table lists default operations by data type:

The "isblank" operation returns null values and empty strings; "isnotblank" returns other values.

Use the FilterBuilderFieldFilterOperations enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Equal, NotEqual, LessThan, LessThanOrEqual, GreaterThan, GreaterThanOrEqual, Between, NotContains, Contains, StartsWith, EndsWith, IsBlank, and IsNotBlank.

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.

$(function(){
    $("#filterBuilderContainer").dxFilterBuilder({
        fields: [{
            dataField: "SaleAmount",
            format: "currency",
            editorOptions: {
                format: "$ #,##0.##"
            }
        }, 
        // ...
        ]
    });
});

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

• format

Use the lookup field to limit the available filter values.

See Also

• Predefine Filter Values