Gridview with fixed header and full page width grid

Question

I had previously asked question Set header width and column properly during freeze the header in gridview By using those solution I found some problem with resolution So I a

Answer 1

If you don't mind using a little jquery plugin then it might save your time. I know I used to try out all the recommendations out there in internet using css expression and javascript solutions for one of my earlier projects but it always breaks in one or the other browsers and the header column width and row column width may not align for dynamic data length.

Link to GridViewScroll Demo that does this job perfect.

Here is how I used it in my application and it works flawlessly. Refer my another answer on SO for the similar problem.

<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
        }
    });
}

And the screen print on how the frozen grid header looks in my application. You can event freeze certain columns of the grid if you have a lengthy row data. From the image the columns that are grayed out are the ones being frozen in my application.