DevExtreme DataGrid and TreeList - Integrated Filter Builder (v18.1)

A visual Filter Builder allows your end-users to filter in versatile ways. It 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.

We created a stand-alone Filter Builder widget in the last release and provided examples of how to integrate it with our controls like the DataGrid widget. One benefit of it being a standalone widget is that you can place it on different parts of your view.

However, it's also useful to have the Filter Builder integrated directly into the widget because:

1. You gain more space on your view for other elements
2. Easier to setup with one option

So we've now integrated the FilterBuilder directly into the DataGrid and TreeList widget with the v18.1 release. You can enable it using a single option:

{
   // …
   filterPanel: { 
      visible: true,
   }
}

Once the filterPanel option is enabled, the widget will display the Filter Panel that shows the current filtering criteria at the bottom of the data table. Click the filtering criteria text to display the Filter Builder.

Filters Synchronization

Recently, customers asked us about synchronization between the filter builder and the filter row and header filter (Filter builder integration with Filtering of dxDataGrid and DataGrid - How to pass the Header Filter value to FilterBuilder). And we are happy to introduce this feature in v18.1 too. This new feature enables users to see the aggregate filtering condition in one place. It is helpful when working with complex filtering criteria:

You can use the following options to customize and control the new features:

{
// …
    filterValue: [], // set/get current filter criteria of the Filter Builder 
    filterSyncEnabled: 'auto' // enable/disable filtering UI elements synchronization
    filterPanel: { 
        visible: true, // show/hide filter panel 
        filterEnabled: true, // enable/disable filtering
    },
    filterBuilderPopup: {}, // customize the Popup
    filterBuilder {} // customize the Filter Builder
}

If you have questions or suggestions, then please take part in the discussion about this feature on GitHub.

Angular, Vue, React, ASP.NET MVC / Core and more

All of these new features will be available on all the frameworks we support: Angular, Vue, React, jQuery, Knockout, ASP.NET MVC and .NET Core.

Test It Today

If you want to give these features a test-drive then simply add it to your project by entering:

npm install --save devextreme@18.1-unstable

If you're not using npm, check out my earlier blog post about pre-releases.

Watch the Webinar

Watch the “New in v18.1 - DevExtreme HTML / JS Controls” webinar where you’ll see all the new DevExtreme v18.1 items demonstrated for our ASP.NET MVC, ASP.NET Core, React, Vue, or other client-side offerings.

Like it?

We'd love to hear your feedback about the new integrated Filter Builder for DevExtreme DataGrid and Treelist controls. Drop me a line below, thanks.

Email: mharry@devexpress.com

Twitter: @mehulharry

Free DevExpress Products – Get Your Copy Today