Gridview scrolling with Fixed Header - dropdown column hides Header text


  I want to keep the Headers fixed and  scroll the GridView . I am using the following the code.

 <HeaderStyle HorizontalAlign="Left" ForeColor="Black" CssClass="Freezing" BackColor="#E0E0E0" />



position:relative ;


/* top:this.offsetParent.scrollTop-1; */

/* top:expression(this.Parent.scrollTop); */

z-index: 10;


 It works fine for Bound columns . It does not work for Dropdown columns. when i scroll the grid Dropdown box hides the Header text.

My code is below.

 <div class="" style ="height:293px; overflow:auto; background-color:#C7C7C7; width:280px;" >


<asp:GridView ID="grdmembers" runat="server" AutoGenerateColumns="False"

AllowSorting="True" onrowdatabound="grdmembers_RowDataBound"

GridLines="Horizontal" BorderWidth="1px" BorderColor="Black"


<RowStyle Height="20px" />


<asp:TemplateField >


<asp:label ID="lblMemId" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Id")%>' CssClass="invisible"></asp:label>




<asp:BoundField DataField="Name" HeaderText="Name" SortExpression = "Name" />

<asp:TemplateField >


<asp:CheckBox ID="chkselect" runat="server" CssClass="invisible" />



<asp:TemplateField HeaderText="Track" SortExpression="Class_Track_Name">

<ItemTemplate >

<asp:DropDownList ID="ddlTrack" runat="server" datasource = '<%# LoadClassTrack() %>' DataTextField="Class_Track_Name" DataValueField="Class_track_Id">



</asp:TemplateField >


<HeaderStyle HorizontalAlign="Left" ForeColor="Black" CssClass="Freezing" BackColor="#E0E0E0" />

<AlternatingRowStyle BackColor="#E0E0E0" />


<br />




How to scroll the GridView with Fixed Header for dropdown columns?




2/19/2009 6:19:50 AM 72751 articles. 3 followers. Follow

2 Replies

Similar Articles

[PageSpeed] 7

You might be interested on this:

Cross Browser GridView Fixed Header Extender, ASP.NET AJAX


"Code, Beer and Music" that's my way of being a programmer!

How to get your Forum Question Answered | Blog | CodeASP.NET
2/19/2009 7:26:20 AM

refer here

MAKMark as Answer if this reply helps you
ASP.Net Hosting : Host DepotMy Site : ASPSnippets
2/19/2009 8:08:25 AM

Similar Artilces:

Gridview, Fixed Header, Maintaining Scroll Position on Partial Postback... Header floats way above the grid
Before anyone goes on a tirade on how there are a million posts on this topic already, let me first say that I pretty much got this working. The most elegant solution I've found so far is to make a Sys.Component as shown here ( My problem is when this technique is applied to an overflow in a tab container. This might not be limited to an overflow inside a tab container but that is where it's rearing it's ugly head for me currently. When the page loads, the gridview looks fine: Once a partial pos...

Changing column header text of a gridview inside user control
Hi,I have an ascx file with a gridview, and I need to change the header text of the gridview's column in the code-behind. Something like that:foreach (DataControlField col in GridView1.Columns){ col.HeaderText = GetString(col.HeaderText);}However, no matter where I place that code, the header texts return to their original value, and that's what's being displayed.What could be the reason for that? And how can it be solved?  ...Anyone? I'm having the feeling that I'm missing something quite basic here, any help would be very appreciated. Amit00: col.HeaderT...

Can't get header text in a GridView column to align to bottom of header cell
I have a GridView in which some of the columns' header text takes three lines and some two lines (due to their hard-coded width). The ones with two lines, however, are aligned to the top by default. I've tried using HeaderStyle-VerticalAlign="Bottom", both in the <GridView> tag and the column's header iteself, but nothing worked. Why won't it and how do I get it to align to the bottom? Here's the GridView's code:  <asp:GridView ID="gvContrCo" runat="server" CellPadding="5" AllowSorting="Tr...

