Home » Creating a scrollable DataGrid

Creating a scrollable DataGrid

When you create a DataGrid, it would be often good to specify its height, and have the DataGrid show a scrollbar if the content is longer than the given height. This would allow to make up a fixed layout that doesn’t get messed up if there are a few or a lot of lines/records to show. The DataGrid control has a Height property, but I find it misleading: it fixes the minimum height the grid can have, i.e. the DataGrid creates taller rows if there are a few records to show, so that it reaches the specified total height, but the value is not respected if the records being shown require more space.

If you’re targeting IE or a browser that supports the

tag and CSS, there is a simple and really working solution though. Wrap the DataGrid declaration inside a DIV, as follows:

...

This creates an area (the div) with a fixed height of 250 pixels that automatically creates a scrollbar (the “overflow: auto” style) if its inner content (the DataGrid) is not completely visible. Quick and easy, isn’t it?

The only problem is that this makes the entire DataGrid scroll, including its header and the pagination bar. If you want to avoid this and create a better result, you should create a DataGrid without header and pagination bars, put it into the scrollable div, and then create custom header and pagination bars above and below the div.

About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.