JavaScript/jQuery FilterBuilder Options

See Also

• Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

The value of this property will be passed to the accesskey attribute of the HTML element that underlies the UI component.

This property is used when the UI component is displayed on a platform whose guidelines include the active state change for UI components.

See Also

• Filter Hierarchical Fields

View Demo

See Also

• Implement a Custom Operation

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

See Also

• groupOperations

The group operations are:

• "and"
• "notAnd"
  Returns a reverted result of an "and" operation: ["!", [[condition1], "and", [condition2]]].
• "or"
• "notOr"
  Returns a reverted result of an "or" operation: ["!", [[condition1], "or", [condition2]]].

View Demo

See Also

• maxGroupLevel
• groupOperationDescriptions

This property accepts a value of one of the following types:

• Number
  The height in pixels.

• String
  A CSS-accepted measurement of height. For example, "55px", "80%", "inherit".

• Function
  A function returning either of the above. For example:

  JavaScript

  height: function() {
      return window.innerHeight / 1.5;
  }

Assign 0 to this property to disallow new groups, 1 - to allow new first-level groups, 2 - to allow new first- and second-level groups, and so on.

View Demo

The UI component offers a user a different editor for entering a value depending on the field's dataType: Calendar, TextBox, SelectBox, etc. You can customize automatically created editors using this function.

The UI component offers a user different editors for entering a value depending on the field's dataType: Calendar, TextBox, SelectBox, and so on. Use this function to customize those default editors or substitute them for other editors.

In the following code, a default editor is replaced with the DevExtreme TextArea UI component. Note that the UI component's onValueChanged function is overridden, and its declaration ends with the setValue(newValue, newText) method's call. This method updates the value.

$(function() {
    $("#filterBuilder").dxFilterBuilder({
        // ...
        onEditorPreparing: function (e) {
            if (e.dataField == "description") {
                e.editorName = "dxTextArea"; 
                e.editorOptions.showClearButton = true;
                e.editorOptions.onValueChanged = function(event) {
                    const value = event.value;
                    e.setValue(value.toLowerCase()); 
                }
            }
        }
    });
});

import { DxFilterBuilderModule } from "devextreme-angular";
// ...
export class AppComponent {
    onEditorPreparing (e) { 
        if (e.dataField == "description") {
            e.editorName = "dxTextArea"; 
            e.editorOptions.showClearButton = true;
            e.editorOptions.onValueChanged = (event) => {
                const value = event.value;
                e.setValue(value.toLowerCase()); 
            }
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxFilterBuilderModule
    ],
    // ...
})

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

See Also

• Get a UI component Instance in Angular | AngularJS | Knockout | Vue | React

The following example shows how to subscribe to component property changes:

$(function() {
    $("#filterBuilderContainer").dxFilterBuilder({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

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

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    // ...
    handlePropertyChange(e) {
        if(e.name === "changedProperty") { 
            // handle the property change here
        }
    }
}

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 ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script> 
import 'devextreme/dist/css/dx.common.css'; 
import 'devextreme/dist/css/dx.light.css'; 
import DxFilterBuilder from 'devextreme-vue/filter-builder'; 

export default { 
    components: { 
        DxFilterBuilder
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script> 

import React from 'react'; 
import 'devextreme/dist/css/dx.common.css'; 
import 'devextreme/dist/css/dx.light.css'; 

import FilterBuilder from 'devextreme-react/filter-builder'; 

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <FilterBuilder ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
} 

When this property is set to true, the UI component text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

DevExpress.config({
    rtlEnabled: true
});

See Also

• Right-to-Left Support Demo: DataGrid | Navigation Widgets | Editors

The value of this property will be passed to the tabindex attribute of the HTML element that underlies the UI component.

See Also

• Data Layer - Filtering

This property accepts a value of one of the following types:

• Number
  The width in pixels.

• String
  A CSS-accepted measurement of width. For example, "55px", "80%", "auto", "inherit".

• Function
  A function returning either of the above. For example:

  JavaScript

  width: function() {
      return window.innerWidth / 1.5;
  }