GridView: image is added under the header text instead of in front of it (same level as the header text)
 Hi,I have a boundfield in my gridview like this:                                        <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name">                                 &n...

how to hide column data but keep column header text
 Hello,i want to hide my column data programmatically (C#) but still keep the column and its header.Like if i have a column with header "Title". All the data in this column must not be visible.any suggestion? Thank you  If it is all the data in a given column, then one way of doing it, would be to change: SELECT A, B, C, TITLE FROM TABLEtoSELECT A, B, C, TITLE, '' AS TITLE2 FROM TABLE Duplicate the Title column and change the data that is displayed in the second to TITLE2. For those that are allowed to see the data, show the first, for those tha...

Scrolling GridView with Fixed Header
 I use scolling gridview, and i need fixed header, so i choice a solution with CSS : aspx : <HeaderStyle CssClass="FixedHeader" /> class CSS :.FixedHeader {left: 0px; position: relative;top: 0px; padding-right: 2px;padding-left: 2px; padding-bottom: 2px;padding-top: 2px; } in the first is perfect, but when i minimize a window or scrolling a parent window --> problem  Do u have please a solution for this problem ? Hi:   About how to freeze GridView's header, please refer to solution in this post:

How to hide a Column Header in a Gridview?
I know how to make the data not visible - but the column header shows up even if there is no data in the column to display.  I have  ctype(gdv_disb_srch.Rows(i).FindControl("ddlCntyLoca"), DropDownList).Visible = False If certain criteria is not met, but this only makes the contents of the Cell not visible - how do I make the Column Header not visible as well? Thanks in advance for any help on this (you would think with all the work I have done with Gridviews lately I would know how to do this!...)    Coleen"We Develop Webs" If you'...

How to fix the gridview header while scrolling
How can i fix the header for gridview while scrolling? I tried css class but no go. The header moves up as i scroll up. .SearchResultFixedHeader {position:relative; top: expression(this.offsetParent.scrollTop-5); }  Check this Regards,Vinz"Code, Beer and Music" that's my way of being a programmer!How to get your Forum Question Answered | Blog | CodeASP.NET I found out the way. It works fine. This is what i tried and it works very fine. <div style="overflow-...

Create a Scrollable Grid with a Fixed Header that can allow the header to become un-fixed if the user scrolls horizontally? Any ideas?
I have done extensive research and came up with the following: 1)  I can create a basic asp:datagrid and bind some data to it.2)  I can place this datagrid inside of a div and then size the div so that I get my scrolling3)  I can then set the position:relative and keep the header fixed so that it does not go out of sight when scrolling vertically. My problem is that in this scenario, if I scroll horizontally my header stays fixed and does not flow with the scrolling of the grid.  Does anyone know a mehtod of making the header be fixed when vertically scrolling and ...

Header text dissappears when image is added to the header of a GridView
Hi, I am using a gridview where i am trying to add image to header of a gridview and i have to call JAVASCRIPT funtion on  image click . When the gridview is rendered the image appears and i can call the JAVASCRIPT function too , but the Header text dissappears. This occurs only when the the Sort expression is not given to the columns. That is column are not sortable. For column that are sortable the image as well as the Header Text appears. I am not getting the exact reason behid that.. I am attaching the code that i am using. Please help me out. This is very urgent... Thanks i...

