DevExtreme - Filter Builder - Customization Enhancements (v18.2)

Customization of the DevExtreme Filter Builder has become more flexible with our v18.2 release. Based on customer requests, we added two new options that enable you to restrict the complexity of filters created by users.

Like the vast majority of DevExtreme functionality, the features discussed in this post are available to you on all supported platforms, including Angular, Vue, React, jQuery and ASP.NET MVC and ASP.NET Core.

Criteria Nesting Depth

We introduced the option maxGroupLevel to limit the criteria grouping levels end users can create.

If this value is set to 0 (zero), new criteria can only be added to the root level of the filter. If the value is 1, a single extra level can be added.

Please follow this documentation link for all the details.

Criteria Grouping Operation Restrictions

By default, the Filter Builder supports four criteria group operations: And , Or , Not And and Not Or. You can now configure a subset of these operations to be enabled in the Filter Builder by setting the groupOperations property.

For example, to remove the Not And and Not Or operations, set the property to ['and', 'or'].

Documentation for this feature is available here.

Try It Now

The Filter Builder Customization Demo shows both new features in action. Alternatively you can install version v18.2 in your project to test things for yourself:

npm install --save devextreme@18.2

Please Tell Us What You Think

Your comments are welcome, as always! Please submit the short survey below, and feel free to add comments to this post or open a Support Center ticket for further discussion.

Free DevExpress Products - Get Your Copy Today