Freezing the columns in excel is a fantastic utility, when working on wider spread sheets. When you need to compare values across the columns, freezing will be very handy. Freezing header will always be helpful if you are working in a large data set
GridView is a 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 of 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
Post a Comment
EmoticonClick to see the code!
To insert emoticon you must added at least one space before the code.