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.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.
Version: 3.1.1
Framework Version: 10.24.0
Release Notes: ### [3.0.4] DatagridDropdownFilter #### Fixed - We enhanced dropdown widget customization by separating texts for empty selection, empty option caption, and input placeholder. This change allows for more granular control over the widget's text configurations. - We improved dropdown widget usability with enhanced keyboard navigation, visual feedback, and interaction behavior. #### Breaking changes - Text configurations for empty option, empty selection, and input placeholder need to be reviewed and reconfigured. ### [3.0.1] Datagrid #### Fixed - We fixed an issue where the filter values were restored from previously stored personalized configuration even when Store filters was set to No.
Version: 3.1.0
Framework Version: 10.24.0
Release Notes: ### Fixed - We fixed an issue where datagrid styling being overwritten by table styling from atlas core. - We fixed an issue where horizontal scrolling failed to show if width is too big. ### [3.0.3] DatagridDropdownFilter #### Fixed - We fixed an issue where the "Use Lazy Load" flag was not being read properly. This caused the widget to always load lazily in association mode. ### [3.1.0] Gallery #### Added - Similar to Data Grid 2, Gallery now can store filters and sort configurations in an attribute or browser. These new settings can be found in the "Personalization" tab. #### Fixed - We fixed an issue where the default sort order was not being applied.