DevExtreme React - Predefine Filter Values
You can limit the available filter values by predefining them in the lookup field.
Each lookup field has an individual data source. It can be a simple array of filter values...
jQuery
JavaScript
$(function () { $("#filterBuilder").dxFilterBuilder({ // ... fields: [{ dataField: 'status', // a field from a data source to be filtered lookup: { dataSource: [ // contains values present in the dataField 'Not Started', 'Need Assistance', 'In Progress', // ... ] } }] }); });
Angular
HTML
TypeScript
<dx-filter-builder> <dxi-field dataField="status"> <!-- a field from a data source to be filtered --> <dxo-lookup [dataSource]="lookupData"> <!-- contains values present in the dataField --> </dxo-field> </dxi-column> </dx-filter-builder>
import { DxFilterBuilderModule } from "devextreme-angular"; // ... export class AppComponent { lookupData = [ 'Not Started', 'Need Assistance', 'In Progress', // ... ]; } @NgModule({ imports: [ // ... DxFilterBuilderModule ], // ... })
... or a collection of objects that map actual filter values to display values.
jQuery
JavaScript
$(function () { $("#filterBuilder").dxFilterBuilder({ // ... fields: [{ dataField: "statusId", // a field from a data source to be filtered lookup: { dataSource: [ { id: 1, name: 'Not Started' }, { id: 2, name: 'Need Assistance' }, { id: 3, name: 'In Progress' }, // ... ], valueExpr: 'id', // contains values present in the dataField displayExpr: 'name' // provides display values } }] }); });
Angular
HTML
TypeScript
<dx-filter-builder> <dxi-field dataField="task"> </dxi-field> <dxi-field dataField="statusId"> <!-- a field from a data source to be filtered --> <dxo-lookup [dataSource]="statuses" valueExpr="id" <!-- contains values present in the dataField --> displayExpr="name"> <!-- provides display values --> </dxo-lookup> </dxi-field> </dx-filter-builder>
import { DxFilterBuilderModule } from "devextreme-angular"; // ... export class AppComponent { statuses = [ { id: 1, name: 'Not Started' }, { id: 2, name: 'Need Assistance' }, { id: 3, name: 'In Progress' }, // ... ]; } @NgModule({ imports: [ // ... DxFilterBuilderModule ], // ... })
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.