UI Tip
LANGUAGE: HTML | All .NET Languages
ASP.NET VERSIONS: 1.0 | 1.1
Add Scrollbars to Your DataGrids
How do you give an ASP.NET control scrollbars when it has no scroll-related properties? Here's how.
By Brad McCabe
One of the most common questions I get is, "How can you make an ASP.NET control have scrollbars when there are no scroll-related properties on the control?" This is usually requested in a scenario where you have a large amount of data on a DataGrid and you don't want to use pagination.
The answer to this question is to put two lines of HTML around the ASP.NET control. If you wrap your control in a DIV tag you can use the overflow style attribute to have the browser render scroll bars when the HTML inside of the DIV tag exceeds the specified size, as shown in Figure 1.
Figure 1. The way to put scrollbars
on a DataGrid control isn't to use ASP.NET at all. Instead, put a good
old-fashioned DIV tag around the control.
The following code will render the DataGrid inside of an area that is 400 pixels wide and 500 pixels high:
Once the resulting HTML from the DataGrid control exceeds this space, the browser will render either horizontal or vertical scrollbars as needed as show in the figure.
Sometimes the simplest answer to a complex ASP.NET problem lies in the simple behaviors of an HTML element. ASP.NET does not allow you to simply throw out your JavaScript knowledge and understanding, nor does ASP.NET allow to you forget - or never learn - HTML. In fact, knowledge of basic HTML and JavaScript is often the difference between an average ASP.NET developer and an expert.
The sample code in this article is available for download.
Got a UI question, tip, or idea for a topic you'd like me to cover? I'd love to hear it. E-mail me at [email protected].
Brad McCabe is the technical evangelist for Infragistics. Brad also has been a systems architect and consultant for Verizon Communications and many other clients, and he was a leading .NET evangelist within Ajilon Consulting. His primary interests include ASP.NET, Windows CE .NET, .NET Compact Framework, and Microsoft's networking technologies. E-mail him at [email protected].
