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-lookup>
</dxi-field>
</dx-filter-builder>
import { DxFilterBuilderModule } from "devextreme-angular";
// ...
export class AppComponent {
lookupData = [
'Not Started',
'Need Assistance',
'In Progress',
// ...
];
}
@NgModule({
imports: [
// ...
DxFilterBuilderModule
],
// ...
})Vue
App.vue
<template>
<DxFilterBuilder>
<DxField data-field="status"> <!-- a field from a data source to be filtered -->
<DxLookup :data-source="lookupData" /> <!-- contains values present in the dataField -->
</DxField>
</DxFilterBuilder>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxFilterBuilder, {
DxField,
DxLookup
} from 'devextreme-vue/filter-builder';
const lookupData = [
'Not Started',
'Need Assistance',
'In Progress',
// ...
];
export default {
components: {
DxFilterBuilder,
DxField,
DxLookup
},
data() {
return {
lookupData
}
}
}
</script>React
App.js
import 'devextreme/dist/css/dx.light.css';
import FilterBuilder, {
Field,
Lookup
} from 'devextreme-react/filter-builder';
const lookupData = [
'Not Started',
'Need Assistance',
'In Progress',
// ...
];
export default function App() {
return (
<FilterBuilder>
<Field dataField="status"> {/* a field from a data source to be filtered */}
<Lookup dataSource={lookupData}> {/* contains values present in the dataField */}
</Field>
</FilterBuilder>
);
}... 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="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
],
// ...
})Vue
App.vue
<template>
<DxFilterBuilder>
<DxField data-field="statusId"> <!-- a field from a data source to be filtered -->
<DxLookup
:data-source="statuses"
value-expr="id" <!-- contains values present in the dataField -->
display-expr="name" <!-- provides display values -->
/>
</DxField>
</DxFilterBuilder>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxFilterBuilder, {
DxField,
DxLookup
} from 'devextreme-vue/filter-builder';
const statuses = [
{ id: 1, name: 'Not Started' },
{ id: 2, name: 'Need Assistance' },
{ id: 3, name: 'In Progress' },
// ...
];
export default {
components: {
DxFilterBuilder,
DxField,
DxLookup
},
data() {
return {
statuses
}
}
}
</script>React
App.js
import 'devextreme/dist/css/dx.light.css';
import FilterBuilder, {
Field,
Lookup
} from 'devextreme-react/filter-builder';
const statuses = [
{ id: 1, name: 'Not Started' },
{ id: 2, name: 'Need Assistance' },
{ id: 3, name: 'In Progress' },
// ...
];
export default function App() {
return (
<FilterBuilder>
<Field dataField="statusId"> {/* a field from a data source to be filtered */}
<Lookup
dataSource={statuses}
valueExpr="id" {/* contains values present in the dataField */}
displayExpr="name" {/* provides display values */}
/>
</Field>
</FilterBuilder>
);
}See Also
Feedback