Menu
I'm attempting to implement a freeze/fixed header pane to my gridview. The gridview works fine as does rendering it into this solution. When this page first renders the page looks perfect. However, when I attempt to scroll the information the background color header bar scrolls up along with the rest of the data. The only thing that is frozen is the text headers of the gridview but the background is transparent as the gridview scrolls.
I've included the important data of this page. However, if more information needs to be added to the code below, please let me know. I've attempted to add/tweak the javascript, css, gridview, and C# settings with no luck. I'm stumped.
Note: This is for IE 9.
Page Template info...
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Cosmetic.Wrapper.cs" Inherits="Cosmetic_Wrapper" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
(other nonessential header garbage - If you really need this let me know)
<asp:ContentPlaceHolder runat="server" ID="Header"
<script src="path/to/jquery-2.0.3.min.js"></script>
<script src="path/to/jquery-2.0.3.js"></script>
<script language="javascript" type="text/javascript">
function CreateGridHeader(DataDiv, GridView1, HeaderDiv) {
var DataDivObj = document.getElementById(DataDiv);
var DataGridObj = document.getElementById(GridView1);
var HeaderDivObj = document.getElementById(HeaderDiv);
//********* Creating new table which contains the header row ***********
var HeadertableObj = HeaderDivObj.appendChild(document.createElement('table'));
DataDivObj.style.paddingTop = '0px';
var DataDivWidth = DataDivObj.clientWidth;
DataDivObj.style.width = '50000px';
DataDivObj.style.width = '#507CD1';
//********** Setting the style of Header Div as per the Data Div ************
HeaderDivObj.className = DataDivObj.className;
HeaderDivObj.style.cssText = DataDivObj.style.cssText;
//**** Making the Header Div scrollable. *****
HeaderDivObj.style.overflow = 'auto';
//*** Hiding the horizontal scroll bar of Header Div ****
HeaderDivObj.style.overflowX = 'hidden';
//**** Hiding the vertical scroll bar of Header Div ****
HeaderDivObj.style.overflowY = 'hidden';
HeaderDivObj.style.height = DataGridObj.rows[0].clientHeight + 'px';
//**** Removing any border between Header Div and Data Div ****
HeaderDivObj.style.borderBottomWidth = '0px';
//********** Setting the style of Header Table as per the GridView ************
HeadertableObj.className = DataGridObj.className;
//**** Setting the Headertable css text as per the GridView css text
HeadertableObj.style.cssText = DataGridObj.style.cssText;
HeadertableObj.border = '1px';
HeadertableObj.rules = 'all';
HeadertableObj.cellPadding = DataGridObj.cellPadding;
HeadertableObj.cellSpacing = DataGridObj.cellSpacing;
//********** Creating the new header row **********
var Row = HeadertableObj.insertRow(0);
Row.className = DataGridObj.rows[0].className;
Row.style.cssText = DataGridObj.rows[0].style.cssText;
Row.style.fontWeight = 'normal';
//******** This loop will create each header cell *********
for (var iCntr = 0; iCntr < DataGridObj.rows[0].cells.length; iCntr++) {
var spanTag = Row.appendChild(document.createElement('td'));
spanTag.innerHTML = DataGridObj.rows[0].cells[iCntr].innerHTML;
var width = 0;
//****** Setting the width of Header Cell **********
if (spanTag.clientWidth > DataGridObj.rows[1].cells[iCntr].clientWidth) {
width = spanTag.clientWidth;
}
else {
width = DataGridObj.rows[1].cells[iCntr].clientWidth;
}
if (iCntr <= DataGridObj.rows[0].cells.length - 2) {
spanTag.style.width = width + 'px';
}
else {
spanTag.style.width = width + 20 + 'px';
}
DataGridObj.rows[1].cells[iCntr].style.width = width + 'px';
}
var tableWidth = DataGridObj.clientWidth;
//********* Hidding the original header of GridView *******
DataGridObj.rows[0].style.display = 'none';
//********* Setting the same width of all the componets **********
HeaderDivObj.style.width = DataDivWidth + 'px';
DataDivObj.style.width = DataDivWidth + 'px';
DataGridObj.style.width = tableWidth + 'px';
HeadertableObj.style.width = tableWidth + 20 + 'px';
return false;
}
function Onscrollfnction() {
var div = document.getElementById('DataDiv');
var div2 = document.getElementById('HeaderDiv');
//****** Scrolling HeaderDiv along with DataDiv ******
div2.scrollLeft = div.scrollLeft;
return false;
}
</script>
</head>
<body>
(Insert top portion of page cosmetics here)
<asp:ScriptManager runat="server">
<Path>
<%--To learn more about bundling Path in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=272931&clcid=0x409 --%>
<%--Framework Path--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="jquery.ui.combined" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Path/To/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Path/To/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Path/To/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Path/To/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Path/To/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Path/To/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Path/To/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Path/To/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Path--%>
</Path>
</asp:ScriptManager>
<header>
(More page cosmetics)
</header>
<div id="body">
<asp:ContentPlaceHolder runat="server" ID="FeaturedInfo" />
<section class="content-wrapper main-content clear-fix">
<asp:ContentPlaceHolder runat="server" ID="MainBody" />
</section>
</div>
<footer>
(nonessential footer info)
</footer>
</form>
</body>
</html>
ASP Page
<%@ Page Title="ASP Page" Language="C#" MasterPageFile="~/Cosmetic.Wrapper" AutoEventWireup="true" CodeFile="asp-page.aspx.cs" Inherits="asp_page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Header" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedInfo" Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainBody" Runat="Server">
<style type="text/css">
.GridViewStyle
{
font-family:Verdana;
font-size:11px;
background-color: White;
}
.GridViewHeaderStyle
{
font-family:Verdana;
font-size:15px;
position:fixed;
background-color:#507CD1;
color:black;
height:40px;
}
</style>
<%--Insert SQL Datasource info here --%>
<div>
<%--Div contains the new header of the GridView--%>
<div id="HeaderDiv">
</div>
<%--Wrapper Div which will scroll the GridView--%>
<div id="DataDiv" style="overflow: auto; border: 1px solid olive; width: 2000px; height: 300px;" onscroll="Onscrollfnction();">
<asp:GridView ID="GridView1" runat="server" AllowSorting="True" HeaderStyle-CssClass="GridViewHeaderStyle" AutoGenerateColumns="False" DataKeyNames="line" DataSourceID="SqlConn1" ForeColor="#333333" GridLines="None">
<columns>
Place Bound/TemplateFields here
</columns>
<insert gridview cosmetic info here - if needed please let me know>
</gridview>
</div>
</div>
</asp:Content>
C# code
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.Configuration;
using System.Web.Security;
using System.Data.OleDb;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class asp_page : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (GridView1.Rows.Count > 0)
{
ClientScript.RegisterStartupScript(this.GetType(), "CreateGridHeader", "<script>CreateGridHeader('DataDiv', 'GridView1', 'HeaderDiv');</script>");
}
}
protected void cmdClick_Click(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "CreateGridHeader", "<script>CreateGridHeader('DataDiv', 'GridView1', 'HeaderDiv');</script>");
}
}
UPDATE - 2/27 - 10:16 PST
Here's the rendered code when entering it into a blank HTML page. The C# page is not leveraged at all in this example.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<script src="path/to/jquery-2.0.3.min.js"></script>
<script src="path/to/jquery-2.0.3.js"></script>
</head>
<body>
<form method="post" action="test.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="Insert Millions of random characters here" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<div class="aspNetHidden">
</div>
<div>
<script type="text/javascript">
$(function () {
var header = $("#GridView1").find("tr")[0];
$("#HeaderDiv").append(header);
});
</script>
<style type="text/css">
.GridViewStyle
{
font-family:Verdana;
font-size:11px;
background-color: White;
}
.GridViewHeaderStyle
{
font-family:Verdana;
font-size:15px;
background-color:#507CD1;
color:black;
height:40px;
}
</style>
<br />
<div>
<div id="HeaderDiv">
</div>
<div id="DataDiv" style="overflow: auto; border: 1px solid olive; width: 2000px; height: 300px;" onscroll="Onscrollfnction();">
<div>
<table cellspacing="0" id="GridView1" style="color:#333333;border-collapse:collapse;">
<tr class="GridViewHeaderStyle">
<th scope="col"> </th><th class="GridViewHeaderStyle" scope="col" style="background-color:#507CD1;"><a href="javascript:__doPostBack('GridView1','Sort$Column1')" style="color:#333333;"Column1*</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column2')" style="color:#333333;">Column2</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column3')" style="color:#333333;">Column3</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column4')" style="color:#333333;">Column4</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column5')" style="color:#333333;">Column5</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column6')" style="color:#333333;">Column6</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column7')" style="color:#333333;">Column7</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column8')" style="color:#333333;">Column8</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column9')" style="color:#333333;">Column9</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column10')" style="color:#333333;">Column10</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column11')" style="color:#333333;">Column11</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column12')" style="color:#333333;">Column12</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column13')" style="color:#333333;">Column13</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column14')" style="color:#333333;">Column14</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column15')" style="color:#333333;">Column15</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column16')" style="color:#333333;">Column16</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Column17')" style="color:#333333;">Column 17</a></th><th scope="col">> </th>
</tr><tr style="background-color:#EFF3FB;">
<td><a href="javascript:__doPostBack('GridView1','Edit$0')" style="color:#333333;">Edit</a></td><td>Blah</td><td>Blah</td><td>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah </td><td>Blah </td><td>Blah </td><td>Blah </td><td> </td><td>Blah </td><td>
<span id="GridView1_Label2_0">Blah </span>
</td><td>Blah </td><td>
<span id="GridView1_Label3_0">Blah </span>
</td><td>
<span id="GridView1_Label4_0">Blah </span>
</td><td>Blah </td><td>
<span id="GridView1_Label1_0">Blah </span>
</td><td>
<span id="GridView1_Label5_0">Blah </span>
</td><td>Blah </td><td>Blah </td><td> </td><td>
<span id="GridView1_Label6_0">Blah</span>
</td><td><a href="javascript:__doPostBack('GridView1','Edit$0')" style="color:#333333;">Blah </a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
774
You have a line in your CreateGridHeader function which is applying your desired background color to the width of the DataDivObj
DataDivObj.style.width = '50000px';
DataDivObj.style.width = '#507CD1';
This is the same background colour used by the header
.GridViewHeaderStyle
{
font-family:Verdana;
font-size:15px;
position:fixed;
background-color:#507CD1;
color:black;
height:40px;
}
There must be a connection here. I think you might resolve the issue by changing the second style.width to style.backgroundColor
UPDATE
I see now that DataDiv is a fixed height, with overflow: auto. I missed this before. So you don't actually need to implement a scroll function.
<script type="text/javascript">
$(function () {
var header = $("#GridView1").find("tr")[0];
$("#HeaderDiv").append($("<table id='floatingheader'>").append(header));
});
</script>
This keeps it inside the fixed height div http://jsfiddle.net/QLWn2/
155
While registering scripts, you need to replace the 'GridView1' with '" + GridView1.ClientID + "'. Your methods should look like below:
protected void Page_Load(object sender, EventArgs e)
{
if (GridView1.Rows.Count > 0)
{
ClientScript.RegisterStartupScript(this.GetType(), "CreateGridHeader", "<script>CreateGridHeader('DataDiv','" + GridView1.ClientID + "', 'HeaderDiv');</script>");
}
}
protected void cmdClick_Click(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "CreateGridHeader", "<script>CreateGridHeader('DataDiv','" + GridView1.ClientID + "', 'HeaderDiv');</script>");
}
Explanation:
With the code you have provided, GridView1 will be rendered as MainContent_GridView1. This will cause javascript error in this line:
Row.className = DataGridObj.rows[0].className;
So no class name will be assigned to new header row. Therefore no styles will be applied.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
