Overview

Overview

The default Data Grid 2 in Mendix does not provide an out-of-the-box option to discard/reset filter values once applied. Users have to manually clear text fields or dropdowns using backspace, which is inconvenient—especially with multiple filters.

This solution introduces a small cross button (✖️) next to each filter input, allowing users to clear the filter value with one click.

Features

• 🧼 Clear any filter field instantly (text, dropdown, etc.)

• 📦 Works with default Data Grid 2 filters

• ⚡ Uses Nanoflow + JS for fast execution

• 💡 Enhances user experience

• 🛠️ Easy to integrate in your existing page

• 🎨 Fully customizable button (you can use an icon, text, or image)

How to Use

1. Import the .mpk module into your Mendix project.

2. Add a button (with a cross icon) near the filters.

3. Add a custom class name to the Data Grid 2 widget (e.g., my-grid-filter).

4. In the Nanoflow (e.g., NF_ResetFilters), pass the class name as a string parameter to the JavaScript action.👉 Example: ".my-grid-filter"

5. On click, the Nanoflow will execute JavaScript and clear all filter inputs inside the Data Grid 2 with that class.

6. You can modify the JavaScript if you have specific filter widget names/logic.

✅ Tested with Mendix 9.24.14 & 10.12.1

License

MIT

For issues or enhancements, contact E-mail

Documentation

Typical usage scenario

This module is used to reset or clear filters in Data Grid 2. By default, Data Grid 2 does not provide a discard/clear filter option. Users have to manually backspace each filter input.

With this module, you can place a ❌ (cross) button next to your filters, which triggers a Nanoflow and JavaScript action to clear the filter values in one click.

It improves the user experience on pages with multiple filters or frequent filter usage, like dashboards, reporting tools, and admin panels.

Features and limitations

Features:

• One-click reset for text, dropdown, or date filters.

• Nanoflow + JavaScript-based solution.

• Works with Mendix 9 and 10.

• Lightweight and reusable.

• Easy to style and place anywhere near filters.

• Accepts class name as parameter for targeting a specific Data Grid 2.

Limitations:

• Only works in web applications (not native mobile).

• Does not auto-reset filters on page load — manual trigger required.

• Requires a class name to be added to the Data Grid 2 widget.

• May need customization if filters use non-standard widget names or IDs.

Dependencies

• Mendix Data Grid 2 component must be used.

• JavaScript actions must be enabled in your Mendix app.

• Mendix Studio Pro (for modifying Nanoflow or JS logic if needed).

Installation

1. Import the module (.mpk) into your Mendix project.

2. Assign a unique class name to your Data Grid 2 widget (e.g., filter-grid).

3. Place the ❌ button widget near your filters.

4. Set the OnClick event to call the Nanoflow provided.

5. Pass the class name as a string parameter to the JavaScript action.

6. The Nanoflow will call a JavaScript action that clears the filters inside that class.

Configuration

• Make sure the Data Grid 2 widget has a class name (e.g., my-filter-grid).

• Pass this class name as a string to the JavaScript action (".my-filter-grid").

• You can edit the JavaScript to fine-tune which input elements get cleared.

• Adjust the CSS or use layout containers to position the button next to filters.

• Replace the ❌ icon with any custom icon/image as needed.

Known bugs

• May not fully reset multi-select or custom filter widgets without JS adjustment.

• Button placement may require layout tweaks for visual alignment.

• If class name is not set or passed incorrectly, the filters will not reset.

Frequently Asked Questions

Q: Can I use this with multiple filters on the same page?

A: Yes. As long as they are inside the Data Grid 2 with the assigned class name.

Q: What class name should I use?

A: Any class is fine (e.g., resettable-grid), but make sure:

• It is added to the Data Grid 2 container

• You pass it as a string with dot prefix (like ".resettable-grid")

Q: Can I change the ❌ icon to something else?

A: Yes. Replace it with any Mendix icon or image and link the same Nanoflow.

Q: Does this work in native mobile apps?

A: No. It is only supported for web-based Mendix apps.