JavaScript/jQuery FilterBuilder - fields.lookup
allowClearing
Set this property to true only if your data source accepts null values.
If you need to specify this property based on a condition, set the showClearButton property instead. This is a property of the SelectBox UI component, which is used as an editor for lookup fields. allowClearing is an alias for this property 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 property'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 property'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 ...
@editor-preparing="onEditorPreparing">
<!-- ... -->
</Dx{WidgetName>
</template>
<script>
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 property's value */) {
e.editorOptions.showClearButton = true;
}
}
}
}
</script>React
import React from 'react';
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 property's value */) {
e.editorOptions.showClearButton = true;
}
}
render() {
return (
<FilterBuilder ...
onEditorPreparing={this.onEditorPreparing}>
{/* ... */}
</FilterBuilder>
);
}
}
export default App;dataSource
This property 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 properties in addition to the dataSource.
displayExpr
Set this property 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 property unspecified or set it to this if the data source contains primitives.
valueExpr
Specifies the data field whose values should be replaced with values from the displayExpr field.
Values from this data field must have the same type as dataField values.