DevExtreme jQuery - Integrate with a Widget
The FilterBuilder's fields array should
contain data fields from a widget'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 stored in the value option. The following code does this on a button click:
jQuery
JavaScript
$(function () { // ... $("#button").dxButton({ text: "Apply Filter", onClick: function () { var filter = $("#filterBuilder").dxFilterBuilder("instance").option("value"); 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) list: DxListComponent; @ViewChild(DxFilterBuilderComponent) filterBuilder: DxFilterBuilderComponent; // ... buttonClick() { let listData = this.list.getDataSource(); listData.filter(this.filterBuilder.value); 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
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.