All docs
V21.1
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

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
const products = [{
    ID: 1,
    Name: "HD Video Player",
    Price: 330,
    Category: "Video Players"
}, {
    ID: 2,
    Name: "SuperPlasma 50",
    Price: 2400,
    Category: "Televisions"
}, 
// ...
];
const fields = [{
    dataField: "ID",
    dataType: "number"
}, {
    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>
    <dxi-field
        dataField="ID"
        dataType="number">
    </dxi-field>
    <dxi-field dataField="Name"></dxi-field>
    <dxi-field
        dataField="Price"
        dataType="number"
        format="currency">
    </dxi-field>
</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"
    }, 
    // ...
    ];
}
@NgModule({
    imports: [
        // ...
        DxListModule,
        DxFilterBuilderModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxFilterBuilder>
        <DxField
            data-field="ID"
            data-type="number"
        />
        <DxField data-field="Name" />
        <DxField
            data-field="Price"
            data-type="number"
            format="currency"
        />
    </DxFilterBuilder>
    <DxList :data-source="products">
        <template #item="{ data }">
            <div>{{ data.Category }}: {{ data.Name }}</div>
        </template>
    </DxList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxFilterBuilder, { DxField } from 'devextreme-vue/filter-builder';
import DxList from 'devextreme-vue/list';

export default {
    components: {
        DxFilterBuilder,
        DxField,
        DxList
    },
    data() {
        return {
            products: [{
                ID: 1,
                Name: "HD Video Player",
                Price: 330,
                Category: "Video Players"
            }, {
                ID: 2,
                Name: "SuperPlasma 50",
                Price: 2400,
                Category: "Televisions"
            }, 
            // ...
            ]
        };
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import FilterBuilder, { Field } from 'devextreme-react/filter-builder';
import List from 'devextreme-react/list';

const products = [{
    ID: 1,
    Name: "HD Video Player",
    Price: 330,
    Category: "Video Players"
}, {
    ID: 2,
    Name: "SuperPlasma 50",
    Price: 2400,
    Category: "Televisions"
}, 
// ...
];

const ListItem = (data) => {
    return (
        <div>{ data.Category }: { data.Name }</div>
    );
}

export default function App() {
    return (
        <React.Fragment>
            <FilterBuilder>
                <Field
                    dataField="ID"
                    dataType="number"
                />
                <Field dataField="Name" />
                <Field
                    dataField="Price"
                    dataType="number"
                    format="currency"
                />
            </FilterBuilder>
            <List
                dataSource={products}
                itemRender={ListItem}
            />
        </React.Fragment>
    );
}

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 () {
            const filterExpr = $("#filterBuilder").dxFilterBuilder("instance").getFilterExpression();
            const listDataSource = $("#list").dxList("instance").getDataSource();
            listDataSource.filter(filterExpr);
            listDataSource.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;
    // ...
    applyFilter() {
        const listDataSource = this.list.getDataSource();
        listDataSource.filter(this.filterBuilder.getFilterExpression());
        listDataSource.load();
    }
}
@NgModule({
    imports: [
        // ...
        DxButtonModule,
        DxListModule,
        DxFilterBuilderModule
    ],
    // ...
})
<!-- ... -->
<dx-button 
    text="Apply Filter"
    (onClick)="applyFilter()">
</dx-button>
Vue
App.vue
<template>
    <DxFilterBuilder :ref="filterBuilderRefKey">
        <!-- ... -->
    </DxFilterBuilder>
    <DxList :ref="listRefKey" ... >
        <!-- ... -->
    </DxList>
    <DxButton 
        text="Apply Filter"
        @click="applyFilter"
    />
</template>

<script>
// ...
import DxButton from 'devextreme-vue/button';

const filterBuilderRefKey = "my-filter-builder";
const listRefKey = "my-list";

export default {
    components: {
        // ...
        DxButton
    },
    data() {
        return {
            // ...
            filterBuilderRefKey,
            listRefKey
        };
    },
    method: {
        applyFilter() {
            const listDataSource = this.list.getDataSource();
            listDataSource.filter(this.filterBuilder.getFilterExpression());
            listDataSource.load();
        }
    },
    computed: {
        filterBuilder: function() {
            return this.$refs[filterBuilderRefKey].instance;
        },
        list: function() {
            return this.$refs[listRefKey].instance;
        }
    }
}
</script>
React
App.js
import React, { useRef } from 'react';
// ...
import Button 'devextreme-react/button';

export default function App() {
    const filterBuilder = useRef(null);
    const list = useRef(null);

    const applyFilter = () => {
        const listDataSource = list.getDataSource();
        listDataSource.filter(filterBuilder.getFilterExpression());
        listDataSource.load();
    };

    return (
        <React.Fragment>
            <FilterBuilder ref={filterBuilder}>
                {/* ... */}
            </FilterBuilder>
            <List ref={list}>
                {/* ... */}
            </List>
            <Button 
                text="Apply Filter"
                onClick={applyFilter}
            />
        </React.Fragment>
    );
}

Filter Builder with Data Grid Demo Filter Builder with List Demo

See Also