Use CSS to fix the gridview header (zt)

ArticleDirectory

• Maintaining fixed headers in gridview

Summary: maintaining fixed headers in gridview
Published on:26 Apr 2007
one of the commonly asked question by developers is how to maintain headers of gridview in a fixed position. you must have observed that in excel you can freeze top cells of your spread sheet. when you scroll down the headers are always visible making your sheet more readable. the same effect is often needed in gridview control especially if you are displaying specified records at a time. in this article I will explain a technique that will allow you to achieve this with your.
Framework Version: 2.0	Coding language: C #
Download Code
Rating: 4 of 5Rate this article: ExcellentVery goodGoodAveragePoor

Maintaining fixed headers in gridviewintroduction

One of the commonly asked question by developers is how to maintain headers of gridview in a fixed position. you must have observed that in excel you can freeze top cells of your spread sheet. when you scroll down the headers are always visible making your sheet more readable. the same effect is often needed in gridview control especially if you are displaying specified records at a time. in this article I will explain a technique that will allow you to achieve this with your.

Example

Let's develop a sample Web Form That specified strates this techniques. Create a new web site using Visual Studio. Drag and Drop an SQL data source control On The Web Form. configure it to select customerid, companyName, contactname and country columns from MERs table of northwind table.

Now drag and drop a panel control inside the web form. set its height property to 200px and width property to 100%. you can change these properties as per your requirement. also, set scrollbars property of panel control to auto. this will cause scroll bars to be displayed when its content falls outside the dimensions of the Panel.

Add a new HTML table with four columns and one row at the top of the panel control. this table will act as "freezed" header for your gridview. enter customer ID, company name, contact name and country in the table cells.

Add a newCSS StyleSheetTo the Web site and create two CSS classes as shown below:

 
. Fixedheadercell {font-weight: bold; font-size: 10pt; width: 200px; color: White; font-family: Arial;Background-color: Darkblue ;}. fixedheadertable {left: 0px; position: relative; top: 0px; padding-Right: 2px; padding-left: 2px; padding-bottom: 2px; padding-top: 2px ;}. gridcell {width: 200px ;}
 

The fixedheadercell class is to be applied to all the four table cells via class attribute. There is nothing special as such about this CSS class. It simply contain UI related properties for the header. The secondCSSClassFixedheadertable is important. it sets position attribute to relative. the left and top coordinates are then considered with respect to the panel control rather than the web form. the fixedheadertable class is to be applied to the table. the gridcell CSS class is to be applied to gridview columns.

Apply the style sheet you just created to the web form using <link> tag.

 
<Link href = "stylesheet.css" rel = "stylesheet" type = "text/CSS"/>
 

Next, drag and drop a gridview control below the HTML table. set performanceid property of gridview to sqlperformance1. also set showheaders property of gridview to false. this is necessary because our column headings are displayed by the table. add four boundfields to the gridview and set their datafield properties to customerid, companyName, contactname and country respectively. for each boundfield set itemstyle-cssclass property to gridcell (see below ).

That's it! Now run the web form. The following figure shows a sample run of the web form we just developed.

As you will see, even if you scroll the grid the headers remain fixed at the top.

Summary

Using scrollbars property of panel control and CSS relative positioning you can easily add fixed headers to your gridview. this way when you scroll down the column headings are always visible. in above example we attached CSS using <link> tag. the CSS can be added as a part of your theme instead.

about the author

author: Bipin Joshi Bipin Joshi is the webmaster of dotnetbips.com. he is the founder of binaryintellect Consulting (www.binaryintellect.com)-a company providing training and consulting services on. net Framework. he conducts intensive training programs in Thane/Mumbai for developers. he is also a Microsoft MVP ( Asp . net) and a member of aspinsiders.

form http://www.dotnetbips.com/articles/f1baaf4e-ae5a-46d6-b409-03e203ea98d9.aspx