Change the text of a GridView header when not using a header template.
I am using a GridView with automatic column sorting.  I need to rename the column header based on the selection of a dropdown list.  I have figured out how to do this by changing the header to a template field and placing a hyperlink on the field.  But then I have to add a custom method to sort the field when the user clicks the hyperlink.  Plus the CSS formatting of the ASP.Net hyperlink field may be different than the the HTMLI would like to find the appropriate event to change it when binding.  I have found examples of how to change the row.Cells[#].Text...

fixed gridview header when i scroll down the page
 heya hows things i have a gridview that is databound to a access database which outputs thousands of records. i was wondering if there was any way of when i scroll down the page that the header would stay in sight as the user has to be able to seewhat there checking.  ive tried examples on the net and they dont seem to be using Owen  Hi..Here is the Examples to Freeze/Fixe the GridView's Header while scrolling.

how to prevent gridview header from hiding while scrolling down
Hi All, I have a to prevent hiding of header of a   gridview  while scrolling down.The gridview has been placed within  a panel control.When i scroll down, the header disppears.Can anyone help me to solve this problem? Thanks & Regards' Kaushik  apply this style sheet to your gridview's header  .HeaderStyle{font-family:verdana;font-size:x-small;width:100%;position:relative;top:expression(this.offsetParent.scrollTop-1);margin-left:0;}Please mark as ANSWER if it helps YOU!...

Need to have the headers fixed when scrolling the GridView
 Hi, I have some GridView on my page but it is ugly when scrolling & cannot see its headers any more ... Can you tell me please how can I do so that those headers stay fixed ?... Thanks :) you could try doing it like in this article: Banavige~~~~~~~~~~~~Need a site code sample in a different language? Try converting it with:   thanks, that is a solution. I was thinking there could be some property like UseStaticHeaders from telerik RadGrid ...

How to hide column by header name?Rafal - Free Classifieds (Search Over 5 mln jobs on DNN Direct Hi There, Im not sure is there a better way to do thi, however this im sure is working. By looping thru GridView column, compare columnname with given comparer, set visible to false if found e.g.for ( int i = 0; i < GridView1.Columns.Count; i ++ ) {if (GridView1.Columns[i].ColumnName.ToLower().Equals("ColumnName")) {GridView1.Columns[i].Visible = false;break; } }DC517Don't forget to click "Mark as Answer" on the post that helped you. ...

Web resources about - Gridview scrolling with Fixed Header - dropdown column hides Header text -

Scrolling - Wikipedia, the free encyclopedia
In computer displays , filmmaking , television production , and other kinetic displays, scrolling is sliding text, images or video across a monitor ...

Platform update: infinite scrolling, stream filters, user support, more
Facebook’s latest platform update includes infinite scrolling for the apps and games dashboard and API support for News Feed filters. The company ...

ScrollIt: display scrolling messages with emoticons on the App Store on iTunes
Get ScrollIt: display scrolling messages with emoticons on the App Store. See screenshots and ratings, and read customer reviews.

Google AdSense Ads Scrolling Now Default? - Flickr - Photo Sharing!
More at

Apple iPhone 5 scrolling glitch demo - YouTube
The iPhone 5 has for the most part proved that the hardware and software at work are robust and efficient. Sure Apple Maps has caused people ...

Google updates Chrome for Android with better scrolling, pinch-zooming, audio playback, and HTML5 support ...
Google just update its Chrome app for Android. The latest version hit Google Play on Wednesday afternoon and notably includes improved scrolling ...

Tweetbot for Mac updated with smoother scrolling, quick-reply via notifications
... out a notable update for their popular Tweetbot for Mac Twitter client . The update brings a number of fixing, and also adds smoother scrolling ...

Samsung Galaxy S IV to feature 'eye scrolling', report says
Samsung's next Galaxy smartphone might be controlled by nothing more than the user's eyes, according to a new report in advance of its March ...

One Hero Parallax Scrolling Cool
Parallax scrolling sites are the new (old) cool (and very annoying sites on mobile devices) but very few actually combine the tech of px scrolling ...

Silent Film Festival's Trailers Use Instagram Scrolling to Simulate Look of Old Movies - Adweek
... in practice. The flipbook-style fusion of old and new technologies is a cool concept (check out the trailers here, here and here), but scrolling ...

Resources last updated: 1/14/2016 9:26:44 AM