Click here to Skip to main content
12,953,014 members (48,750 online)
Rate this:
 
Please Sign up or sign in to vote.
See more:
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 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
Top Experts
Last 24hrsThis month
OriginalGriff 6,429
CHill60 3,490
Maciej Los 3,103
Jochen Arndt 1,975
ppolymorphe 1,920


Advertise | Privacy | Mobile
Web02 | 2.8.170525.1 | Last Updated 12 Sep 2012
Copyright © CodeProject, 1999-2017
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