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.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin


The Latest

your company's audio

4 Areas of Your Company Where Your Audio Really Matters

Your company probably relies on audio more than you realize. Whether you’re creating a spoken text message to a colleague or giving a speech, you want your audio to shine. Otherwise, you could cause avoidable friction points and potentially hurt your brand reputation. For example, let’s say you create a

chrome os developer mode

How to Turn on Chrome OS Developer Mode

Google’s Chrome OS is a popular operating system that is widely used on Chromebooks and other devices. While it is designed to be simple and user-friendly, there are times when users may want to access additional features and functionality. One way to do this is by turning on Chrome OS

homes in the real estate industry

Exploring the Latest Tech Trends Impacting the Real Estate Industry

The real estate industry is changing thanks to the newest technological advancements. These new developments — from blockchain and AI to virtual reality and 3D printing — are poised to change how we buy and sell homes. Real estate brokers, buyers, sellers, wholesale real estate professionals, fix and flippers, and beyond may