In this example I'm explaining how to create Fixed Header Scrollable Gridview Using jQuery in ASP.NET. add JQuery library and fixed header scrollable gridview plugin in solution and add reference to it between <head></head> section of HTML source of aspx page.
I have used northwind database to populate gridview.
you can also create Scrollable GridView With Fixed Headers Using CSS if you don't want to use jQuery or JavaScript.
<head id="Head1" runat="server">
<title>jQuery Fixed Header Scrollable GridView</title>
<script src="jquery-1.4.1.min.js" type="text/javascript">
</script>
<script src="ScrollableGrid.js" type="text/javascript">
</script>
</head>
Add this JQuery function call between <head></head> section
<script type="text/javascript" language="javascript">$(document).ready(
function () {
$(
'#<%=fixedHeaderScrollableGridView.ClientID %>').Scrollable();
}
)
</script>
Add gridview on aspx page and populate it.
<asp:GridView ID="fixedHeaderScrollableGridView" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" DataKeyNames="ProductID" AllowPaging="True" PageSize="30">
<Columns>
<asp:BoundField DataField="ProductID" HeaderText="ProductID" />
<asp:BoundField DataField="ProductName" HeaderText="ProductName" />
<asp:BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit" />
<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" />
<asp:BoundField DataField="CategoryName" HeaderText="CategoryName" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT [ProductID], [ProductName], [QuantityPerUnit], [UnitPrice], [CategoryName] FROM [Alphabetical list of products]"></
asp:SqlDataSource>
Build and Run the application.
If your application uses Master Page then add reference to library and plugin in head ContentPlaceHolder of master page
<head id="Head1" runat="server">
<title>Fixed Header Scrollable GridView With Master Page</title>
<asp:ContentPlaceHolder ID="head" runat="server">
<script src="jquery-1.4.1.min.js" type="text/javascript" />
<script src="ScrollableGrid.js" type="text/javascript" />
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form2" runat="server">
Add Master Page Content And Design Here
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
Call Scrollable() function of jquery plugin in Head ContentPlaceHolderID of content page.
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<script type="text/javascript" language="javascript">
$(document).ready(
function () {
$(
'#<%=fixedHeaderScrollableGridView.ClientID %>').Scrollable();
})
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div>
Put Gridview Source Here
</div>
</asp:Content>
