ASP.NET - scroll bar for gridview - Asked By msakt on 15-May-12 06:03 AM

how to set scroll bar gridview...if i sroll dont hide header of gridview just row only scroll
DL M replied to msakt on 15-May-12 06:10 AM
Use following code.

        <asp:Panel ID="pnlGridView" runat="server" ScrollBars="Auto" Width="100%" Height="350px">
          <asp:GridView ID="gvData" runat="server">
            your GridView items
kalpana aparnathi replied to msakt on 15-May-12 06:13 AM

One Best and easy way for scrollbar in gridview is that to add the gridview to an asp:Panel control, and set the desired Width and Height for the Panel with ScrollBars property set to Vertical.

RAJASEKHAR RAJENDRAN replied to msakt on 15-May-12 06:14 AM
Hi msakt, 

Solve your Issue as in the code shown Below.

Html Source of the page look like this
<form id="form1" runat="server">
<asp:Panel ID="Panel1" runat="server" Height="200px"
             Width="200px" ScrollBars="Vertical">
<asp:GridView ID="GridView1" runat="server"
        AutoGenerateColumns="False" DataKeyNames="ID"
<asp:BoundField DataField="ID" HeaderText="ID"
        ReadOnly="True" SortExpression="ID" />
<asp:BoundField DataField="Name" HeaderText="Name"
                 SortExpression="Name" />
<asp:BoundField DataField="Location" HeaderText="Location"
               SortExpression="Location" />
<HeaderStyle CssClass="header"Height="20px" />
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT [ID], [Name], [Location] FROM [Details]">
Now Add below mention css style in the head section of page
<head runat="server">
<title>Creating scrollable GridView with fixed headers</title>
<style type="text/css">

the above code Should Run, but there would be some bug, 
that is the table contents hide with the Headers
To Solve the bug, perform the below.

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

        if (e.Row.RowType == DataControlRowType.DataRow)
            if(e.Row.RowIndex == 0)

I Hope the above Solves,

Thanks & Regards,

DL M replied to msakt on 15-May-12 06:39 AM

Add ScrollBar to GridView with ASP.NET.


<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--)





window.onload = s;




Dim con As New SqlConnection(WebConfigurationManager.ConnectionStrings("ConnectionString").ConnectionString)

Dim cmd As New SqlCommand("SELECT ContactName,CompanyName,Address FROM Customers", con)

If (Not IsPostBack) Then

Using con


GridView1.DataSource = cmd.ExecuteReader()


End Using

End If

Web.Config Connection String

    <add name="ConnectionString" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\NORTHWND.mdf;Integrated Security=True;User Instance=True" providerName="System.Data.SqlClient"/>
Jitendra Faye replied to msakt on 15-May-12 06:42 AM
simply way...
<style type="text/css">
  .DataGridFixedHeader { POSITION: relative; ; TOP: expression(this.offsetParent.scrollTop); BACKGROUND-COLOR: white }
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>

ref this link...
Somesh Yadav replied to msakt on 15-May-12 07:32 AM
try this,