Datagrid Fix First Column

Content Type: Widget
Categories: User Interface


Datagrid with fixed first column and a horizontal scroll.




Datagrid with fixed first column and a horizontal scroll.

Typical usage scenario

By default, a datagrid keeps al information inside the screen. Which is a good thing until there are so many columns in the screen that it becomes hard to read the data (even on a HD screen).

This is where a horizontal scroll comes in handy.

Features and limitations


View more data than fits your screen while the first column stays fixed as you scroll through the datagrid.


Force the datagrid to become larger than your screen width by giving most columns a fixed width in pixels. This can best be a value that matches the amount of content inside for most situations. If the datagrid is kept in width units in percentages, not much will happen. Fixing the first column doesn't do anything without a scroll.

The widget is not compatible with the new Datagrid 2 widgets!


Vertical scrolling is based on a Mendix default layout and placement inside the 'region-content' (which results in the used class: 'mx-scrollcontainer-center').


Install the widget and place after the desired datagrid.


Add a class name to the datagrid and tell the widget to listen to this class.


none known at this moment.


Version: 1.0.3
Framework Version: 9.6.0
Release Notes: CSS Improvements. More stability
Version: 1.0.2
Framework Version: 9.6.0
Release Notes: Add waitFor helper function
Version: 1.0.1
Framework Version: 9.4.0
Release Notes: Add return to function Add widget icon Remove unused HelloWorldSample
Version: 1.0.0
Framework Version: 8.17.0
Release Notes: Public release of the widget