CODEWITHSUNDEEP
asp.netcss
Bhaskara varma Dandu
Bhaskara varma Dandu

Reputation: 337

How to fix the header of GridView

I have a GridView in ASP.NET page with 1000+ records along with header putted grid view in div. When I'm scrolling, GridView header also moving up because of the I am not able to view the header information. Please let me know any solution for fixing header.

Upvotes: 3

Views: 858

Answers (1)

Didier Ghys
Didier Ghys

Reputation: 30666

I don't think you need to use a third-party control to achieve this, you can do it with CSS.

The HTML generated by asp.net is not totally standard, you first need to alter a bit how the table will be rendered in order to generated a <thead>. Add these lines after the databinding:

MyGridView.UseAccessibleHeader = true;
MyGridView.HeaderRow.TableSection = TableRowSection.TableHeader;

There are tons of tutorials that explain how to make your table content scrollable with fixed content. Found and quickly tested this one: How to add a fixed table header with a vertical scrollbar in content.

I would change one thing though:

div.tableContainer {
   ...
   // instead of overflow: auto
   // even though it is a CSS3 property, it has been widely supported for a long time (IE5+, FF1.5+, O9.5+, Safari3+, Chrome2+)
   overflow-x: hidden;
   overflow-y: auto;
   ...
}

Upvotes: 1

Related Questions