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');
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';
DivMC.style.width = width + 'px';
DivMC.style.height = height + 'px';
DivMC.style.position = 'relative';
DivMC.style.top = -headerHeight + 'px';
DivMC.style.zIndex = '1';
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";
}
DivHR.appendChild(tbl.cloneNode(true));
}
}
function OnScrollDiv(Scrollablediv) {
document.getElementById('DivHeaderRow').scrollLeft = Scrollablediv.scrollLeft;
}
css for gridview:
.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;
}
.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