Skip to content

.NET Programming

GridView Header Freeze Using CSS & ASP.net

Freezing the columns in excel is a fantastic utility, when working on wider spreadsheets. When you need to compare values across the columns, freezing will be very handy. Freezing the header will always be helpful if you are working in a large data set

GridView is the best control to display a spreadsheet / tabular data. But unfortunately there is no native support for this freezing functionality. To make things worse, there is no built in support for even GridView scrolling. We need to write our own Cascading Style Sheets to control this.

So there is a need for alternatives. I would like to share how this can be achieved with Styles and CSS with the help of ASP.net.

Before reading further, I would like to highlight some facts about the technologies I am going to use to get this done in ASP.Net. This is working based on client settings largely, so there is no guarantee that it will work on all target platforms.

On top of that, since it is client centric, the Document Type will impact the functionality greatly. Selecting an improper content type will cause the GridView columns not to be frozen. Changing document type to strict will lead to undesirable effects. So keep it Transactional always and it worked to me always.

Since there is no built in support for scrolling, we need to do itusing CSS. Scrolling can be enabled using the following

1) Add a container to the GridView. With this we can get scrolling to the GridView

2) to enable scrolling in this div. Add a style attribute “overflow”

Freeze GridView Header

To freeze header, add a style “position: relative;” to header row. After this the entire header row will be frozen. The header row will not move when scrolling vertically up and down. While scrolling horizontally (e.g. left to right), the column header have to move horizontally if the required width is more than available width.

Read more here GridView header freeze. Scroll before freeze

Pon Saravanan
VB.Net Tutorial,

Article Source: http://EzineArticles.com/?expert=Pon_Saravanan

Be Sociable, Share!
    The following two tabs change content below.

    Latest posts by Ray (see all)

    Add Your Comment (Get a Gravatar)