admin管理员组文章数量:1398757
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 ponets **********
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 /?LinkID=272931&clcid=0x409 --%>
<%--Framework Path--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="jquery.uibined" />
<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="">
<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>
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 ponets **********
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./fwlink/?LinkID=272931&clcid=0x409 --%>
<%--Framework Path--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="jquery.ui.bined" />
<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/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>
- What's the rendered HTML look like? – Alex Morales Commented Feb 19, 2014 at 16:46
- When the page first loads it's perfect. The data from the Gridview pulls with no issues and the gridview sits inside of a scrollable box. Also, the subject/column headers load perfectly. The headers cosmetically look and are positioned perfectly (save for a quick font size adjustment). The problem is that when you scroll the gridview down, the data along with the header background color scrolls up but the subject/column headers stay in place with a transparent background. I'm trying to fill the frozen transparent background with a color. – Techie Joe Commented Feb 19, 2014 at 20:26
- Right, since CSS works on the client I need to see the HTML so I can see what the structure looks like. That will let me know what's happening. If you have a sample url it'll help find the issue. – Alex Morales Commented Feb 20, 2014 at 20:44
- Basically I have the code split into two parts. The code and the cosmetic stuff that surrounds it. I'll update the first post with this information. – Techie Joe Commented Feb 21, 2014 at 21:08
- @afzalulh Sorry this is IE 9. Totally spaced on noting this. My bad. – Techie Joe Commented Feb 21, 2014 at 21:32
3 Answers
Reset to default 4 +50You 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/QLWn2/
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.
You have two headers because your javascript code copies the header from the GridView without removing it. You need to remove the original header row from the GridView after you create the new one.
If I create an empty project with a GridView and some sample columns, using the styles you provided and NO javascript, the fixed header works. As I scroll up and down the page, the header stays where it should. If this is all you want then remove the javascript and everything will work.
However, I have a feeling what you really want is for the header to only scroll when the user scrolls past the GridView. That is, it should stay in place on the GridView until the top of the browser window is level with the top of the GridView and then it should freeze.
This is very easy to do in jQuery, which you've already loaded at the top of your page. Here's what you do
CSS
.GridViewHeaderStyle
{
font-family:Verdana;
font-size:15px;
background-color:#507CD1;
color:black;
height:40px;
}
.floating{
position:fixed;
top: 40px; /* when floated, we need to add the height of the header to its position , as we will have scrolled past it already. */
}
.padded{
margin-top: 40px; /* once the header position is fixed, the gridview will jump up by 40px, so we need to add this class to make sure it stays put */
}
Javascript:
<script type="text/javascript">
var floating = false;
$(function () {
// setup
// move the header to its own table. simple!
var header = $("#<%= GridView1.ClientID %>").find("tr")[0];
$("#<%= GridView1.ClientID %>").before($("<table id='floatingheader'>").append(header));
// when scrolling...
$(document).scroll(function () {
// get position of gridview.
var gridposition = $("#<%= GridView1.ClientID %>").offset().top;
// get scroll height
var scrollheight = $(document).scrollTop();
if(!floating && scrollheight > gridposition){
$("#floatingheader").addClass("floating"); // float the header
$("#<%= GridView1.ClientID %>").addClass("padded"); // move the gridview down 40px
floating = true; // set floating flag to true
}
if(floating && scrollheight < gridposition){
$("#floatingheader").removeClass("floating"); // remove floating class
$("#<%= GridView1.ClientID %>").removeClass("padded"); // remove padding
floating = false; // set flag to false
}
});
});
</script>
This will create a floating header on the GridView. Please note, if you have any floating menus at the top of the page you'll need to account for those too.
本文标签： cGridview FreezingFixed Header loses background color when scrollingStack Overflow
版权声明：本文标题：c# - Gridview FreezingFixed Header loses background color when scrolling - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744586135a2614207.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论