Scrollable Gridview with Fixed Header
Today we are going to discuss about the topic how to create a Scrollable Gridview with Fixed Header.It means to create a gridview and fixing the scrolling for it and making the header fixed to a gridview.
JQuery to fix for the GridView:
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/ScrollableGridPlugin.js" type="text/javascript"></script>
<title>Scrollable Gridview with Fixed Header</title>
<script type="text/javascript" language="javascript">
$(document).ready(function ()
{
$('#<%=gvSampleFixedHeader.ClientID %>').Scrollable();
}
)
</script> Below is the code to create a gridview and use the Jquery to fix the scrolling for a GridView.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication12.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/ScrollableGridPlugin.js" type="text/javascript"></script>
<title>Scrollable Gridview with Fixed Header</title>
<script type="text/javascript" language="javascript">
$(document).ready(function ()
{
$('#<%=gvSampleFixedHeader.ClientID %>').Scrollable();
}
)
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView runat="server" ID="gvSampleFixedHeader" AutoGenerateColumns="false">
<RowStyle BackColor="#EFF3FB" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="StudentID" HeaderText="Student ID" />
<asp:BoundField DataField="StudentName" HeaderText="Student Name" />
<asp:BoundField DataField="FatherName" HeaderText="Father Name" />
<asp:BoundField DataField="City" HeaderText="City" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Data.SqlClient;
using System.Data;
namespace WebApplication12
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
gvSampleFixedHeader.DataSource = bindData();
gvSampleFixedHeader.DataBind();
}
public DataTable bindData()
{
DataTable table = new DataTable();
table.Columns.Add("StudentID", typeof(int));
table.Columns.Add("StudentName", typeof(string));
table.Columns.Add("FatherName", typeof(string));
table.Columns.Add("City", typeof(string));
table.Columns.Add("Country", typeof(string));
table.Rows.Add(101, "Satwik", "Mohan", "Hyderabad", "India");
table.Rows.Add(102, "Siddu", "Mahesh", "Hyderabad", "India");
table.Rows.Add(104, "Sravan", "Sujan", "Hyderabad", "India");
table.Rows.Add(105, "Nishanth", "Venkat", "Hyderabad", "India");
table.Rows.Add(106, "Tejaswi", "Veera", "Hyderabad", "India");
table.Rows.Add(107, "Sushanth", "Swaroop", "Secbad", "India");
table.Rows.Add(108, "Swetha", "Chanti", "Secbad", "India");
table.Rows.Add(109, "Niraja", "Venkat", "Secbad", "India");
table.Rows.Add(110, "Nisha", "Naga", "Secbad", "India");
table.Rows.Add(111, "Satwik", "Mohan", "Hyderabad", "India");
table.Rows.Add(112, "Siddu", "Mahesh", "Hyderabad", "India");
table.Rows.Add(114, "Sravan", "Sujan", "Hyderabad", "India");
table.Rows.Add(115, "Siddartha", "Mahesh", "Hyderabad", "India");
table.Rows.Add(116, "Sushanthi", "Swaroop", "Secbad", "India");
table.Rows.Add(117, "Nisha", "Naga", "Secbad", "India");
table.Rows.Add(101, "Naveen", "Reddy", "Hyderabad", "India");
return table;
}
}
}
Below is the screen shot.
I get the same error as Jeremy. I have the AjaxControlToolKit installed and the plasma web site that comes with it runs fine. Also, this project complained that it had no reference to the AjaxControlToolKit the first time so I had to add it. After adding it, it finds the reference, but none of the script files (if I comment out the reference to AjaxControlToolKit.Common.Common.js, then it just fails on the next reference to a script from the Toolkit.I've not been able to find any solutions to this problem yet. Any ideas on what we need to do?