How to freeze GridView header?

StackOverflow https://stackoverflow.com/questions/157528

  •  03-07-2019
  •  | 
  •  

Question

As in a title, does anyone know how to freeze GridView header in ASP.NET ?

Was it helpful?

Solution

Option (a) buy into a UI package that includes a souped-up GridView with this functionality built-in.

Option (b) roll your own - it's not simple. Dino Esposito has one approach.

EDIT: Just noticed that the Dino article links to a subscriber-only area on the ASPnetPro magazine site.

Here's another approach using extenders.

OTHER TIPS

You can do it in the css

Freeze Header: 1. Define class .Freezing in Stylesheet:

.Freezing
{
   position:relative ;
   top:expression(this.offsetParent.scrollTop);
   z-index: 10;
}

2.Assign Datagrid Header's cssClass to Freezing

Try this open-source project for ASP.NET. It extends GridView to provide fixed header, footer and pager and resizable column width. Works well in IE 6/7/8, Firefox 3.0/3.5, Chrome and Safari.

http://johnsobrepena.blogspot.com/2009/09/extending-aspnet-gridview-for-fixed.html

I too faced a similar issue while developing in the web applications in Asp.Net 2.0 / 3.5.

One fine day, I came across IdeaSparks ASP.NET CoolControls. It helps to display fix column headers, footer and pager.

I used them personally and I really loved it!

To check the control click here : IdeaSparks ASP.NET CoolControls

Hope this helps!

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

<script type="text/javascript" language="javascript">
    var orgTop = 0;
    $(document).scroll(function () {
        var id = $("tr:.header").get(0);
        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';

        }
    });
</script>

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.

Give this a try should solve the problem http://www.codeproject.com/KB/webforms/FreezePaneDatagrid.aspx

You may try the following sample

Freeze GridView Columns

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top