Adding the Database

To demonstrate how to add a scroll bar to a grid view control, we will need to create a simple web site with a database. For this example, we will be using the infamous Northwind sample database that will be included with the source of the project. To begin, create a new ASP.NET Empty Web Site and:

  1. Right click the project in your solution explorer.
  2. Select Add ASP.NET Folder.
  3. Select App_Data.
  4. Right click the App_Data folder.
  5. Select add existing item…
  6. Select the NORTHWND.MDF database.
  7. Click add.

Next, we need to add a connection string to our database. To do this, open up the Web.Config file for editing and add the following code:

This will simply direct our website to the database.

Creating the Form

Once we have our database added we need to create a web form with our grid view on it that we will use to display the data from our database. To begin:

  1. Right click the project in your solution explorer.
  2. Select add new item…
  3. Select a web form.
  4. Name it ‘Default.aspx’.
  5. Click add.
  6. Open Default.aspx up to source mode.
  7. Add a div with the following style to the web form: ‘overflow-y: scroll; height: 200px’.
  8. Drag and drop a gridview into the div.

Now that we have our gridview, let’s add some data to it. To do this, open up Default.aspx.vb for editing and add the following code to the Page_Load event method:

This code will select the contact name, company name, and address from the customers table of our database. Then, it will bind that data to the grid view.

Once we have this setup you can go ahead and load up the page. Notice that our grid view appears with a scroll bar, but when you scroll down the column headings are lost at the top. We can easily fix this so that our column headings will be stuck at the top by adding in a simple javascript function. To do this, open Default.aspx and add the following code:

This creates the function that will keep our table headings displayed and calls this function in the event that the page is loaded.

Testing

To test this out load up the web site. Ensure that the column headings of our table are displayed when you scroll up and down. This demonstrates how you can easily customize a gridview with a scroll bar to fit pretty much anywhere on your page.

Download Source Files