How to freeze the GridView header in firefox & Chrome.

Question

0.00/5 (No votes)

See more:

I am working on the senerio where i need to fix the gridview header in while scrolling in firefox & Chrome

My code is working well in IE but not working in firefox & Chrome.

Please have a look on the code.

Css to freeze the HeadeRow

CSS

.Freezing
      {
          position:relative ;
          background-color: #902b01;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 10px;
          font-weight: normal;
          padding: 5px;
          white-space: nowrap;
      }

SQL

i am just using CSS to freeze the HeaderRow which is working well in IE but not in other one and i need to do it in FireFox & Chrome

Please help me in this.

Thanks

Posted 10-May-12 4:05am

Ashish k. Rajput

Add a Solution

4 solutions

Solution 1

position:relative ;

It is for IE

position:fixed ;

It is for Firefox,chrome,etc...

Posted 10-May-12 4:21am

vino2012

Updated 10-May-12 4:22am

v2

Solution 3

HI Ashish,
I think I have solution of this.
please see below javascript code

var orgTop = 0;
$(document).scroll(function () {

var id = $("tr:.header").get(0);
//alert(id)
var offset = $(id).offset();
var elPosition = $(id).position();
var elWidth = $(id).width();
var elHeight = $(id).height();
if (orgTop == 0) {
orgTop = elPosition.top;
}
if ($(window).scrollTop() <= orgTop) {

id.style.position = 'relative';
id.style.top = 'auto';
id.style.width = 'auto';
id.style.height = 'auto';
}
else {
id.style.position = 'absolute';
id.style.top = $(window).scrollTop() + 'px';
id.style.width = elWidth + 'px';
id.style.height = elHeight + 'px';
}
});

where [.header] is the css class of your Grid header.
Just add this script on the page and replace [header] with the css class name you have used for your header.

Posted 24-Sep-12 3:04am

Amit7Verma

Solution 4

it will be usefull check this.using jquery
http://csharpdotnetfreak.blogspot.com/2011/11/jquery-fixed-header-scrollable-gridview.html[^]

Posted 24-Sep-12 3:49am

S.P.Tiwari

Updated 24-Sep-12 3:50am

v2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Sandeep Mewara · Accepted Answer · 2012-05-10T04:36:00

Solution 2

Have a look at the following article, it says that it works on IE, Firefox & Chrome:
Grid View with Fixed Header[^]

Posted 10-May-12 4:36am

Sandeep Mewara

Comments

VJ Reddy 10-May-12 20:23pm

Good find. 5!

Sandeep Mewara 10-May-12 22:38pm

Yeah. Thanks.

Pankaj Nikam 24-Sep-12 9:21am

+5 :) awesome share.

Sandeep Mewara 24-Sep-12 9:24am

Thanks.