How to make Scrollable GridView with Fixed Headers in ASP.Net

Some time there would be requirement of scrollable gridview, but no pagination, at that time we have to take help of traditional HTML and CSS property DIV.


by setting closing gridview in DIV and by setting its height we can make it very easily. Highlighted DIV is performing same functionality.
Step 1.
Make a Table named tbl_ProductInformation in SQL, Columns are as follows.

1.ProductID(int),
2.ProductName(varchar)
3.ProductCompany(varchar)
4.ProductPrice(varchar)


Enter some dummy data to this table.
Step 2.
Make HTML design for showing gridview data as follows, and you can have image in header by saving it to our solution and and you can give URL of it. Highlighted code is url of this image.



<form id="form1" runat="server">
<div style="background-image: url(Image/Capture.PNG); background-repeat: repeat-x; height: 30px; width: 600px; margin: 0; padding: 0">
<table border="1" id="tblHeader"
style="font-family: Arial; font-size: 10pt; width: 600px; color: white; border-collapse: collapse; height: 100%;">
<tr>
<td style="width: 150px; text-align: center">ProductID</td>
<td style="width: 150px; text-align: center">ProductName</td>
<td style="width: 150px; text-align: center">ProductCompany</td>
<td style="width: 150px; text-align: center">ProductPrice</td>
</tr>
</table>
</div>
<div style="height: 100px; width: 617px; overflow: auto;">
<div>
<asp:GridView ID="gv" runat="server"
AutoGenerateColumns="false" Font-Names="Arial" ShowHeader="false"
Font-Size="10pt" AlternatingRowStyle-BackColor="#33CCFF">
<Columns>
<asp:BoundField ItemStyle-Width="150px" DataField="ProductID" />
<asp:BoundField ItemStyle-Width="150px" DataField="ProductName" />
<asp:BoundField ItemStyle-Width="150px" DataField="ProductCompany" />
<asp:BoundField ItemStyle-Width="150px" DataField="ProductPrice" />
</Columns>
</asp:GridView></div></div></form>
By closing gridview in a DIV and by setting its height we can make it very easily. Highlighted DIV is performing the scrolling functionality for our gridview.

Step 3.
In code behind file we have to write some code just for showing gridview data and that's it.
String str = "Data Source=JITENDRA-PC\\SQLEXPRESS;Initial Catalog=Vaibhav_Task;Integrated Security=True";

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindData();
}
}

private void BindData()
{
DataSet ds = new DataSet();
using (SqlConnection con = new SqlConnection(str))
{
con.Open();
SqlCommand cmd = new SqlCommand("select * from tbl_ProductInformation", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(ds);
con.Close();
gv.DataSource = ds;
gv.DataBind();
}
}
Output -