React FilterBuilder - fields.lookup

Configures the lookup field.

Type:

Object

Default Value: undefined

Use the lookup field to limit the available filter values.

See Also

allowClearing

Specifies whether to display the Clear button in the lookup field while it is being edited.

Type:

Boolean

Default Value: false

Set this option to true only if your data source accepts null values.

If you need to specify this option based on a condition, set the showClearButton option instead. This is an option of the SelectBox widget, which is used as an editor for lookup fields. allowClearing is an alias for this option in the FilterBuilder. The following code shows how to set showClearButton in the onEditorPreparing event handler:

jQuery
index.js
$(function() {
    $("#filterBuilderContainer").dxFilterBuilder({
        // ...
        onEditorPreparing: function (e) {
            if (/* a condition to set the option's value */) {
                e.editorOptions.showClearButton = true;
            }
        }
    });
});
Angular
app.component.ts
app.module.ts
app.component.html
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    onEditorPreparing(e) {
        if (/* a condition to set the option's value */) {
            e.editorOptions.showClearButton = true;
        }
    }
}
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
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }
<dx-filter-builder ...
    (onEditorPreparing)="onEditorPreparing($event)">
    <!-- ... -->
</dx-filter-builder>
Vue
App.vue
<template>
    <DxFilterBuilder ...
        :on-editor-preparing="onEditorPreparing">
        <!-- ... -->
    </Dx{WidgetName>
</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: {
        onEditorPreparing(e) {
            if (/* a condition to set the option's value */) {
                e.editorOptions.showClearButton = true;
            }
        }
    }
}
</script>
React
App.js
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';

class App extends React.Component {
    onEditorPreparing(e) {
        if (/* a condition to set the option's value */) {
            e.editorOptions.showClearButton = true;
        }
    }

    render() {
        return (
            <FilterBuilder ...
                onEditorPreparing={this.onEditorPreparing}>
                {/* ... */}
            </FilterBuilder>
        );
    }
}
export default App;

dataSource

Specifies the lookup data source.

Type:

Array<any>

|

DataSource Configuration

|

Store

Default Value: undefined

This option accepts one of the following:

If the lookup data source contains objects, specify the valueExpr and displayExpr options in addition to the dataSource.

NOTE
Collections of primitives are not supported if you use the DevExtreme.AspNet.Data library API directly or via a server-side wrapper (as with the DevExtreme ASP.NET MVC Controls) to load the collections from a remote data source. Reconfigure the data source to return collections of objects.

View Demo

displayExpr

Specifies the data field whose values should be displayed.

Type:

String

|

Function

Function parameters:
data:

Object

The current data object.

Return Value:

String

The displayed value.

Default Value: undefined

Set this option to the name of a data field that provides displayed values...

displayExpr: "name"

... or to a function that returns the displayed value:

displayExpr: function(item) {
    // "item" can be null
    return item && 'ID: ' + item.id + ', Name: ' + item.name;
}

Leave this option unspecified or set it to this if the data source contains primitives.

valueExpr

Specifies the data source field whose values should be replaced.

Type:

String

|

Function

Function parameters:
data:

Object

The current item's data object.

Return Value:

String

|

Number

|

Boolean

A unique item identifier.

Default Value: undefined

This field's values are replaced with the displayExpr field's values.

NOTE
You cannot specify valueExpr as a function when the widget is bound to a remote data source. This is because valueExpr is used in a filter the widget sends to the server when querying data. Functions with custom logic cannot be serialized for this filter.