Freezing gridview header and SUB headers

Question

There are multiple questions asked in SO and elesewhere with regards to Freezing/Fixed GridView headers. I am currently using one of the plugins for a single header GridView.

Yet it's not very elegant. As the header columns don't align with Data columns after jQuery function is called.

The circled columns outlines shows the "un-alignment".

Apart from unaligned issue, there is a requirement to freeze headers and sub headers of another GridView as shown below.

Now this raises few concerns.

1. Writing a new jQuery plug-in for sub headers. The plug-in I am currently using refers to this post. And I will need substantial knowledge support to write a new one.
2. Create Two different Gridviews, one for headers and One for data. And there will be alignment issues (as it was the earliest design.) Plus all of these gridviews perform DML/CRUD operations.
3. Is it possible to write a html code for headers and hide the headers of GridView? However that too will have challenge in terms of managing the dynamic alignment with regards to the contents/data.

Given this scenario and options, I am just perplexed what could be the less costly (time/efforts) direction, yet with flexibility for future updates. Also appreciate any insights to edit the current jquery function to accommodate correct alignments for single header GridView.

Answer 1

As you're already using a plugin for this, am sure it should not be difficult for you to use yet another one but this time it should align your header width with your data columns. Make sure your define/adjust your column width using ItemStyle-Width property for either the boundcolumn or TemplateField

Link to GridViewScroll Demo that does this job perfect. Download the plugin from here. Refer my others answers here and here on SO for the similar problem

Here is the code

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