caption
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".
dataType
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
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.
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
$(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
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
Name | Type | Description |
---|---|---|
value | | | |
The condition's data field value. |
filterOperation |
The condition's operation. |
|
field |
The condition's configuration. |
|
setValue |
A method that you should call to change the field value after the editor's value is changed. |
falseText
Specifies the false value text. Applies only if dataType is "boolean".
filterOperations
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.
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
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
$(function(){ $("#filterBuilderContainer").dxFilterBuilder({ fields: [{ dataField: "SaleAmount", format: "currency", editorOptions: { format: "$ #,##0.##" } }, // ... ] }); });
Angular
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
trueText
Specifies the true value text. Applies only if dataType is "boolean".
If you have technical questions, please create a support ticket in the DevExpress Support Center.