Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


Tip of the Day
Language: VB7
Expertise: Intermediate
Sep 1, 2003

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 <div> tag and CSS, there is a simple and really working solution though. Wrap the DataGrid declaration inside a DIV, as follows:


<div style="height: 250px; overflow: auto;">
   <asp:DataGrid runat="server" ...>
      ...
   </asp:DataGrid>
</div>
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.

Marco Bellinaso
 
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap