Freezing the column header row of a GridView control using CSS

I am struggling getting my Gridview in ASP.NET 2.0 Visual Studio 2005 to freeze the column header row and provide for scrolling of the remaining data rows. My specific problems right now are:

  • (IE7) column headers freeze as intended and do not scroll  BUT scroll bar is not initially visible to user (requires scrolling with mouse wheel before scroll bars are exposed in gridview)
  • (Firefox 2.0.10) column header row just scrolls out of sight like any other row 

Here is part of my default.css in my default App_Theme folder:

 

/* So the overflow scrolls */
div.coveragesContainer 
{
    overflow: auto;
    /* width:<span class='val'> <span class='unit'>95</span>%</span>; */
    height: 380px; /* must be greater than tbody*/
    position: relative;
    margin: 0 auto;
}
/* Keep the header cells positioned as we scroll */
..coveragesContainer table th 
{
    position:relative;
    top: expression(this.offsetParent.scrollTop);
}

/* For alignment of the scroll bar */
..coveragesContainer table tbody 
{
    overflow: visible;
} 

Please note that the editor in Visual Studio 2005 complains about the line above        top: expression(this.offsetParent.scrollTop);   with the design time error (squiggle line) reading as: 'expression(this.offsetParent.scrollTop)' is not a valid value for the 'top' property. Not sure what is happening there...maybe significant?

Here is markup from my content page:

 

<div class="coveragesContainer">
    <asp:GridView 
        ID="gridViewStateCounty" 
        SkinID="coveragesGrid"
        runat="server"
        pagesize="20"
        AutoGenerateColumns="False" ForeColor="#333333" GridLines="Vertical"> 
    <Columns>  
        <asp:BoundField                     
            DataField="StateName" HeaderText="State" 
            ItemStyle-Width="120"                            
            InsertVisible="False" ReadOnly="True" ItemStyle-CssClass="onlyHorizontalCellSpacing"/>  
        <asp:BoundField                     
            DataField="CountyName" HeaderText="County" 
            ItemStyle-Width="120"                    
            InsertVisible="False" ReadOnly="True" ItemStyle-CssClass="onlyHorizontalCellSpacing"/>
        <asp:BoundField                     
            DataField="MostRecentData_P" HeaderText="Conventional PURCHASE" 
            ItemStyle-Width="90" 
            InsertVisible="False" ReadOnly="True" ItemStyle-CssClass="onlyHorizontalCellSpacing"/>
        <asp:BoundField                     
            DataField="MostRecentData_R" HeaderText="Conventional REFI" 
            ItemStyle-Width="90"
            InsertVisible="False" ReadOnly="True" ItemStyle-CssClass="onlyHorizontalCellSpacing"/>
        <asp:BoundField                     
            DataField="MostRecentData_FHA" HeaderText="FHA" 
            ItemStyle-Width="90"
            InsertVisible="False" ReadOnly="True" ItemStyle-CssClass="onlyHorizontalCellSpacing"/>
        <asp:BoundField                     
            DataField="MostRecentData_VA" HeaderText="VA" 
            ItemStyle-Width="90"
            InsertVisible="False" ReadOnly="True" ItemStyle-CssClass="onlyHorizontalCellSpacing"/>
    </Columns>  
    </asp:GridView>
</div>

  Here is the portion of my default.skin in my default theme:

 

<asp:GridView SkinID="coveragesGrid" runat="server" 
	AutoGenerateColumns="False" width="100%"
	ForeColor="#333333" GridLines="Vertical" PageSize="15" >
	<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <RowStyle BackColor="#eeffdd" />
    <HeaderStyle BackColor="#000000" Font-Bold="True" ForeColor="White" Wrap="true" HorizontalAlign="Center"/>
	<AlternatingRowStyle BackColor="White" />
</asp:GridView>

The markup on my content page is contained within an asp:UpdatePanel and the content page itself is fit within a contentplaceholder control of a master page.

My page is viewable at:

http://www.mortgagedataweb.com/MDWelcome/CoverageAreas.aspx 

Click the State dropdownlist and choose a state with many counties (e.g. Georgia) to introduce the overflow and repro the behavior of the scroll bar not being initially visible (IE7); same sequence with Firefox causes the column header to scroll out of view like all other rows.

 

 



John
0
jjamjatra
5/14/2008 4:44:53 PM
asp.net.client-side 24353 articles. 1 followers. Follow

7 Replies
2131 Views

