New HTML5 JavaScript Filter Builder Widget (v17.2)

In the v17.2 release, we're introducing a powerful new widget that helps your end-users to build complex filter criteria: the DevExtreme Filter Builder widget.

DevExpress is known for great UI controls with powerful features. And if you've used other DevExpress platforms like ASP.NET then you'll be happy to hear that DevExtreme now offers this as well.

Filter Builder Helps You Find Data

The Filter Builder widget provides advanced filter and criteria options to help end-users filter data with an unlimited number of conditions combined by logical operators. Therefore, it helps you to build filter criteria using logical operators that anyone can easily understand.

By adding this ability to specify complex filters in your UI, you can save time for end-users and improve productivity when working with large amounts of data.

The following code shows how to create a filter builder:

$("#filterBuilder").dxFilterBuilder({
    fields: [ {
            dataField: "Product_Name"
        }, {
            caption: "Cost",
            dataField: "Product_Cost",
            dataType: "number",
            format: "currency"
        }, {
            dataField: "Product_Current_Inventory",
            dataType: "number",
            caption: "Inventory"
        }
    ],
    value: [
        ["Product_Current_Inventory", "<>", 0],
        "Or",
        [
            ["Product_Name", "contains", "HD"],
            ["Product_Cost", "<", 200]
        ]
    ]
});

Filter Other Widgets

The Filter Builder widget is a stand-alone widget that can be combined to be used to filter other DevExtreme widgets whose data source supports filtering. For example, widgets like the HTML5 JavaScript DataGrid or TreeList:

widgetInstance.filter(filterBuilderInstance.option("value"));

The following code demonstrates how to use filter editor with DevExtreme List, PivodGrid (excluding XmlaStore), TreeView and other DevExtreme widgets:

var widgetDataSource = widgetInstance.getDataSource();
 
widgetDataSource.filter(filterBuilderInstance.option("value"));
 
widgetDataSource.load();

To help you get started with our new Filter Builder widget, we have prepared several technical demos and also included the Filter Builder in the DevAV demo. These demos will be available with the v17.2 release.

Common Usage Scenario

A social network is a good example where complex filter expressions can be helpful. People often set up a filter when looking for a person they want to find, and they generally specify the name, age, country, town, professional position, etc. - the more conditions they specify the faster they find a person they were looking for.

We even 'dogfood' (aka test and promote) our own products internally. And after using it internally for our own projects, we are positive that you'll love this new widget as much as we do.

Here is an example of how Filter Builder widget can be used to filter developer tasks:

Angular, ASP.NET MVC/Core, & More!

The new dxFilterFuilder widget will be available on all the frameworks we support: Angular, jQuery, Knockout, ASP.NET MVC, and .NET Core.

Try it now

The new dxFilterBuilder widget is included in the v17.2 pre-release that is available via npm right now. Please note that this pre-release may contain some bugs and is not intended to be used in production:

npm install devextreme@17.2.2-pre-beta

Learn more about DevExtreme's pre-releases in this blog post.

What do you think about the new Filter Builder widget? Drop me a line below.

Email: mharry@devexpress.com

Twitter: @mehulharry

Free DevExpress Products - Get Your Copy Today