- Open Visual Studio 2012
- File > New > Website
- Visual basic or Visual C# > ASP.NET Web Site
- Website > Add New Item > Web Form
Write following tags in between head tag of aspx page
script>
script>
script>
I have all these three files in “Scripts” folder. First is the jQuery file, second and third are JavaScript files which have the code for Scrollable GridView.
6.Now add another script tag in between head tag and write code below
<script type="text/javascript">
$(document).ready(function () {
jQuery('table').Scrollable(300, 700);
});
</script>
This jQuery code has function which calls a function in jscrollable.js library which internally uses the scrollabletable.js to fix the header and make GridView scrollable.
7.Write code below in between div tag
<asp:GridView ID="gvFixedHeader" runat="server" DataSourceID="SqlDataSource1"
AutoGenerateColumns="False" DataKeyNames="EmployeeID" OnPreRender="gvFixedHeader_PreRender">
<Columns>
<asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID"/>
<asp:BoundField DataField="FirstName" HeaderText="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="Title" HeaderText="Title" />
<asp:BoundField DataField="City" HeaderText="City" />
<asp:BoundField DataField="State" HeaderText="State" />
</ Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnString %>"
<SelectCommand="SELECT [EmployeeID], [FirstName], [LastName], [Title], [City], [State] FROM [Employees]">
</asp:SqlDataSource>
Here I am using a GridView and added columns into it and set the AutoGenerateColumns false. I am also using a SQLDataSource to connect to database and get the data.
8. Here is the complete code in aspx page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>title>
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js" >script>
<script src="Scripts/webtoolkit.jscrollable.js" type="text/javascript">script>
<script src="Scripts/webtoolkit.scrollabletable.js" type="text/javascript">script>
<script type="text/javascript">
$(document).ready(function () {
jQuery('table').Scrollable(300, 700);
});
</ script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvFixedHeader" runat="server" DataSourceID="SqlDataSource1"
AutoGenerateColumns="False" DataKeyNames="EmployeeID" OnPreRender="gvFixedHeader_PreRender">
<Columns>
<asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID"/>
<asp:BoundField DataField="FirstName" HeaderText="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="Title" HeaderText="Title" />
<asp:BoundField DataField="City" HeaderText="City" />
<asp:BoundField DataField="State" HeaderText="State" />
</Columns>
</ asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnString %>"
<SelectCommand="SELECT [EmployeeID], [FirstName], [LastName], [Title], [City], [State] FROM [Employees]">
</asp:SqlDataSource>
</div>
</ form>
</body>
</html>
- Now add a PreRender event in vb or cs file
C#
protected void gvFixedHeader_PreRender(object sender, EventArgs e)
{
gvFixedHeader.UseAccessibleHeader = true;
gvFixedHeader.HeaderRow.TableSection = TableRowSection.TableHeader;
}
VB.NET
Protected Sub gvFixedHeader_PreRender(sender As Object, e As EventArgs)
gvFixedHeader.UseAccessibleHeader = True
gvFixedHeader.HeaderRow.TableSection = TableRowSection.TableHeader
End Sub
- Press F5 and see the result
