ASP.NET - freeze header in gridview

Asked By msakt on 22-May-12 03:43 AM

freeze header in gridview when scrolldown

dipa ahuja replied to msakt on 22-May-12 04:02 AM

<style type="text/css">
  .WrapperDiv
  {
    width: 800px;
    height: 400px;
    border: 1px solid black;
  }
  
  .WrapperDiv TH
  {
    position: relative;
  }
  
  .WrapperDiv TR
  {
    /* Needed for IE */
    height: 0px;
  }
</style>
<script>
  function onLoad() {
 
    FreezeGridViewHeader('GridView1', 'WrapperDiv');
  }
</script>

http://weblogs.asp.net/dwahlin/archive/2007/07/31/freeze-asp-net-gridview-headers-by-creating-client-side-extenders.aspx

S K replied to msakt on 22-May-12 04:10 AM

There are lots of thread in eggheadcafe having the same

http://www.eggheadcafe.com/community/csharp/2/10265005/gridview-with-fixed-header.aspx
http://www.eggheadcafe.com/community/asp-net/17/10364177/freeze-the-header-in-gridview-in-aspnet.aspx
http://www.eggheadcafe.com/community/asp-net/17/10411434/fixed-header-and-footer-of-gridview-aspnet-c.aspx

hope this helps you

Somesh Yadav replied to msakt on 22-May-12 04:17 AM

Hello

This can achieved by javascript with CSS at client side. It uses position:fixed; on CSS, so the header part will not move when you are scrolling.

Please refer to following tutorials that may meet your requirement.

http://www.farinspace.com/jquery-scrollable-table-plugin/

http://fixedheadertable.com/

http://www.novasoftware.com/download/jquery_fixedtable/jquery_fixedtable.aspx

Jitendra Faye replied to msakt on 22-May-12 04:25 AM

For this you need to add following css for header in GridVIew.

simply way...

<style type="text/css">

.DataGridFixedHeader { POSITION: relative; ; TOP: expression(this.offsetParent.scrollTop); BACKGROUND-COLOR: white }

</style>

And
refer this style in your ASP datagrid, by setting this value to the
CSSClass property of the HeaderStyle of the datagrid. For ex:

<asp:datagrid id="resultGrid" tabIndex="-1" runat="server" Width="900px" Height="224px" BorderStyle="None">

<HeaderStyle Font-Names="Arial" Font-Bold="True" HorizontalAlign="Center" ForeColor="White" BorderStyle="Solid"

BorderColor="Black" VerticalAlign="Bottom" BackColor="LightSlateGray" CssClass="DataGridFixedHeader"></HeaderStyle>

..........

</asp:datagrid>

also
ref this link...

http://www.dotnetcurry.com/ShowArticle.aspx?ID=255

http://www.codeproject.com/KB/aspnet/Gridview_Fixed_Header.aspx