GridSizer

Content Type: Widget
Categories: Extensions,User Interface,Data

Overview

GridSizer is a lightweight pluggable widget designed to dynamically calculate how many rows can be displayed within a Data Grid 2 based on the available space.

The widget measures the rendered grid at runtime, determines the available vertical space, and calculates the maximum number of visible rows using the actual row height. The result is automatically written to a configurable Integer attribute.

This enables responsive layouts and dynamic behavior without manual configuration or hardcoded values.

GridSizer works seamlessly with Data Grid 2 and reacts to:

  • Page load
  • Layout and container size changes
  • Window resize events
  • Dynamic data updates

The widget uses DOM observation and efficient recalculation strategies to ensure minimal performance impact.

Documentation

Typical usage scenario

 

  • Dynamically setting page size of Data Grid 2
  • Creating responsive grids that adapt to screen size
  • Avoiding scrollbars by fitting rows to available space
  • Synchronizing UI layout with container dimensions
  • Improving UX in dashboards and responsive pages

 

Features and limitations

 

  • Automatically calculates visible row count
  • Works with Data Grid 2
  • No manual configuration required
  • Reacts to layout and data changes
  • Optimized with debouncing and smart recalculation
  • Lightweight and performance-friendly
  • Fully client-side (no microflows required)

 

Dependencies [optional]

 

  • Data Widgets (v 3.8.0) and above https://marketplace.mendix.com/link/component/116540 

 

Configuration

 

  • Place your Data Grid 2 inside the widget
  • create or use existing integer (page variable or any entity attribute) for Datagrid2 @ Bhaviour / "Page size attribute" value should >= 1
  • Connect same attribute to GridSizer (The calculated number of visible rows will be written here)
  • set pageSize attribute @  DG2 value should  >= 1

 

 

 

Releases

Version: 1.0.2
Framework Version: 10.24.0
Release Notes:

bugfixes

3 new attributes

 

Expansion Behavior

Controls how the widget expands:

  • vh: uses the browser viewport height.
  • percentage: uses the available relative space.

Resize Behavior

Controls when recalculation happens:

  • First load: calculates the row count once after the grid has loaded.
  • Continuous: keeps recalculating when the available space or grid content changes.

Minimum row number

Defines the minimum number of rows that should remain visible. The calculated value will not go below this number.

Version: 1.0.1
Framework Version: 10.24.0
Release Notes:

Automatic row calculation based on available space

Support for Data Grid 2

Optimized performance with smart update logic