Click here to Skip to main content
11,704,315 members (46,353 online)
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 20: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 Sergey Alexandrovich Kryukov 740
1 OriginalGriff 520
2 Maciej Los 355
3 Andy Lanng 284
4 CPallini 275
0 OriginalGriff 8,824
1 Sergey Alexandrovich Kryukov 8,247
2 CPallini 5,197
3 Maciej Los 4,726
4 Mika Wendelius 3,606


Advertise | Privacy | Mobile
Web04 | 2.8.150819.1 | Last Updated 12 Sep 2012
Copyright © CodeProject, 1999-2015
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