Data Widgets

Content Type: Module
Categories: Communication

Overview

Important Upgrade Notice (Data Widgets v3.0)

The configuration of drop-down filters for associations has changed in this version. The reference entity is no longer set in the column configuration but directly in the drop-down filter itself. As a result, existing filters that rely on associations will stop working until manually updated.

We are actively working on a conversion that will handle this automatically in a future 10.24 patch release.

Additionally for the Gallery widget, the configuration of drop-down sort widgets has changed. Sort attributes are now defined inside the drop-down sort widget itself, rather than in the surrounding Gallery widget. This means that existing sort configurations will also stop working until manually updated.

 

 

The Data Widgets module, is a packaged module that contains the following widgets:

  • Data grid 2
  • Gallery
  • Tree node
  • Filtering and Sorting widgets.

This module also includes all the styling, design properties and building blocks related to these widgets.

 

Data grid 2

The successor of the standard data grid widget for displaying content in a tabular form. It comes with many powerful new features and settings like support for widgets, row and cell coloring, responsive layout, accessibility and different paging options, like virtual scrolling.

 

Gallery

The Gallery widget is the successor to both the standard list view and template grid. It features a new responsive grid design, usage of the same filtering and sort widgets from Data grid 2 and settings like support for conditional styling, paging and empty placeholders.

 

Tree node

The tree node is a widget used to create a level in a tree UI. Multiple tree node widgets can be combined to create a tree view. The tree node widget is fully composable and comes with settings for animating and icon customization.

 

Filtering and Sorting widgets

The filtering and sorting can be used across the data widgets of the Data grid 2 and the Gallery. Out of the box there is filtering for text, numbers, dates, and the option to add drop-down filters for single or multiple selections.

Documentation

Please see Data Widgets in the Mendix documentation for details.

Releases

Version: 3.11.7
Framework Version: 10.24.0
Release Notes: ### Fixed

- We fixed an issue where the focus outline of column header filter inputs was clipped.

- We fixed an issue where the dropdown filter's clear and toggle indicators visually overflowed the filter button in narrow columns.

- We fixed an issue where filters and inputs overflowed their headers and cells in narrow columns.

- We fixed an issue where rows with editable widgets were taller than necessary.

### Datagrid

#### Fixed

- We fixed an issue where the "Column size" property appeared away from the "Column width" property it depends on in the column Appearance tab in Studio Pro.

### Gallery

#### Fixed

- We fixed an issue where SPACE and ENTER keyboard events were blocked in interactive elements (inputs, textareas, buttons) nested within gallery items. These keys now work normally in nested inputs while still triggering gallery item selection when pressed on the item itself.

### TreeNode

#### Fixed

- We fixed an issue where the tree did not reflect a new data source sort order (for example after changing a sequence attribute) until the page was reopened.

- We fixed an issue where all nodes collapsed when the data source refreshed. Expanded and collapsed nodes now keep their state, and the tree no longer clears while the data source is reloading.

- We fixed an issue where a node did not show that it has children after a child was added to it. Expanding a node now always pre-loads one level ahead, also for children that arrive after the expansion, which restores the missing expand icon on nodes deeper than two levels.

- We fixed an issue where a tree node's loading spinner would never disappear when using a microflow data source with "Start expanded" set to yes.

- We fixed an issue where expanding one node could permanently remove the expand icon from an unrelated, unexpanded node elsewhere in the tree when using a microflow data source.

- We fixed an issue where a node's expand icon for a deeper tier would not appear until that node was collapsed and expanded again.

- We fixed an issue where, with "Start expanded" set to yes, tree nodes deeper than the second level would not show an expand icon until a parent node was manually collapsed and expanded again.

- We fixed an issue where nodes shown after the data source was filtered elsewhere on the page (for example by a gallery or a list view acting as a filter) had no expand icon and could not be opened at all, even though they had children.
Version: 3.11.6
Framework Version: 10.24.0
Release Notes: ### Datagrid

#### Fixed

- We fixed an issue where custom pagination ignored "Position of pagination" and always rendered below the grid. It now renders above the grid, below the grid, or — for "Both" — once, below the grid.

- We fixed an issue where exporting a date column to Excel could write the previous calendar day, or add a time that is not shown in the grid. Exported dates and times now match what the grid displays, regardless of the time zone.
Version: 3.11.5
Framework Version: 10.24.0
Release Notes: ### DatagridDateFilter

#### Changed

- We updated the calendar picker, improving how screen readers announce the day-name row and the open calendar.

### Datagrid

#### Fixed

- We fixed an issue where the top bar did not stack its content vertically in narrow containers.

#### Added

- We added two optional export event actions — **On before export** and **On after export** — so developers can log export operations via a microflow or nanoflow. `On before export` fires just before the export starts and provides the grid name, visible column titles, chunk size, file name, sheet name, and start time. `On after export` fires after the export finishes (whether completed or canceled) and also provides the total number of exported rows, a status string (`"success"` or `"aborted"`), and an end time.

### Gallery

#### Changed

- The pagination alignment design property now offers Left, Center and Right, and is applied above and below the gallery. Aligning the pagination moves the selection count or the load more button aside so both stay visible on the same row.

#### Fixed

- We fixed the pagination alignment design property, which had no effect on the position of the pagination controls.

- We fixed an issue where custom pagination widgets always rendered below the gallery, ignoring the "Position of pagination" setting. Selecting "Above grid" now renders them above the gallery, and the page editor shows them in the same place as the running app. With "Both" selected, custom pagination widgets render once, below the gallery.
Version: 3.11.4
Framework Version: 10.24.0
Release Notes: ### [3.11.4] DropdownSort

#### Fixed

- We fixed React console warnings from uncontrolled input elements.

### [3.11.4] Gallery

#### Fixed

