Gridview with fixed header and full page width grid

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 added all columns in design itself.But still I am facing problem when columns have large length text.

I am trying to freeze the header of Gridview by using code given in this link

It works but the problem is fixing the Gridview to full page size width. That is Gridview should appear full screen in the browser. It works properly if a content of column are small. But if a column has large length value then the data require about 2 or 3 lines inside a cell . In this case grid header width and columns width not being set equally and looks odd.
I tried using HeaderStyle-Width and ItemStyle-Width with % vales.I didn’t change anything in script. But it didn’t help.
So i tried to fix this by specifying HeaderStyle-Width and ItemStyle-Width for each column.
Then it works fine. But here I face another problem . That is due to fixed width the grid will not display full screen. For a high resolution display grid shows only about 75% width of screen.

So how can it be fixed. I want grid to be appear full screen and columns and header should be aligned properly.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="https://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="nofollow noreferrer noopener" 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.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0