Adding the DatabaseTo 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.
Need help with cloud hosting? Try Server Intellect. We used them for our cloud hosting services and we are very happy with the results!
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:
Code Block
Ask a Question
Download Source
Web.Config
The connection string to our database.
<connectionStrings>
    <add name="ConnectionString" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\NORTHWND.mdf;Integrated Security=True;User Instance=True" providerName="System.Data.SqlClient"/>
</connectionStrings>
This will simply direct our website to the database.
Creating the FormOnce 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.
We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.
Now that we have our gridview, let’s add some data to it. To do this, open up Default.aspx.cs for editing and add the following code to the Page_Load event method:
Code Block
Ask a Question
Download Source
Default.aspx.cs
The Page_Load event method.
if (!IsPostBack)
{
    using (SqlConnection con = new SqlConnection(WebConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString))
    {
        DataSet ds = new DataSet();
        SqlDataAdapter da = new SqlDataAdapter("SELECT ContactName,CompanyName,Address FROM Customers", con);
        da.Fill(ds, "Customers");
        GridView1.Attributes.Add("style", "table-layout:fixed");
        GridView1.AutoGenerateColumns = true;
        GridView1.DataSource = ds;
        GridView1.DataBind();
    }
}
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:
Code Block
Ask a Question
Download Source
Default.aspx
The javascript function to keep our column headings at the top of our grid view.
<script type="text/javascript">
    function s() 
    {
        var t = document.getElementById("<%=GridView1.ClientID%>");
        var t2 = t.cloneNode(true);
        for (i = t2.rows.length - 1; i > 0; i--)
            t2.deleteRow(i);
        t.deleteRow(0);
        a.appendChild(t2);
    }
    window.onload = s;
</script>
This creates the function that will keep our table headings displayed and calls this function in the event that the page is loaded.
If you’re ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.
TestingTo 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. 
GridView ScrollBar asp4 cs