- We fixed an issue where the Gallery widget could crash with an "invalid attribute id" error when a stored sort order referenced an attribute that was no longer available. The widget now falls back to the default sort order instead.

- We fixed an issue in Studio Pro design mode where widgets placed inside a gallery item could not be selected or hovered. Double-clicking them opened the properties of the surrounding container instead.
Version: 3.11.3
Framework Version: 10.24.0
Release Notes: ### [3.11.3] DatagridDropdownFilter

#### Fixed

- We fixed an issue with option filtering not working correctly with IME input methods.

### [3.11.3] Datagrid

#### Added

- We added support for using the attribute's own formatting when exporting to Excel with the "Default" export type. Numbers now export as numeric cells that mirror the grid's decimals and thousands grouping, and dates export using their configured pattern, instead of unformatted values.

#### Fixed

- We fixed an issue where export type and format properties were visible in Studio Pro for dynamic text columns, even though they have no effect.

### [3.11.3] Gallery

#### Fixed

- We fixed an issue where "Reset All Filters" and "Clear Selection" JavaScript actions did not work with the Gallery widget. Event listeners were not registered despite the required infrastructure being in place.
Version: 3.11.2
Framework Version: 10.24.0
Release Notes: ### Fixed

- We fixed an issue with Data Widgets not working in Dojo client in some cases.
Version: 3.11.1
Framework Version: 10.24.0
Release Notes: ### [3.11.1] Datagrid

#### Fixed

- We fixed an issue where a Progress Bar widget placed as Custom Content inside a Data Grid would not display correctly due to a CSS class name conflict.

- We fixed an issue where "is empty" and "is not empty" string filters were not working correctly in some cases.
Version: 3.11.0
Framework Version: 10.24.0
Release Notes: ### [3.11.0] Datagrid

#### Added

- We added a "Custom row key" property in the Advanced section to provide stable row identifiers when using view entities, preventing scroll position loss during data refresh.

#### Fixed

- We fixed an issue where custom content columns ignored the export type setting, causing numbers and dates to always export as text in Excel.

- We fixed an issue where exported date values included a hidden time component even when the format specified date-only parts.

- We fixed an issue where boolean values were not exported as proper Excel boolean cells. Both attribute and custom content columns now export as native booleans (TRUE/FALSE) recognized by Excel.

- We fixed an issue where numbers with more than 15 significant digits lost precision during Excel export. Such values are now exported as text to preserve all digits.

- We fixed an issue where the vertical scrollbar disappeared after hiding a wide column while virtual scrolling was enabled.

- We fixed an issue where only the first page loaded when the grid had enough columns to require horizontal scrolling.

### [3.11.0] Gallery

#### Added

- We added a "Custom item key" property in the Advanced section to provide stable item identifiers when using view entities, preventing scroll position loss during data refresh.

### [3.11.0] TreeNode

#### Added

- We added `Parent association` config to allow creating infinite level treenodes by using self reference association to itself. Fill this configuration with the association and Treenode will render as an infinite treenode.
Version: 3.10.0
Framework Version: 10.24.0
Release Notes: ### Changed

- We changed some stylings hardcoded values to have a better support for css variables.

### [3.10.0] DatagridDateFilter

#### Fixed

- We fixed an issue with filter selector dropdown not choosing the best placement on small viewports.

### [3.10.0] DatagridDropdownFilter

#### Fixed

- We fixed an issue with filter selector dropdown not choosing the best placement on small viewports.

### [3.10.0] DatagridNumberFilter

#### Fixed

- We fixed an issue with filter selector dropdown not choosing the best placement on small viewports.

- We fixed an issue where selecting Empty or Not empty could cause keyboard focus to jump away from the filter controls.

### [3.10.0] DatagridTextFilter

#### Fixed

- We fixed an issue with filter selector dropdown not choosing the best placement on small viewports.

- We fixed an issue where selecting Empty or Not empty could cause keyboard focus to jump away from the filter controls.
Version: 3.9.0
Framework Version: 10.24.0
Release Notes:

### [3.9.0] DatagridDropdownFilter

 

#### Fixed

 

- We fixed an issue with Dropdown filter captions not updating properly when their template parameters change.

 

### [3.9.0] DatagridNumberFilter

 

#### Fixed

 

- We fixed an issue where widgets with the Saved attribute configured would crash in some cases.

 

### [3.9.0] Datagrid

 

#### Changed

 

- We improved accessibility on column selector, added aria-attributes and changed the role to 'menuitemcheckbox'.

 

#### Added

 

- We added accessibility support for column headers when single selection is enabled, making sure the purpose of the column is announced.

 

- We added a new `Loaded rows` attribute that reflects the number of rows currently loaded for virtual scrolling and load-more pagination modes.

 

- We exposed the `Page`, `Page size`, and `Total count` attributes for virtual scrolling and load-more pagination modes so they are kept in sync at all times.

 

#### Fixed

 

- We fixed an issue with Data export crashing on some Android devices.

 

- We fixed an issue where the `Page` attribute was not updated when navigating pages using the default (buttons) paging controls.

 

- We fixed an issue where configuring the `Total count` attribute had no effect for virtual scrolling and load-more pagination modes.

 

### [3.9.0] Gallery

 

#### Fixed

 

- We fixed the pagination properties `Page attribute`, `Page size attribute`, and `Total count` not being shown in Studio Pro for Virtual Scrolling and Load More pagination modes.

 

#### Changed

 

- We changed the structure of the gallery settings to align them with the data grid.

 

#### Added

 

- We added the `Loaded rows` attribute to reflect the number of rows currently loaded. Available for Virtual Scrolling and Load More pagination modes.

 

- We added new attributes and a drop zone for custom pagination.

 

- We added support for the auto-select feature in multi-selection and single-selection mode.