Gridview static header - header and rows width not aligning

See more:

jQuery

Gridview

Hi,

I am trying to make gridview header static and scroll down the body. I have tried several css and jquery but none worked for me at all except this.

Now it is working, the header and row width are not aligning. Need help!!.

here is scroll.js

function MakeStaticHeader(gridId, height, width, headerHeight, isFooter) {
    var tbl = document.getElementById(gridId);
    if (tbl) {
        var DivHR = document.getElementById('DivHeaderRow');
        var DivMC = document.getElementById('DivMainContent');
        //        var DivFR = document.getElementById('DivFooterRow');


        //*** Set divheaderRow Properties ****
        DivHR.style.height = headerHeight + 'px';
        DivHR.style.width = (parseInt(width) - 7) + 'px';
        DivHR.style.position = 'relative';
        DivHR.style.top = '0px';
        DivHR.style.zIndex = '10';
        DivHR.style.verticalAlign = 'top';


        //*** Set divMainContent Properties ****
        DivMC.style.width = width + 'px';
        DivMC.style.height = height + 'px';
        DivMC.style.position = 'relative';
        DivMC.style.top = -headerHeight + 'px';
        DivMC.style.zIndex = '1';


        //*** Set divFooterRow Properties ****
        //        DivFR.style.width = (parseInt(width) - 16) + 'px';
        //        DivFR.style.position = 'relative';
        //        DivFR.style.top = -headerHeight + 'px';
        //        DivFR.style.verticalAlign = 'top';
        //        DivFR.style.paddingtop = '2px';


        if (isFooter) {
            var tblfr = tbl.cloneNode(true);
            tblfr.removeChild(tblfr.getElementsByTagName('tbody')[0]);
            var tblBody = document.createElement('tbody');
            tblfr.style.width = '100%';
            tblfr.cellSpacing = "0";

            tblfr.border = "0px";
            tblfr.rules = "none";
            //*****In the case of Footer Row *******
            //            tblBody.appendChild(tbl.rows[tbl.rows.length - 1]);
            //            tblfr.appendChild(tblBody);
            //            DivFR.appendChild(tblfr);
        }
        //****Copy Header in divHeaderRow****
        DivHR.appendChild(tbl.cloneNode(true));
    }
}


function OnScrollDiv(Scrollablediv) {
    document.getElementById('DivHeaderRow').scrollLeft = Scrollablediv.scrollLeft;
    //    document.getElementById('DivFooterRow').scrollLeft = Scrollablediv.scrollLeft;
}

css for gridview:

/* gridview design */
.mydatagrid
{
    width: 80%;
    border: none;
    min-width: 80%;
    position:relative;
}

.header
{
    background-color: #8B8DE3;
    font-family:Calibri;
    color: White;
    border:1px solid black;
    text-align: center;
    font-size:large;
    /*padding: 2px 2px 2px 2px;*/
}
 
.rows
{
    background-color: #D9D9EA;
    font-family:Calibri;
    font-size:medium;
    color: black;
    text-align: center;
    border: 1px solid black;
}

aspx file:

<table width="100%">
    <tr><td></td><td align="center">
    
    <div id="DivRoot" align="center">
    <div style="overflow: hidden;" id="DivHeaderRow">
    </div>
    
     <div style="overflow:scroll;" onscroll="OnScrollDiv(this)" id="DivMainContent">
     
        <asp:GridView ID="grid_score" runat="server" CssClass="mydatagrid" HeaderStyle-CssClass="header" 
        RowStyle-CssClass="rows" AlternatingRowStyle-CssClass="alternaterow" AutoGenerateColumns="false">
        <Columns>
        
        </Columns>
        </asp:GridView>
        </div>
      </div>
        </td><td></td></tr>
    </table>

.cs file:

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                page_onLoad();
                bind_grid();
                ScriptManager.RegisterStartupScript(Page, this.GetType(), "Key", "<script>MakeStaticHeader('" + grid_score.ClientID + "', 500, 900 , 35 ,false); </script>", false);
            }
        }

What I have tried:

i have tried the above code and the header and the rows are not getting aligned