Angular FilterBuilder Field

View Demo

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

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.

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.

$(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
                }
            }
        }
    });
});

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>

See Also

• Custom Templates

The following table lists default operations by data type:

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

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.

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.

$(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