DevExtreme FilterBuilder - Enable Search using FilterBuilder Field Dropdowns

This example adds search capabilities to the DevExtreme FilterBuilder field dropdowns.

Implementation Details

FilterBuilder uses the DevExtreme TreeView component to display available field values/operations.

To determine if a TreeView instance is generated by the FilterBuilder, check if the component has a cssClass option (using String.includes()). This option is not available in standalone TreeView components. FilterBuilder adds class names to cssClass values as follows:

• dx-filterbuilder-fields: Added for the Field Values dropdown.
• dx-filterbuilder-operations: Added for the Operations dropdown.

Note: In the DOM, these classes are added to the wrapper element of the TreeView's parent Popup.

if (treeViewInstance.option('cssClass')?.includes('dx-filterbuilder-fields')) {
    // treeViewInstance is generated by FilterBuilder
}

This example calls defaultOptions(rule) to add this check in the onInitialized handler for all TreeView instances in the app. If the check returns true, the handler enables the TreeView's searchEnabled option.

To resolve scrolling issues on certain platforms, apply the following CSS styles:

.dx-filterbuilder-overlay .dx-popup-content-scrollable > div.dx-treeview-with-search {
    max-height: 300px;
    height: auto;
}

.dx-filterbuilder-overlay div.dx-popup-content-scrollable {
    overflow: hidden;
}

.dx-filterbuilder-group-item .dx-scrollable-scroll-content {
    display: none;
}

Files to Review

• Angular
  • app.component.html
  • app.component.ts
  • app.component.scss
• React
  • App.tsx
  • App.css
• Vue
  • HomeContent.vue
• jQuery
  • index.html
  • index.js
  • index.css
• ASP.NET Core
  • Index.cshtml
  • Site.css

Documentation

• FilterBuilder Overview
• TreeView.defaultOptions(rule)
• TreeView.searchEnabled
• HTML-Based Components Customization

Does This Example Address Your Development Requirements/Objectives?

(you will be redirected to DevExpress.com to submit your response)