In this article I will explain how to implement scrollable gridview with fixed header in asp.net using JQuery. GridView control of ASP.NET 4.5.1 makes our task much simpler as compared to HTML tables. But one problem which I always faced with GridView control is of scrolling headers. I tried several forums and websites, but didn’t come up with a good solution. GridView doesn’t have the ability to scroll. But if the GridView contains the larger number of rows or columns (say more than 100 rows and 15 columns), we want it to have scrollbars.
Now it is time to see all the activity in detail :
- create a database in the SQL ServerCreate an ASP.NET website.
- Create jquery-1.4.1.min.js and ScrollableGridPlugin.js and write this code in the header section. copy and paste it inside <Head>.
These script files by using these files we can manage the GridView header fixed postion.
<scripttype="text/javascript"src="Scripts/jquery-1.4.1.min.js"></script>
<scripttype="text/javascript"src="Scripts/ScrollableGridPlugin.js"></script>
- Write the jQuery code that is given below.
scripttype="text/javascript">
$(document).ready(function () {
$('#<%=GridView1.ClientID %>').Scrollable();
});
</script>
- The next step is to create a new HTML table in HeaderDiv which will contain the new header for the GridView. This job will be done by a JavaScript function (say CreateGridHeader()). This JavaScript function also sets theHeaderDiv style as per the DataDiv and new HTML table style as per GridView style and also we will hide the original header of GridView. This function will be called every time after filling theGridView with data as well as on the Page Load.
created in the Page Load Default.aspx page like this :
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default2.aspx.cs"Inherits="Default2" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Scrollable GridView With a Fixed Header Using jQuery</title>
<scripttype="text/javascript"src="Scripts/jquery-1.4.1.min.js"></script>
<scripttype="text/javascript"src="Scripts/ScrollableGridPlugin.js"></script>
<scripttype="text/javascript">
$(document).ready(function () {
$('#<%=GridView1.ClientID %>').Scrollable();
});
</script>
<body>
<formid="form1"runat="server">
<asp:GridViewrunat="server"ID="GridView1"AutoGenerateColumns="false">
<RowStyleBackColor="#EFF3FB"/>
<FooterStyleBackColor="#507CD1"Font-Bold="True"ForeColor="White"/>
<PagerStyleBackColor="#2461BF"ForeColor="White"HorizontalAlign="Center"/>
<HeaderStyleBackColor="#507CD1"Font-Bold="True"ForeColor="White"/>
<AlternatingRowStyleBackColor="White"/>
<Columns>
<asp:BoundFieldDataField="id"HeaderText="Id"/>
<asp:BoundFieldDataField="name"HeaderText="Name"/>
<asp:BoundFieldDataField="salary"HeaderText="Salary"/>\
<asp:BoundFieldDataField="addres"HeaderText="Address"/>
</Columns>
</asp:GridView>
</form>
</body>
</html>
- Binding the GridView with a DataTable objectin the code behind file of Default.aspx page.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
publicpartialclassDefault2 : System.Web.UI.Page
{
protectedvoid Page_Load(object sender, EventArgs e)
{
SqlConnection con = newSqlConnection(@"Data Source=.;Initial Catalog=akshay;Persist Security Info=True;User ID=sa;Password=wintellect";
SqlDataAdapter adap = newSqlDataAdapter("select * from Person",con);
DataSet ds=newDataSet();
adap.Fill(ds,"Person");
GridView1.DataSource = ds.Tables["Person"];
GridView1.DataBind();
GridView1.UseAccessibleHeader = true;
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
}
}
- Run the Page by f5, you will see that the Header and Footer is fixed when you scrolling. You are now ready with the GridView with fixed headers.
If you looking for windows web hosting services who support ASP.Net 4.5.1 please visit our Site ASPHostPortal.com