Similar Articles

[PageSpeed] 20

Hi jjamjatra

to freezing the column header row of a gridview

try this demo, hope this helps:

 

<!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 runat="server"> 
    <title>lance </title> 
<style> 
.Freezing 
   { 

   position:relative ; 
   table-layout:fixed; 
   top:expression(this.offsetParent.scrollTop);   
   z-index: 10; 
   } 
..Freezing th{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px;} 
</style> 
</head> 
<body style="font-size=12px"> 
    <form id="form1" runat="server"> 
    <div style="overflow-y: scroll; height: 200px;width:300px" id="dvBody"> 
                   <asp:GridView ID="GridView1" runat="server"    AutoGenerateColumns="False" CellPadding="3"   
                          BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" Font-Size="12px"   > 
                        <FooterStyle BackColor="White" ForeColor="#000066" /> 
                        <Columns> 
                            <asp:BoundField DataField="身份证号码" HeaderText="编号" Read /> 
                   <asp:BoundField DataField="邮政编码" HeaderText="邮政编码" SortExpression="邮政编码" /> 
                            <asp:BoundField DataField="家庭住址" HeaderText="家庭住址"  /> 
                            <asp:BoundField DataField="姓名" HeaderText="姓名"  /> 
                             
                        </Columns> 
                        <RowStyle ForeColor="#000066" /> 
                        <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" /> 
                        <PagerStyle BackColor="White" ForeColor="#000066" Horiz  CssClass="ms-formlabel DataGridFixedHeader"/> 
         <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" CssClass="Freezing"/> 
                    </asp:GridView> 
        </div> 
    </form> 
</body> 
</html> 
 
Regards!

-- "Mark As Answer" If my reply helped you --
0
blodfox777
5/20/2008 8:47:02 AM

Hi jjamjatra,

may be this link can help u.

http://www.codeproject.com/KB/aspnet/AntonioSuarez_Gridview.aspx 

Bye

Prashant 

0
RutuPrash
5/20/2008 10:22:01 AM

 Hi Prashant,

Many thanks to you and the author of the sample at codeproject.com, Antonio Suarez. I implemented his technique and it now works great in both Firefox and IE7.

Just a brief comment/question before closing: 

I wonder why he set Page.EnableViewState = False at the beginning of his FreezeGridviewHeader subroutine. I had to go back to setting viewstate to true in order to make mine work with the other controls on my page (yet setting EnableViewState = True did not disturb the functionality of this technique with the gridview)??


John
0
jjamjatra
5/22/2008 2:46:40 PM

 

try this 

use the panel to get the scroll bar. the trick is the panel and gridview must use CssClass= "Freezing"

 but it has no effect on firefox

 

.Freezing
        {
           
            position:relative ;
            top:expression(this.offsetParent.scrollTop-5);
          
            BACKGROUND-COLOR: white;
           
           
        }

<asp:Panel ID="Panel3" runat="server" ScrollBars="auto"  CssClass= "Freezing" >
      
        <asp:GridView ID="GridView1" runat="server" BorderColor="#FF3300" CaptionAlign="Left" 
            <HeaderStyle CssClass= "Freezing"

        </asp:GridView>

 </asp:Panel> 

0
NHHOME
5/25/2008 2:45:19 AM

Hi,

 I am doing freezing on gridview headers and columns ..

for header s it's working fine...but for columns, the freezed column is over lapping while scrolling on vertically..

 the style for the freezed columns is:

   td.FreezingColumns
         {                           
border-right:#999999 1px solid;
position:relative;                                      
         left:expression(this.offsetParent.scrollLeft-0);   
        
        } 

how to over come from this issue?

 

regards

murali.

0
Mohan
12/20/2008 12:27:43 PM

 Worked like a charm for me, this was something I was looking to solve for quite a long time, thanks, ur the man!!!

0
rodrigo_vera11
1/20/2009 1:39:06 AM

Any suggestions for dropdownlist controls? They over lap the header. I hate that this control doesn't conform! Thanx.

0
chris555
3/4/2009 9:37:25 PM
Reply:

Similar Artilces:

Add new controls to a gridview row; when editing that row using the edit row feature in the gridview control.
Hi all  I have a questions that looks hard / complex to me, and i know you can help me in this. Q {  I have row in a Gridview and i have an edit option to it. I press the edit button, to edit the values in that row and update data all the way back to the database. Now when i press the edit button, i want a drop down list to be displayed that contain values for a particular field in my grid view. (for now only plain text boxes appear.) } I hope you understand my question, all i need to do is replace the text box controls with a dropdown list when i am editing a row in ...

