Stats

Gridview Fixed Headers

Excel like Fixed headers for Gridview - Works for many columns which current solutions don't

Introduction

Gridview is one of the good controls which enables us to produce Excel like output in the webforms. We had a scenario where we were supposed to give freeze pane like feature for Gridview. We had a lengthy Grid with some 20 or 30 columns. We had paging for about 20 records per page. So following were the requirements:

Grid must have a Fixed header.

It should be scrollable horizontally.

It should be scrollable vertically.

Background

Using the Code

I did a lot of searching and could only get solutions that worked where the columns are limited. So I did a small R&D and derived at a solution which I will be sharing now. Take for example a Timesheet application and it has a Grid. We are going to give a fixed header feature for this Grid. The GridView will look as follows:

And put the Grid inside the Div tag. That's all. You are now ready with the Fixed headers for the Grid.

Points of Interest

I noticed a very interesting thing when making this feature. Initially I got a large set of styles and tried to use them. But the Gridview did not show the fixed headers. So I did a small analysis about the position Relative concept and used it for the Div tag and the Grid's Table intelligently.

Share

About the Author

I love open source development. I used to go through technical updates from dotnet, try new softwares from community and evaluate them. I like to develop new programs that helps in my daily routine works and would blog them for my future reference. I used to reply fro questions in forums like codeprject,satckoverflow and asp.net.