jQuery FilterBuilder - fields.lookup
allowClearing
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
$(function() { $("#filterBuilderContainer").dxFilterBuilder({ // ... onEditorPreparing: function (e) { if (/* a condition to set the option's value */) { e.editorOptions.showClearButton = true; } } }); });
Angular
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
<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
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
This option accepts one of the following:
Array of objects or primitives
A JavaScript array that contains plain objects or primitives.DataSource configuration object
A DataSource configuration object. For more information about the DataSource and DevExtreme Data Layer, refer to the Data Layer article.IMPORTANTDataSource instances are not supported.Store instance
An ArrayStore, LocalStore, ODataStore, or CustomStore instance.
If the lookup data source contains objects, specify the valueExpr and displayExpr options in addition to the dataSource.
displayExpr
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
This field's values are replaced with the displayExpr field's values.
If you have technical questions, please create a support ticket in the DevExpress Support Center.