How to make fixed header GridView scrollable div browser compatible - Asp.Net
C# - Scrollable GridView with fixed headers in Asp .Net
Here in this post I will explain how to make GridView with static header with the browser compatibility. Find the source code below:-
Default.aspx
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_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 id="Head1"
runat="server">
<title>How to
make fixed header GridView scrollable with Jquery - ASP.Net</title>
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function
MakeScrollable(a, b) {
var
c = a.offsetWidth;
var
d = a.offsetHeight;
var
e = new Array;
for
(var f = 0; f < a.getElementsByTagName("TH").length; f++) {
e[f] = a.getElementsByTagName("TH")[f].offsetWidth
}
a.parentNode.appendChild(document.createElement("div"));
var
g = a.parentNode;
var
h = document.createElement("table");
for
(f = 0; f < a.attributes.length; f++) {
if
(a.attributes[f].specified && a.attributes[f].name != "id") {
h.setAttribute(a.attributes[f].name, a.attributes[f].value)
}
}
h.style.cssText = a.style.cssText;
h.style.width = c + "px";
h.appendChild(document.createElement("tbody"));
h.getElementsByTagName("tbody")[0].appendChild(a.getElementsByTagName("TR")[0]);
var
i = h.getElementsByTagName("TH");
var
j = a.getElementsByTagName("TR")[0];
for
(var f = 0; f < i.length; f++) {
var
k;
if
(e[f] > j.getElementsByTagName("TD")[f].offsetWidth)
{
k = e[f]
} else
{
k = j.getElementsByTagName("TD")[f].offsetWidth
}
i[f].style.width = parseInt(k -
3) + "px";
j.getElementsByTagName("TD")[f].style.width = parseInt(k - 3) +
"px"
}
g.removeChild(a);
var
l = document.createElement("div");
l.appendChild(h);
g.appendChild(l);
if
(b.Width > 0) {
c = b.Width
}
var
m = document.createElement("div");
if
(parseInt(d) > b.ScrollHeight) {
c = parseInt(c) + 17
}
m.style.cssText = "overflow:auto;height:" + b.ScrollHeight
+ "px;width:" + c + "px";
m.appendChild(a);
g.appendChild(m)
}(function
(a) {
a.fn.Scrollable = function (b) {
var
c = {
ScrollHeight: 300,
Width: 0,
IsInUpdatePanel: false
};
var
b = a.extend(c, b);
return
this.each(function
() {
var
c = a(this).get(0);
var
d = c.id;
MakeScrollable(c, b);
if
(b.IsInUpdatePanel) {
var e = Sys.WebForms.PageRequestManager.getInstance();
if (e != null) {
e.add_endRequest(function (c, e) {
MakeScrollable(a("#" + d).get(0), b)
})
}
}
})
}
})(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function
() {
$('#<%=GridView1.ClientID
%>').Scrollable({
ScrollHeight: 300,
IsInUpdatePanel: true
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<div style="border: 5px; border-color: Gray;">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
ForeColor="#333333" GridLines="None">
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<Columns>
<asp:BoundField DataField="ContactName" HeaderText="Contact Name" />
<asp:BoundField DataField="City" HeaderText="City" />
<asp:BoundField DataField="Country" HeaderText="Country" />
</Columns>
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#999999" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Default.cs
using System;
using
System.Configuration;
using
System.Data;
using
System.Linq;
using
System.Web;
using
System.Web.Security;
using
System.Web.UI;
using
System.Web.UI.HtmlControls;
using
System.Web.UI.WebControls;
using
System.Web.UI.WebControls.WebParts;
using
System.Xml.Linq;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
if
(!IsPostBack)
{
DataSet
ds = new DataSet();
ds.ReadXml(Server.MapPath("~/App_Data/Customers.xml"));
GridView1.DataSource = ds;
GridView1.DataBind();
}
}
}
Download the source code click here ..
How to make fixed header GridView scrollable div browser compatible - Asp.Net
Reviewed by Ravi Kumar
on
12:18 PM
Rating:
Reviewed by Ravi Kumar
on
12:18 PM
Rating:
Hi Ravi, Do you have any sample in Vb.net? any help for this..thanks..
ReplyDeleteHello Grace,
Deletefind the source code below in vb.net
Imports System.Data
Partial Class DefaultVB
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
Dim ds As New DataSet()
ds.ReadXml(Server.MapPath("~/App_Data/Customers.xml"))
GridView1.DataSource = ds
GridView1.DataBind()
End If
End Sub
End Class
you can also download the sample code from https://sites.google.com/site/aspdotnetcsharpcodes/downloads/GridViewFixedHeaderScrollableVBplus.rar?attredirects=0&d=1
Thanks You So much.......one week stuck for this task.....finally i got the solution..... thanks...
ReplyDelete