Freeze Column Headers in gridview controls?
Is there a way to freeze the column header row in a gridview control?I am displaying a large table, so the users have to scroll sideways and up and down. I tried to improve this by putting the gridview in a panel, so they can scroll using the panel's scroll buttons and I am able to specify the size of the display. However, if the users scroll down, they loose the name of the columns. Orlando. Here is a way: http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.htmlSteve Wellens My blog Thank you for that information. It's what I need, but I need to apply this to a gridview, ...

GridView : Freezing First Columns and Freezing Column's Headers
Hi Looking for code that freezes the first two columns and the column's headers in a GridView, so as to give a similar behavior and the appearance of Excel, but in Visual Web Developer, I've found a link that show a very efficient solution, but applies just to a DataGrid control in IE. I've found lots of additional information in the web, but I think the best aproach is this... http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.html http://www.codeproject.com/aspnet/FreezePaneDatagrid.asp Please, look at this alternative solution also... may be ...

Using Bound Controls in Gridview Column Header
Hi Folks, Please tell me how do I use bound controls in Gridview Column Header. Lets say, I want to see the User Name as the Header Text for a Gridview Column.Red in Heart... Hi, I think, If you want to bind any field in your database to the Header of the Column in the GridView control. Then you can add a TemplateField in the gridview control and then add a Textbox or Label field in the HeaderTemplate and then bind it to the field in your Database table. Regards, Manish www.ComponentOne.com    Manish Singhalwww.ComponentOne.com Try this,  <asp:TemplateField> ...

