In this article I will show you how you can bind a grid view
and display the gridview data with fixed header using asp.net, C#, and jquery. so when you scroll the data on
that case header of the gridview will remains same but body part will scroll. This will also let you know about scrollable gridview with fixed headers in asp.net c# vb.net.
Some of my previous articles are as follows:
File
Upload with ASP.NET | How to Use FileUpload Control in ASP.Net Using
C#.Net,VB.Net | Upload File in Asp.net and Save in Folder, How
To Use FileUpload Control in Update Panel For Ajax File Upload In Asp.Net Using
C#, How
to Get the Full Path of FileUpload Control in Asp.Net, Ajax
FileUpload Control In Asp.Net or Multiple FileUpload With Progress Example in
Asp.Net Using C#.Net.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ProjectDemo_Asp.et.Default"
%>
<!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">
<title>GridView
With Fixed Headers in Asp.Net Using C# and jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script language="javascript">
$(document).ready(function () {
/*Code
to copy the gridview header with style*/
var
gridHeader = $('#<%=GridView1.ClientID%>').clone(true);
/*Code
to remove first ror which is header row*/
$(gridHeader).find("tr:gt(0)").remove();
$('#<%=GridView1.ClientID%> tr th').each(function (i) {
/*
Here Set Width of each th from gridview to new table th */
$("th:nth-child("
+ (i + 1) + ")", gridHeader).css('width', ($(this).width()).toString()
+ "px");
});
$("#controlHead").append(gridHeader);
$('#controlHead').css('position', 'absolute');
$('#controlHead').css('top', $('#<%=GridView1.ClientID%>').offset().top);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<h3>
GridView With Fixed Headers in Asp.Net
Using C# and jQuery</h3>
<div style="width: 450px;">
<div id="controlHead">
</div>
<div style="height: 180px; overflow: auto">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" EmptyDataText="There are no data records to display."
BorderStyle="Solid">
<Columns>
<asp:BoundField DataField="author_name" HeaderText="NAME" />
<asp:BoundField DataField="publisher_name" HeaderText="PUBLISHER NAME"
/>
<asp:BoundField DataField="publication_year" HeaderText="PUBLISH
YEAR" />
<asp:BoundField DataField="retail_price" HeaderText="PRICE" />
</Columns>
<HeaderStyle BackColor="#66CCFF" />
</asp:GridView>
</div>
</div>
</form>
</body>
</html>
|
Now we will bread the above code in different parts. In
above code I have used jquery code to get the scrolling effect.
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script language="javascript">
$(document).ready(function () {
/*Code
to copy the gridview header with style*/
var
gridHeader = $('#<%=GridView1.ClientID%>').clone(true);
/*Code
to remove first ror which is header row*/
$(gridHeader).find("tr:gt(0)").remove();
$('#<%=GridView1.ClientID%> tr th').each(function (i) {
/*
Here Set Width of each th from gridview to new table th */
$("th:nth-child("
+ (i + 1) + ")", gridHeader).css('width', ($(this).width()).toString()
+ "px");
});
$("#controlHead").append(gridHeader);
$('#controlHead').css('position', 'absolute');
$('#controlHead').css('top', $('#<%=GridView1.ClientID%>').offset().top);
});
</script>
|
Now we will check the code to bind the data.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.OleDb;
using System.Data;
namespace ProjectDemo_Asp.et
{
public partial class Default : System.Web.UI.Page
{
public
string connectionstring = "Provider=Microsoft.ACE.OLEDB.12.0;Data
Source=|DataDirectory|\\bookstore.mdb;Persist Security Info=False;";
protected void
Page_Load(object sender, EventArgs e)
{
DataTable
_objdt = new DataTable();
_objdt = GetDataFromDataBase();
if
(_objdt.Rows.Count > 0)
{
GridView1.DataSource = _objdt;
GridView1.DataBind();
}
}
/// <summary>
/// Function for binding retribing the data from database
/// </summary>
/// <returns></returns>
public
DataTable GetDataFromDataBase()
{
DataTable
_objdt = new DataTable();
string
querystring = "select * from Books;";
OleDbConnection
_objcon=new OleDbConnection(connectionstring);
OleDbDataAdapter
_objda = new OleDbDataAdapter(querystring,
_objcon);
_objcon.Open();
_objda.Fill(_objdt);
return
_objdt;
}
}
}
|
Now we will run the page to check the output.
About the Author
//this code testing in Firefox ver.39.0
ReplyDelete$(document).ready(function () {
$(window).scroll(function () {
var fixedheader = $('.FixedHeader');
fixedheader.each(function (index, element) {
var header = $(this);
if ($(window).scrollTop() >= $(header).position().top) {
var td = $('tbody tr:gt(1) td').eq(index);
$(header).css({ 'position': 'fixed', 'top': '5px', 'left': $(td).position().left, 'width': $(td).width(), 'text-align': $(td).css('text-align') });
}
else {
$(this).css({ 'position': 'relative', 'top': '0px', 'left': '0px', 'width': 'auto' });
}
});
});
ReplyDelete.FixedHeader {
position: relative;
background-color: #507CD1;
font: bold small verdana;
color: white;
}
Code works but the the resulting fixed header is not responsive
ReplyDeleteCode works but when i used in my project its not work. in ControlHead div header does not copy ...
ReplyDeletethe header comes in the footer how to solve it .. the header doesn't freeze
ReplyDeletePlease share your code
Delete