Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: CSS ASP.NET4.0
hi..
 
I am trying to fix gridview header while gridview scroll.i am placing my gridview in div tag with set property of div overflow=scroll.I am binding grid data dynamically.I have generated gridview header dynamically.if header postion not set to absolute grid diaplay properly but when i set header postion to absolute.On page load before scrolling 2-3 rows of gridview overlap by gridview header.provide soln.
My css code is:
 
http://localhost:3678/TestPage.aspx

/*Css for header*/
       th
        {
            cursor:pointer;
            background-repeat:no-repeat ;
            background-position: 98% 20%;
            background-color:Gray;
    }
 
     .header
        {
            font-weight:bold;
            position:absolute;
            background-color:gray;
    }
 
/*Css for rows*/
 
    .Row
        {
            color:Black;
            background-color:white;
    }
/*Css for header row1*/
     .Captionrow
        {
                font-weight:bold;
                cursor:pointer;
            background-color:Gray;
            background-repeat:no-repeat ;
            height:20px;
 
        }
/*Css for header2*/
        .Cntrlrow
        {
            font-weight:bold;
            background-color:gray;
            background-repeat:no-repeat ;
            height:20px;
 
        }
 
.aspx code
 
<asp:GridView ID="grvCtrl" runat="server"  ClientIDMode="static"  ShowFooter="True" Visible="true" HtmlEncoded ="true" ShowHeader ="true">
      <RowStyle CssClass="Row" />
   
   <HeaderStyle CssClass ="header"  />
     </asp:GridView>
Posted 11-Sep-12 21:23pm

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Please refer following links:
some articles on CP:
Grid View with Fixed Header[^]
Gridview Fixed Headers[^]
 
A Scrollable GridView with a Fixed Header in .NET[^]
jQuery Fixed Header Scrollable GridView[^]
GridView Fixed Header[^]
 
some solved answers:
gridview scroll with fixed header and footer[^]
Scrollable GridView with fixed headers in asp.net[^]
 
Gridview Fixed Header Issue[^]
 
Or else
Try this:
 
Create a CSS file "grid.css" within a folder "css" with a class "grid-header".The css folder is under the root directory
 
.grid-header
{
font-weight: bold;
font-family: Verdana;
font-size: 11px;
background-color: #7A9FCB;
text-decoration: underline;
color: #ffffff;
text-align: left;
position: relative;
top:expression(this.parentNode.parentNode.parentNode.scrollTop-2);
left:expression(this.parentNode.parentNode.parentNode.scrollLeft-1);
right:1px;
}
 
Call this CSS File from your page which is contain your grid
link href="../css/grid.css" rel="stylesheet" type="text/css" /
 
call this css from the HeaderStyle of your gridview
<HeaderStyle CssClass="grid-header"></HeaderStyle>
  Permalink  
Comments
Vijay Walunj,Navi mumbai at 12-Sep-12 5:32am
   
thanx.but all this soln not work for me.when i am set position of gridview header to absolute header row remain fix but 2-3 data row hides behind header row .why this happen.why positions are same.provide soln 4 it.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Maciej Los 230
1 OriginalGriff 202
2 Richard MacCutchan 185
3 Tomas Takac 146
4 CPallini 125
0 OriginalGriff 5,130
1 DamithSL 4,237
2 Maciej Los 3,700
3 Kornfeld Eliyahu Peter 3,470
4 Sergey Alexandrovich Kryukov 2,846


Advertise | Privacy | Mobile
Web03 | 2.8.141216.1 | Last Updated 12 Sep 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100