Trying to use the FAQ " Sorting and paging in the GridView control when not using data source controls "Sorting and paging in the GridView control when not using..."
and I am not getting the results I had hoped for.  I keep getting a "Compiler Error Message: CS0123: No overload for 'AdhocJobGridView_PageIndexChanged' matches delegate 'System.EventHandler'".   Here is my event handling... protected void AdhocJobGridView_PageIndexChanged(object sender, GridViewPageEventArgs e){ try { AdhocJobGridView.DataSource = wsBaseInfoArray; AdhocJobGridView.PageIndex = e.NewPageIndex; AdhocJobGridView.DataBind(); }catch (Exception ex) {throw ex; }   Here is my aspx... <asp:GridView ID="AdhocJobGridView...

How to access dynamically Html controls (client side controls) using C# server side scripts
Folks,I have problem try to to access dynamically Html controls (client side controls) using C# server side scripts. Please give me helps.     The error is as follows Exception Details: System.InvalidCastException: Specified cast is not valid.Source Error: Line 79: { Line 80: Control c = Page.FindControl("ddlTC" + i); Line 81: ((DropDownList)c).DataSource = mdt; Line 82: ((DropDownList)c).DataTextField = "ClassID"; Line 83: ((DropDownList)c).DataValueField = "Course"; My aspx page source codes: ...<...

GridView.Rows(Column=ID_PK) to GridView.Rows(Column=DropDownListTeamplteField)
Hi Guys,I wonder how I can assign the PrimaryKey in each GridView Row to the template field in the same row. whereas the template field is filled with a dropdownlist thatshould show the values for retrieved in a different table through the GridView Row primary key (which serves as the SELECT parameter to get these values) The GridView looks like this:<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="C_ID" DataSourceID="GetC_IDs"> <Columns> <asp:BoundField D...

Has GridView control improved in VS 2008 especially for freezing column headers?
I am struggling getting my Gridview in ASP.NET 2.0 Visual Studio 2005 to freeze the column header row and provide for scrolling of the remaining data rows. My specific problems right now are:(IE7) column headers freeze and do not scroll  BUT scroll bar is not initially visible to user (requires scrolling with mouse wheel before scroll bars are exposed in gridview)(Firefox 2.0.10) column header row just scrolls out of sight like any other row Does anyone know if ASP.NET 3.5 and VStudio 2008 offer any improvements in this specific area of GridView behavior ? John Hi jjamjatra, Bas...

Freeze Headers(Multiple row headers) in GridView
Hello all,        I'm developing web application with asp.net2.0+C#.   Requirement : GridView with Multiple Header rows. When vertical scroll, headers freeezed (GridView rows only scrollable). When horizontal scroll, GridView's 1st column freezed (1st Column of GridView is freezed & remaining columns with Headers should be scrollable). Something like as:-   School Name:- ABC English School Academic Year:- 2007-2008   Type   OPEN   S.C.   N.T.   O.B.C. Boys Girls ...

To use a Gridview .V. Client Side Javascript to allow user controlled list on a form.
Hi,I want to add functionality to a form and im not sure how to represent it.This functionality consists of the user being able to add and remove values from a list. Each item in the list would ideally be represented two textboxes, one for the title and one for its content. When the form loads initially there will be two empty checkboxes available, one for title, and one for value. They should then be able to add and remove list items not including the first.I was thinking of loading the page and using javascript to allow the user this functionality but was wondering if there was some obviou...

Client side clock using server side controls
Is it possible to create a client side clock using a server side control (label or textbox) in C# without accessing JavaScript?  If so, how? In principal it is possible, it depends how often you need to reload this clock ... if every second than: 1. It is no sens to do I mean 2. You need than to make setTimeout client script, to refresh page every second With FastPage it seems more real task ... http://fastpage.more.at...

Validation Controls in .NET ( Client side or server side?)
 i have a very basic question. We have all these validation controls in asp.net ( required field, range validator and others)..my question is the required field validator is a server side control. So does that mean that it does a post back?..is it client side or server side control  The only controls that post back are buttons and other inputs where you set AutoPostback="True", such as a dropdownlist or a textbox.  Another way of posting back is using an UpdatePanel and placing a trigger in it for a specified control and/or event. All controls are considered clien...

Reference gridview column index using column headers
 Greetings,I have several GridViews all showing different collections of similar product data.  Due to changes in codes used to distinguish properties such as color and size, I'm having to write several rules into the row databound events.  The issue I'm having is that the group who will be using the application haven't finalized the order of the columns, so everytime I reorder the columns, I have to changes all the column indexes in my code behind so that the rules are being applied to the right columns. I'd like to know if there is a way to reference the colu...

I want to select a row and column in gridview using radiobutton in gridview
I want to select a row and column in gridview using radiobutton in gridview . if which radio button is select that row will select and i want that row column values in outside individual textboxes of next page.  but in that only single radiobutton will select and no post back="true" bcz iam not using checked change property. i inserted button below gridview. if i click the that selected row and columns values are stored into textboxes of next page im using this code .but im getting one column in that row. but i want all columns in that selected row so plz repla...

Web resources about - Freezing the column header row of a GridView control using CSS - asp.net.client-side

Freezing - Wikipedia, the free encyclopedia
Freezing , or solidification , is a phase transition in which a liquid turns into a solid when its temperature is lowered below its freezing ...

Facebook, Apple Add Egg Freezing to Benefits
Technology companies are known for their employee perks and benefits , and a new addition joined the offerings at both Facebook and Apple , as ...

Search Twitter - freezing office
... using an old version of Internet Explorer. Learn more here Search Refresh Dude Ranch Nurse @ JenAlice 54m Dunno if flu or what but I'm freezing ...

Top 10 Hiring Mistakes, #6: Freezing Out Your Team
... the candidate across a table, and later making the final decision about who to bring on. But like nearly Top 10 Hiring Mistakes, #6: Freezing ...

App Store - Freezing Birds
Get Freezing Birds on the App Store. See screenshots and ratings, and read customer reviews.

our freezing office? - Flickr - Photo Sharing!
Explore adrienna's photos on Flickr. adrienna has uploaded 3915 photos to Flickr.

Freezing Soap Bubbles, Joplin MO, Jan 6, 2014 - YouTube
The segments that make up this video were recorded in Joplin MO, on January 6, 2014 between 8:23 a.m. and 9:24 a.m. The temperature at the beginning ...

Social Experiment of the Day: Kid Pretends to be Homeless and Freezing in NYC
In the latest “you won’t believe what happens next” social experiment to go viral, a young boy pretends to be homeless and freezing in New York. ...

Bushwalkers lost on freezing Mount Bogong found alive
Two bushwalkers who went missing in a blizzard on Mount Bogong in the state&#8217;s north-east were found alive after surviving freezing temperatures ...

Holes in the ceiling and mould forces Gungahlin man Grant Seears out of freezing apartment
A Gungahlin man claims he is unable to live in his freezing community housing apartment due to lack of maintenance which has forced him to live ...

Resources last updated: 1/11/2016 9:27:14 AM