{"id":205,"date":"2009-05-04T08:36:00","date_gmt":"2009-05-04T03:06:00","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=205"},"modified":"2009-05-04T08:36:00","modified_gmt":"2009-05-04T03:06:00","slug":"freeze-header-and-the-first-column-of-the-gridview-control","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2009\/05\/freeze-header-and-the-first-column-of-the-gridview-control\/","title":{"rendered":"Freeze header and the first column of the GridView control"},"content":{"rendered":"
There have been often times when the customers (familiar with Excel Freeze Options) have asked for the same functionality on ASP .NET forms. <\/span><\/div>\n
<\/span><\/div>\n

<\/span><\/div>\n
There is no direct property that would allow users to either fix the header or the column. The html concept of <\/span><\/p>\nwas hard to find with GridView control.<\/p>\n

<\/span><\/div>\n
We found a solution that used stylesheet to freeze the header and the columns. This code really helped us achieve our goals.<\/span><\/div>\n

<\/span><\/div>\n
<\/span><\/div>\n
Here it is…
<\/span><\/div>\n
Place your gridview under DIV. This div should contains style value as
<\/span><\/div>\n

<\/p>\n

\n

style=”height:500px; width:100%; overflow:auto;” <\/strong><\/span><\/p>\n<\/blockquote>\n

overflow:auto:<\/strong> to display the scroll bars when grid contents exceeds the grid height<\/span><\/span><\/div>\n
<\/p>\n

<\/span><\/span><\/div>\n

Instead of hard coding div height if you need to apply the height as the page height you can refer to the following article, <\/span><\/span>http:\/\/inogic.blogspot.com\/2009\/02\/automatically-resize-iframe-to-adjust.html<\/span><\/a><\/div>\n
In gridview header provide class name from stylesheet i.e. Freezing<\/span><\/div>\n

<\/strong>The above line will freeze the header row<\/p>\n

<\/span><\/div>\n

<\/span><\/div>\n
To freeze the first column use below code for first column at run time<\/span><\/div>\n
gvFix.HeaderRow.Cells[0].CssClass = “locked”;<\/strong><\/span><\/div>\n

<\/span><\/div>\n
foreach (GridViewRow row in gvFix.Rows)<\/span><\/div>\n
{ \/\/stylesheet to firstcol <\/span><\/div>\n
row.Cells[0].CssClass = “locked”;<\/span><\/div>\n
}
<\/span><\/div>\n
Here are the Stylesheet classes that are being referred above<\/span><\/div>\n
<\/p>\n

<\/span>\/* Locks the left column *\/<\/strong><\/span><\/div>\n

td.locked, th.locked {<\/span><\/div>\n
position:relative;<\/span><\/div>\n
cursor: default;<\/span><\/div>\n
left: expression(document.getElementById(“div_gridholder”).scrollLeft); \/* div_gridholder : name of the div which holds gridview*\/<\/span><\/div>\n
}<\/span><\/div>\n

<\/p>\n

<\/div>\n
\n

\/* Locks the header *\/<\/strong><\/div>\n

.FreezeHeader { <\/span><\/div>\n
position:relative ; <\/span><\/div>\n
top:expression(this.offsetParent.scrollTop – 2); <\/span><\/div>\n
z-index: 20; <\/span><\/div>\n
}<\/span><\/div>\n
<\/p>\n

<\/span><\/div>\n

<\/span><\/p>\n

Hope this helps others give the option of Freezing rows and columns in grid controls.<\/span><\/div>\n
<\/span><\/div>\n

<\/strong><\/th>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

There have been often times when the customers (familiar with Excel Freeze Options) have asked for the same functionality on ASP .NET forms. There is no direct property that would allow users to either fix the header or the column. The html concept of was hard to find with GridView control. We found a solution\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[11,19],"tags":[150,875],"class_list":["post-205","post","type-post","status-publish","format-standard","hentry","category-controls","category-dynamics-crm","tag-asp-net","tag-gridview"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=205"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/205\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}