jQuery FilterBuilder - Integrate with a DevExtreme UI Component
The FilterBuilder's fields array should
contain data fields from a UI component's data source. For example, the following code allows using the List's Name and Price fields in the FilterBuilder:
jQuery
JavaScript
var products = [{
ID: 1,
Name: "HD Video Player",
Price: 330,
Category: "Video Players"
}, {
ID: 2,
Name: "SuperPlasma 50",
Price: 2400,
Category: "Televisions"
},
// ...
];
var fields = [{
dataField: "Name"
}, {
dataField: "Price",
dataType: "number",
format: "currency"
}];
$(function () {
$("#list").dxList({
dataSource: products,
itemTemplate: function (data) {
return $("<div>").text(data.Category ": " data.Name);
}
});
$("#filterBuilder").dxFilterBuilder({
fields: fields
});
});Angular
HTML
TypeScript
<dx-filter-builder
[fields]="fields">
</dx-filter-builder>
<dx-list
[dataSource]="products">
<div *dxTemplate="let item of 'item'">
<div>{{item.Category}}: {{item.Name}}</div>
</div>
</dx-list>
import { DxListModule, DxFilterBuilderModule } from "devextreme-angular";
// ...
export class AppComponent {
products = [{
ID: 1,
Name: "HD Video Player",
Price: 330,
Category: "Video Players"
}, {
ID: 2,
Name: "SuperPlasma 50",
Price: 2400,
Category: "Televisions"
},
// ...
];
fields = [{
dataField: "ID",
dataType: "number"
}, {
dataField: "Name"
}, {
dataField: "Price",
dataType: "number",
format: "currency"
}];
}
@NgModule({
imports: [
// ...
DxListModule,
DxFilterBuilderModule
],
// ...
})To filter data, update the data source's filter according to the built filter expression. The following code does this on a button click:
jQuery
JavaScript
$(function () {
// ...
$("#button").dxButton({
text: "Apply Filter",
onClick: function () {
var filter = $("#filterBuilder").dxFilterBuilder("instance").getFilterExpression();
var listData = $("#list").dxList("instance").getDataSource();
listData.filter(filter);
listData.load();
},
});
});Angular
TypeScript
HTML
import {
DxListModule,
DxFilterBuilderModule,
DxButtonModule,
DxListComponent,
DxFilterBuilderComponent
} from "devextreme-angular";
// ...
export class AppComponent {
@ViewChild(DxListComponent, { static: false }) list: DxListComponent;
@ViewChild(DxFilterBuilderComponent, { static: false }) filterBuilder: DxFilterBuilderComponent;
// Prior to Angular 8
// @ViewChild(DxListComponent) list: DxListComponent;
// @ViewChild(DxFilterBuilderComponent) filterBuilder: DxFilterBuilderComponent;
// ...
buttonClick() {
let listData = this.list.getDataSource();
listData.filter(this.filterBuilder.getFilterExpression());
listData.load();
}
}
@NgModule({
imports: [
// ...
DxButtonModule,
DxListModule,
DxFilterBuilderModule
],
// ...
})
<!-- ... -->
<dx-button
text="Apply Filter"
(onClick)="buttonClick()">
</dx-button> Filter Builder with Data Grid Demo Filter Builder with List Demo
See Also
Feedback