ASP .NET Datagrid with scrollbars and fixed headers

Adding a ScrollBar

Enclose your datagrid in a <div> tag and set the overflow style to auto/scroll. For those of you who prefer to do it through the design mode, there is an excellent step-by-step instructions at this link:

http://www.dotnetjunkies.com/HowTo/E833AEAE-8D7E-4D1F-821B-D848D965F70A.dcik

Now my datagrid had a neat little scrollbar and I could fit it into the browser with losing sight of the input information I had entered above. But I had one more problem. The Column headers would not stay still and would scroll away. How do I fix this?

Fixed Headers

The best way to achieve this is by using style sheets (I have seen around suggestions like adding a table which has your column names as the columns for this table and you stick it on top of the datagrid, and you set the datagrid header visible property to false. Trust me, CSS is way cooler than that).
Add this style to the CSS class or to the HTML code itself.

<style type="text/css">
    .DataGridFixedHeader { POSITION: relative; ; TOP: expression(this.offsetParent.scrollTop); BACKGROUND-COLOR: white }
</style>

And refer this style in your ASP datagrid, by setting this value to the CSSClass property of the HeaderStyle of the datagrid. For ex:

<asp:datagrid id="resultGrid" tabIndex="-1" runat="server" Width="900px" Height="224px" BorderStyle="None">  
    <HeaderStyle Font-Names="Arial" Font-Bold="True" HorizontalAlign="Center" ForeColor="White" BorderStyle="Solid"
        BorderColor="Black" VerticalAlign="Bottom" BackColor="LightSlateGray" CssClass="DataGridFixedHeader"></HeaderStyle>
..........
</asp:datagrid>

You can set this property from the design mode too by navigating to the HeaderStyle property.