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

In the last release, v17.2, we introduced the powerful Filter Builder widget for DevExtreme. It provides the UI for building of complex filter expressions, which are useful for controls like the DataGrid and TreeList.

Starting with v18.1 release, we've now integrated the FilterBuilder directly into the DataGrid and TreeList. 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.

Join the Webinar

Sign up for our upcoming “New in v18.1 - DevExtreme HTML / JS Controls” webinar where you’ll have a chance to all the new DevExtreme v18.1 items demonstrated live and ask any questions about our ASP.NET MVC, ASP.NET Core, React, Vue, or other client-side offerings.

Join the webinar: https://attendee.gotowebinar.com/register/9186007723238099714

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