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.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.

Version: 3.8.1

Framework Version: 10.24.0

Release Notes: ### [3.8.1] DatagridDateFilter

#### Changed

- We improved the filter selector dropdown behavior so it now automatically selects the best placement based on the available space.

### [3.8.1] DatagridDropdownFilter

#### Changed

- We improved the dropdown and filter selector behavior so that it now automatically selects the best placement based on the available space.

#### Fixed

- We fixed an issue where certain selecting conditions, like rapidly selecting/deselecting would cause the widget to crash.

### [3.8.1] DatagridNumberFilter

#### Changed

- We improved the filter selector dropdown behavior so it now automatically selects the best placement based on the available space.

### [3.8.1] DatagridTextFilter

#### Changed

- We improved the filter selector dropdown behavior so it now automatically selects the best placement based on the available space.

### [3.8.1] Datagrid

#### Fixed

- We fixed an issue that caused the UI export dialog to freeze.

Version: 3.8.0

Framework Version: 10.24.0

Release Notes:

### Fixed

- We fixed an issue where custom content would overflow its container cell.

### [3.8.0] DatagridDateFilter

#### Fixed

- We fixed an issue with background-color styles on hover in date picker.

### [3.8.0] Datagrid

#### Fixed

- We fixed an issue where the footer would take up unnecessary spacing when no content was rendered inside.

- The property panel now shows keep selection property when Datagrid is set to single selection.

#### Changed

- We improved virtual scrolling behavior when horizontal scrolling is present due to grid size.

#### Added

- We added missing Dutch translations for Datagrid 2.

- We added a new property for export to excel. The new property allows to set the cell export type and also the format for type number and date.

- We have introduced the "Page" and "Page Size" attributes to provide complete control over DataGrid pagination.

- We added support for custom pagination controls at the bottom of the DataGrid. Now you can design your own pagination buttons.

- We added the possibility to configure the first row of a DataGrid to be auto-selected on first load, facilitating master-detail views.

### [3.8.0] Gallery

#### Fixed

- We fixed an issue where the footer would take up unnecessary spacing when no content was rendered inside.

- We fixed an issue where the row count wasn't displayed when "Virtual scroll" is on.

#### Added

- We added missing dutch translations for Gallery.

- We added a refresh interval property, to allow defining an interval (in seconds) for refreshing the content in Gallery

### [3.8.0] TreeNode

#### Changed

- We changed `hasChildren` configuration from boolean to expression.

#### Fixed

- We fixed an issue where Tree Nodes showing loading spinner when children can't be found while `hasChildren` property configured to `true`.

Version: 3.7.0

Framework Version: 10.24.0

Release Notes: ### Changed

- We enhanced datagrid selection UI with responsive container queries and improved layout styling for header and footer components.

- We enhanced gallery selection UI with responsive container queries and improved layout styling for header and footer components to match datagrid implementation.

### [3.7.0] Datagrid

#### Added

- We added configurable selection count visibility and clear selection button label template for improved row selection management.

- We fixed an issue where missing consistency checks for the captions were causing runtime errors instead of in Studio Pro

- We added a '"Select all" across pages' setting that, when enabled, allows users to select all rows across all pages.

#### Breaking changes

- The widget settings have been reorganized to make configuration easier.

#### Changed

- Selection count texts now have default value for en_US locale.

### [3.7.0] Gallery

#### Added

- We added configurable selection count visibility and clear selection button label template for improved row selection management.

- We introduced a new caption setting for the clear selection button.

#### Fixed

- We fixed an issue where setting the gallery gap to 0 caused an offset, which made the bottom border of items to dissapear.

Version: 3.6.1

Framework Version: 10.24.0

Release Notes:

### [3.6.1] Datagrid

#### Fixed

- We fixed issue with checkbox state. Now state is in sync with selection.

- We fixed issue with styles not being added to datagrid.

### [3.6.1] Gallery

#### Fixed

- We fixed issue with checkbox state. Now state is in sync with selection.

### [3.6.1] SelectionHelper

#### Fixed

