Here’s perhaps the simplest way to add scroll-ability to your DataGrid. It’s accomplished by adding your DataGrid inside DIV tags, with overflow set to scroll. You’ll probably need to fool around with the width and height for your particular uses, but it’s pretty cool little trick I found in several places, including the ASP.Net/forums. It boils down to these two facts:
If you assign the width of the Div smaller than the DataGrid, you automatically have horizontal scroll bars.
If you make the height of the Div smaller than the height of the DataGrid, then you automatically have vertical scrollbars.
This sample uses the SQL Server managed provider and the Northwind Database with the Products Table. In order to try this on your system, just copy the code directly from the page, paste it into a new page on your computer, change the connection string to match your system and you’re on your way.
To try this with the OleDb managed provider, copy the code and pasted it into our Database Code Conversion Tool before you do the steps listed in the last paragraph.
<%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.SQLClient" %> <html> <head> <meta name="GENERATOR" Content="ASP Express 2.2"> <title>Simple Scrollable DataGrid</title> <script language="VB" runat="server"> Sub Page_Load(Source as Object, E as EventArgs) Dim strConn as string = "server=YourServer;uid=YourUID;pwd=YourPWD;database=Northwind" Dim MySQL as string = "Select Products.ProductName, Products.QuantityPerUnit, " & _ "Products.UnitPrice, Products.UnitsInStock from Products" Dim MyConn as New SQLConnection(strConn) Dim objDR as SQLDataReader Dim Cmd as New SQLCommand(MySQL, MyConn) MyConn.Open() objDR=Cmd.ExecuteReader(system.data.CommandBehavior.CloseConnection) MyDataGrid.DataSource = objDR MyDataGrid.DataBind() End Sub </script> </head> <body> <div id="Layer1" style="position:relative;width:450px; height:300px;overflow: scroll;"> <form runat="server" method="post"> <asp:Datagrid runat="server" Id="MyDataGrid" GridLines="Both" cellpadding="0" cellspacing="0" Headerstyle-BackColor="#8080C0" Headerstyle-Font-Name="Arial" Headerstyle-Font-Bold="True" Headerstyle-Font-Size="12" BackColor="#8080FF" Font-Name="Arial" Font-Size="10" AlternatingItemStyle-BackColor="#DFDFDF" AlternatingItemStyle-Font-Name="Arial" AlternatingItemStyle-Font-Size="10" BorderColor="Black" AutogenerateColumns="False"> <Columns> <asp:BoundColumn DataField="ProductName" HeaderText="ProductName"> </asp:BoundColumn> <asp:BoundColumn DataField="QuantityPerUnit" HeaderText="QuantityPerUnit"> </asp:BoundColumn> <asp:BoundColumn DataField="UnitPrice" HeaderText="UnitPrice"> </asp:BoundColumn> <asp:BoundColumn DataField="UnitsInStock" HeaderText="UnitsInStock"> </asp:BoundColumn> </Columns> </asp:DataGrid> </form> </div> </body> </html>