This is working fine. But when the gridview is inside a div and having 10 coloums, then the header text is going beyond the screen. It is not fitting inside the div. Any way to fit inside the div.
I don't know why it wouldn't work for you because it works me. Are you sure that the mouseover is not being invoked on the header? That would wipe out the positioning and cause what you describe.
Change if (e.Row.RowIndex >= 0) to if ( e.Row.RowType == DataControlRowType.DataRow )
I would also suggest changing your onmouseout as follows, unless you're actually setting the CSSClass property of the rows initially.
e.Row.Attributes.Add("onmouseout", "this.className=''");
vish4forum
Member
312 Points
47 Posts
Fixed GridView Header
Jun 23, 2007 10:57 AM|LINK
I am trying to freeze gridview header
I placed my gridview inside
<div id="divGridViewHeader" style="position:relative; height:150px; overflow:auto">
</div>
this is my gridview header css class
.gridViewHeader
{
background-color:Navy;
color:Honeydew;
font-size:12px;
font-weight:bold;
position:relative;
z-index:10;
top:expression(this.offsetParent.scrollTop);
}
and in gridview HeaderStyle's CssClass property I assign this class
Till now grid view works fine and i am also able to freeze its header.
But when i add following code in grid view's RowDataBound event
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowIndex >= 0)
{
if (e.Row.RowIndex % 2 == 0)
{
e.Row.Attributes.Add("onmouseover", "this.className='gridViewSelRow'");
e.Row.Attributes.Add("onmouseout", "this.className='gridViewRow'");
}
else
{
e.Row.Attributes.Add("onmouseover", "this.className='gridViewSelRow'");
e.Row.Attributes.Add("onmouseout", "this.className='gridViewAltRow'");
}
}
GridView's Header start to move upwards as soon as i scroll down.
Do anybody have any solution
then please reply.
ASP.NET 2.0 fixed GridView Header ASP.NET 2.0 Freezing GridView Header
If you find this post useful, mark it as an Answer
e_screw
All-Star
19530 Points
3894 Posts
Re: Fixed GridView Header
Jun 24, 2007 11:00 AM|LINK
Check this http://www.codeproject.com/useritems/FreezeHeader.asp
Thanks
Electronic Screw
Website||Blog||Dub@i.net
itsrahul
Member
20 Points
15 Posts
Re: Fixed GridView Header
Feb 07, 2008 10:11 AM|LINK
Hi
This is working fine. But when the gridview is inside a div and having 10 coloums, then the header text is going beyond the screen. It is not fitting inside the div. Any way to fit inside the div.
NC01
All-Star
82577 Points
15430 Posts
MVP
Re: Fixed GridView Header
Feb 07, 2008 02:50 PM|LINK
I don't know why it wouldn't work for you because it works me. Are you sure that the mouseover is not being invoked on the header? That would wipe out the positioning and cause what you describe.
Change if (e.Row.RowIndex >= 0) to if ( e.Row.RowType == DataControlRowType.DataRow )
I would also suggest changing your onmouseout as follows, unless you're actually setting the CSSClass property of the rows initially.
e.Row.Attributes.Add("onmouseout", "this.className=''");
NC...
vish4forum
Member
312 Points
47 Posts
Re: Fixed GridView Header
Feb 08, 2008 03:05 AM|LINK
I think your code will be like this
<div id="divGridView" style="height:400px;">
YOUR GRIDVIEW HERE
</div>
When I faced such problem, I solved it by adding position:relative in div tag
like this
<div id="divGridView" style="height:400px; width:100%; position:relative">
YOUR GRIDVIEW HERE
</div>
Hope this helps !!!
NJoy.
If you find this post useful, mark it as an Answer
vish4forum
Member
312 Points
47 Posts
Re: Fixed GridView Header
Feb 08, 2008 03:12 AM|LINK
Hi NC,
Thanks for your help.
Now I have solved that problem and Gridview is working just fine in IE.
and I am absolutely sure if ( e.Row.RowIndex >= 0 ) and if ( e.Row.RowType == DataControlRowType.DataRow) are same
but in Former I can work with numeric values
Actually RowIndex of Header and Footer row is -1.
NJoy !!!
If you find this post useful, mark it as an Answer
itsrahul
Member
20 Points
15 Posts
Re: Fixed GridView Header
Feb 08, 2008 09:15 AM|LINK
Hi,
If i am applying position:relative to div nothing happens. Header will come inside div normally. But its not freezing.
vish4forum
Member
312 Points
47 Posts
Re: Fixed GridView Header
Feb 10, 2008 11:03 AM|LINK
Can you write your code here, including CSS class ?
If you find this post useful, mark it as an Answer
NC01
All-Star
82577 Points
15430 Posts
MVP
Re: Fixed GridView Header
Feb 10, 2008 01:59 PM|LINK
Are you using Internet Explorer? What is posted will ONLY work in IE.
NC...
itsrahul
Member
20 Points
15 Posts
Re: Fixed GridView Header
Feb 11, 2008 02:36 AM|LINK
Hi My dear friends,
At last i got it. This is the code what i used. Now its working fine. But it will work only in IE 5+.
In ASPX:
<
div style="position:relative;" id="div-datagrid">In CSS:
div#div-datagrid
{width
: 420px;height
: 200px;overflow
: auto; scrollbar-base-color:#ffeaff;}
/* Locks the left column */
td.locked, th.locked{
font-size
: 14px;font-weight
: bold;text-align
: center;background-color
: navy;color
: white;border-right
: 1px solid silver;position
:relative;cursor
: default; left: expression(document.getElementById("div-datagrid").scrollLeft-2);}
/* Locks table header */
th{
background-color:#8CA7BB; color:White ; font-weight:bold; font-family: Arial, Helvetica, sans-serif; font-size:14px;
text-align: center;border-right
: 1px solid silver;position
:relative;cursor
: default;top
: expression(document.getElementById("div-datagrid").scrollTop-2); z-index: 10;}
/* Keeps the header as the top most item. Important for top left item*/
th.locked {z-index: 99;}But one problem. It will not working if we have two or more grid in same page.
Any one having solution for this, then plz let me know.
Thanks
Rahul.