Description:-
In this example we explain that how to display
Gridview with Fixed Header and scrollbar in asp.net using jquery. Or scrollable Gridview with Fixed
header in asp.net.
We all know that Gridview is the most important control in Asp.Net to display data in table format. So if we have a large number of record that we want to display to the user so first we will make gridview with scrollable because of small portion of the webpage.the issue is solved but main problem is that Gridview Header will remain at the top always. So in simple scollbar the griview header will not display at top when you scroll the gridview to show next records.
So how to scroll only body of the gridview and header will remain same at top. To do this here we demonstrate display gridview with fixed header using jquery in asp.net
We all know that Gridview is the most important control in Asp.Net to display data in table format. So if we have a large number of record that we want to display to the user so first we will make gridview with scrollable because of small portion of the webpage.the issue is solved but main problem is that Gridview Header will remain at the top always. So in simple scollbar the griview header will not display at top when you scroll the gridview to show next records.
So how to scroll only body of the gridview and header will remain same at top. To do this here we demonstrate display gridview with fixed header using jquery in asp.net
Dynamically Bind Data in Ajax Accordion Panel Bind Data to Accordion from databse
Restrict the size of File when Uploaded How to Restrict the size of File when uploaded by user
Default3.aspx:-
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!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 id="Head1" runat="server">
<title>GridView
With Fixed Headers in Asp.Net with 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 = $('#<%=gv_employee.ClientID%>').clone(true);
/*Code
to remove first ror which is header row*/
$(gridHeader).find("tr:gt(0)").remove();
$('#<%=gv_employee.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', $('#<%=gv_employee.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: 70px; overflow: auto">
<asp:GridView ID="gv_employee" runat="server" AutoGenerateColumns="False" EmptyDataText="There are no data records to display."
BorderStyle="Solid">
<Columns>
<asp:BoundField DataField="Emp_ID" HeaderText="Emp_ID" />
<asp:BoundField DataField="Emp_name" HeaderText="Emp_name" />
<asp:BoundField DataField="Address" HeaderText="Address" />
</Columns>
<HeaderStyle BackColor="#66CCFF" />
</asp:GridView>
</div>
</div>
</form>
</body>
</html>
Default3.aspx.cs:-
using System;
using System.Data;
using
System.Configuration;
using
System.Collections;
using
System.Collections.Generic;
using System.Web;
using
System.Web.Security;
using System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Web.UI.WebControls.WebParts;
using
System.Web.UI.HtmlControls;
public partial class Default3 : System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
if
(!IsPostBack)
{
DataTable
dt = new DataTable();
dt.Columns.Add("Emp_ID");
dt.Columns.Add("Emp_name");
dt.Columns.Add("Address");
DataRow
dr = dt.NewRow();
dr[0] = 1;
dr[1] = "kirit";
dr[2] = "Ahmedabad";
dt.Rows.Add(dr);
DataRow
dr1 = dt.NewRow();
dr1[0] = 2;
dr1[1] = "pintu";
dr1[2] = "Rajkot";
dt.Rows.Add(dr1);
DataRow
dr2 = dt.NewRow();
dr2[0] = 3;
dr2[1] = "Rahul";
dr2[2] = "surat";
dt.Rows.Add(dr2);
DataRow
dr3 = dt.NewRow();
dr3[0] = 4;
dr3[1] = "Mayur";
dr3[2] = "surat";
dt.Rows.Add(dr3);
DataRow
dr4 = dt.NewRow();
dr4[0] = 4;
dr4[1] = "sandip";
dr4[2] = "Dhoraji";
dt.Rows.Add(dr4);
DataRow
dr5 = dt.NewRow();
dr5[0] = 5;
dr5[1] = "Jayesh";
dr5[2] = "Junagadh";
dt.Rows.Add(dr5);
gv_employee.DataSource = dt;
gv_employee.DataBind();
}
}
}
0 comments:
Post a Comment