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

25 April 2018

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

6 comment(s)
Engº Silvio Cruz

Will this filter synchronization be available to win forms controls like the grid control ?

25 April, 2018
Mehul Harry (DevExpress)

Hi Eng,

Good news, the DevExpress WinForms Grid control already has powerful filtering features, please take a look at these links:

documentation.devexpress.com/.../Filter-and-Search

documentation.devexpress.com/.../Tutorial-Filter-Editor

documentation.devexpress.com/.../Filtering-UI-Context

25 April, 2018
C#ristian

Hi, the webinar is not longer exist. Did you recorded it?

16 May, 2018
Mehul Harry (DevExpress)

@C#ristian,

Watch the webinar recording: www.youtube.com/watch

17 May, 2018
Customer56550

if we want to save custom filter for future then how it can do

13 December, 2018
Mehul Harry (DevExpress)

Customer56550,

I recommend contact the DevExtreme support team for such questions. They can help you find answers like this one which may help you:

www.devexpress.com/.../save-customizations-and-filterings

13 December, 2018

Please login or register to post comments.