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. 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