Geek asks and answers

Gridview Freezing / Fixed Header loses background color when scrolling

I am trying to embed a freeze / fixed title bar in a gridview. Gridview works great, as does it in this solution. When this page first displays the page, it looks flawless. However, when I try to scroll through the information, the title bar of the background color scrolls along with the rest of the data. The only thing frozen is the gridview text headers, but the background is transparent as gridview scrolls.

I have included important data on this page. However, if you need to add additional information to the code below, please let me know. I tried to add / configure javascript, css, gridview and C # settings with no luck. I'm at a dead end.

Note. This is for IE 9.

Page Template Information ...

<%@ 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 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>

#

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>");
    }



}

- 2/27 - 10:16 PST

HTML-. # .

<!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">&nbsp;</th><th class="GridViewHeaderStyle" scope="col" style="background-color:#507CD1;"><a href="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Sort$Column1&#39;)" style="color:#333333;"Column1*</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Sort$Column2&#39;)" style="color:#333333;">Column2</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Sort$Column3&#39;)" style="color:#333333;">Column3</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Sort$Column4&#39;)" style="color:#333333;">Column4</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Sort$Column5&#39;)" style="color:#333333;">Column5</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Sort$Column6&#39;)" style="color:#333333;">Column6</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Sort$Column7&#39;)" style="color:#333333;">Column7</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Sort$Column8&#39;)" style="color:#333333;">Column8</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Sort$Column9&#39;)" style="color:#333333;">Column9</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Sort$Column10&#39;)" style="color:#333333;">Column10</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Sort$Column11&#39;)" style="color:#333333;">Column11</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Sort$Column12&#39;)" style="color:#333333;">Column12</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Sort$Column13&#39;)" style="color:#333333;">Column13</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Sort$Column14&#39;)" style="color:#333333;">Column14</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Sort$Column15&#39;)" style="color:#333333;">Column15</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Sort$Column16&#39;)" style="color:#333333;">Column16</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Sort$Column17&#39;)" style="color:#333333;">Column 17</a></th><th scope="col">>&nbsp;</th>
        </tr><tr style="background-color:#EFF3FB;">
            <td><a href="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Edit$0&#39;)" 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>&nbsp;</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>&nbsp;</td><td>
                    <span id="GridView1_Label6_0">Blah</span>
                </td><td><a href="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Edit$0&#39;)" style="color:#333333;">Blah </a></td>
        </tr>

    </table>
</div>
                </div>
              </div>
    </div>
    </form>
</body>
</html>
+3
3

CreateGridHeader, DataDivObj

DataDivObj.style.width = '50000px';
DataDivObj.style.width = '#507CD1';

,

.GridViewHeaderStyle
{
    font-family:Verdana;
    font-size:15px;
    position:fixed;

    background-color:#507CD1;
    color:black;
    height:40px;
}

. , , style.width style.backgroundColor

UPDATE

, DataDiv - , : auto. . .

<script type="text/javascript">
    $(function () {
        var header = $("#GridView1").find("tr")[0];
        $("#HeaderDiv").append($("<table id='floatingheader'>").append(header));
    });
</script>

div http://jsfiddle.net/QLWn2/

+4

'GridView1' '" + GridView1.ClientID + "'. :

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>");
}

:

, , GridView1 MainContent_GridView1. javascript :

Row.className = DataGridObj.rows[0].className;

, . .

+2

, javascript GridView, . GridView .

GridView , NO javascript, . , , . , , javascript, .

However, I feel that you really want the title to scroll only when the user scrolls past GridView. That is, it should remain in place on GridViewuntil the top of the browser window is equal to the top GridView, and then it should freeze.

This is very easy to do in jQuery, which you already loaded at the top of the page. Here is 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 GridView. Please note that if you have floating menus at the top of the page, you will also need to consider them.

+1
source

More articles:


All Articles