Scrolling Data Grids..

Hi I have a page in my application that has two data grids. The data grids have a limit of 20 data sets per page and can be seen by clicking the next arrow. I was wondering is there a way to scroll down the data grids in their own little boxes or something like that on the same page. If I didn't made myself clear, what I need is two scrollable data grids in one page. The two data grids have scroll down button and slide in its own, regardless of the page scroll down. Is there a possible way to do this? Help with explanations of how to do is greatly appreciated..   Regards
2 answers
Hi Dilan,

There is a out of the box scroll container available in Mendix.
It also works as a layout element, allowing you to place two grids side by side.

Unfortunately, the scroll container does not play nice with the responsive design layouts that are available. If you are using Sidebar layouts you might need to tweek it a bit before you add you scroll container.

Hope this helps,



End result



In addition to Scroll Containers, you can also accomplish this with CSS.  Apply the following CSS (or simliar) to the Style field on the Common tab of the datagrid properties:

max-height: 250px; 
overflow-y: scroll;
overflow-x: hidden;

This will make the grid a box with a height of 250px and a vertical scroll bar.  You can make the grid taller or shorter as required in your application by changing the max-height.


P.S. if you plan to use this technique in many places in your application, you could create a custum css class in your theme.