"Floating" Gridview Header

Question

Is there a way in ASP.NET to have a "floating" header, much like a header you would see in an Excel sheet that follows you down the page as you scroll?

Or alternatively, an easier route may be to have the header appear after every line, for example:

Header 1 | Header 2 | Header 3
val 1    | val 2    | val 3

Header 1 | Header 2 | Header 3
val 4    | val 5    | val 6

Can either of the above options be done? I get the feeling either route is going to take some javascript wizardry.

score 1 · Accepted Answer · answered Aug 22 '14 at 17:06

I was in the same boat like for one of my previous projects as the requirement was to freeze the header and some of the columns for easy scrolling. I used to try out all the recommendations out there in internet using css expression and javascript solutions but it always breaks in one or the other browsers and it was never complete until I came across a nice plugin that does the job pretty good.

Link to GridViewScroll Demo and the github's link

Here is how I used it in my application and it works flawlessly.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="gridviewScroll.min.js"></script>
<link href="GridviewScroll.css" rel="stylesheet" />

function pageLoad(sender, args) {
   gridviewScroll ();
}

function gridviewScroll() {
   gridView1 = $('#GridView1').gridviewScroll({
        width: 915,
        height: 449,
        railcolor: "#F0F0F0",
        barcolor: "#CDCDCD",
        barhovercolor: "#606060",
        bgcolor: "#F0F0F0",
        freezesize: 5,
        arrowsize: 30,
        varrowtopimg: "../../../images/arrowvt.png",
        varrowbottomimg: "../../../images/arrowvb.png",
        harrowleftimg: "../../../images/arrowhl.png",
        harrowrightimg: "../../../images/arrowhr.png",
        headerrowcount: 1,
        onScrollVertical: function (delta) {
         // store the scroll offset outside of this function in a hidden field and restore if you want to maintain vertical scroll position
        },
        onScrollHorizontal: function (delta) {
          //store the scroll offset outside of this function in a hidden field and restore if you want to maintain horizontal scroll position
        }
    });
}

This works, thanks! I just need to tweak it a bit to get it working with mine, I'm having trouble hiding the scrollbars — Him_Jalpert, Aug 25 '14 at 13:42

score 0 · Answer 2 · answered Aug 22 '14 at 03:18

Try the following (asp.net forums):

1. Add locked Css:

td.locked, th.locked {
    position:relative;    
    left:expression((this.parentElement.parentElement.parentElement.parentElement.scrollLeft-2)+'px');
}

2. In RowDataBound event add css to GridView cell:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Cells[0].CssClass = "locked";
    }
}

score 0 · Answer 3 · answered Aug 22 '14 at 10:01

A pure css based solution can break in some browsers. For that you must make use of some javascript too.

The condensed version of the most favored approach is to clone the original table. Put both tables (hereafter referred to as table1 and table2) inside div containers. The div containers will overlap a bit, and most importantly clip stuff we do not need to show. And the two divs will be stacked (siblings). The first div will contain table1 and its viewable area will be resized to only show the table1 header row. Its scrollbars will also be hidden. table2 will be placed inside the 2nd div with sufficient -ve margin so that its header is not visible to the user. Further more we have to take care of events incase we want to scroll horizontally.

Ps: Will show some code once I have time...

"Floating" Gridview Header

3 Answers3

Linked