- We fixed issue with checkbox state. Now state is in sync with selection.

Version: 3.6.0

Framework Version: 10.24.0

Release Notes: ### [3.6.0] DatagridDateFilter

#### Changed

- Internal improvements.

### [3.6.0] DatagridDropdownFilter

#### Changed

- Internal improvements.

### [3.6.0] DatagridNumberFilter

#### Changed

- Internal improvements.

### [3.6.0] DatagridTextFilter

#### Changed

- Internal improvements.

### [3.6.0] Datagrid

#### Fixed

- We fixed an issue where the calendar popup overlap with column header on virtual scrolling.

#### Breaking changes

- We changed datagrid styling display for `widget-datagrid-head` and `widget-datagrid-body` to use display grid instead of contents and adding `grid-template-column: subgrid` to make sure the columns aligned with the template defined in the global grid. This will also ensure that the scrollbar positioned on the grid body instead of the whole grid.

### [3.4.0] DropdownSort

#### Fixed

- We fixed an issue with Gallery widget causing errors when Mendix app is being used in an iframe.

- We fixed an issue with Dropdown sort widget not showing attribute captions correctly.

### [3.6.0] Gallery

#### Fixed

- We fixed an issue with Gallery widget causing errors when Mendix app is being used in an iframe.

### [3.6.0] TreeNode

#### Changed

- Internal improvements.

Version: 3.5.0

Framework Version: 10.24.0

Release Notes: ### Changed

- We consolidated all SCSS variables from individual files into variables.scss to have a better alignment with atlas variables. Please validate your data widgets stylings after update.

Version: 3.4.0

Framework Version: 10.24.0

Release Notes: ### Added

- We added a new JavaScript action to clear the selection in the Data grid 2 and Gallery widgets.

### [3.4.0] DatagridDateFilter

#### Fixed

- We fixed label issues reported by Axe a11y tools

### [3.4.0] DatagridDropdownFilter

#### Fixed

- We fixed label issues reported by Axe a11y tool

### [3.4.0] DatagridNumberFilter

#### Changed

- Internal improvements.

### [3.4.0] DatagridTextFilter

#### Changed

- Internal improvements.

### [3.4.0] Datagrid

#### Fixed

- We fixed an issue where the datagrid's horizontal scrollbar would unexpectedly jump to the right when the column selector was enabled.

### [3.4.0] Gallery

#### Fixed

- We fixed an issue where the column count was not reflected properly in the preview mode.

#### Added

- Added a 'horizontal divider' option to Borders design property for Gallery list items, allowing improved visual separation and customization.

### [3.4.0] TreeNode

#### Changed

- Internal improvements.

Version: 3.3.0

Framework Version: 10.24.0

Release Notes: ### [3.3.0] DatagridDropdownFilter

#### Fixed

- We implemented ellipsis truncation to resolve option caption overflow issues.

- We fixed an issue where tooltips were not displayed correctly when hovering over options.

### [3.3.0] Datagrid

#### Added

- We implemented a new property to show a refresh indicator. With the refresh indicator, any datasource change shows a progress bar on top of Datagrid 2.

- We added a selection count display that shows the number of selected rows in the grid footer. The count appears automatically when items are selected and supports customizable text formats for singular and plural forms via the new "Row count singular" and "Row count plural" properties.

### [3.3.0] Gallery

#### Added

- We implemented a new property to show a refresh indicator. With the refresh indicator, any datasource change shows a progress bar on top of Gallery.

Version: 3.2.0

Framework Version: 10.24.0

Release Notes: ### [3.2.0] DatagridDateFilter

#### Changed

- Internal improvements.

### [3.2.0] DatagridDropdownFilter

#### Changed

- Internal improvements.

### [3.2.0] DatagridNumberFilter

#### Changed

- Internal improvements.

### [3.2.0] DatagridTextFilter

#### Changed

- Internal improvements.

### [3.2.0] Datagrid

#### Changed

- We removed all metadata stored in xpath to improve integration with other services.

### [3.2.0] Gallery

#### Changed

- We removed all metadata stored in xpath to improve integration with other services.