Статический заголовок Gridview-ширина заголовка и строк не выравнивается
Привет,
Я пытаюсь сделать заголовок gridview статичным и прокрутить вниз тело. Я пробовал несколько css и jquery, но ни один из них не работал для меня вообще, кроме этого.
Теперь он работает, заголовок и ширина строки не выравниваются. Нужна помощь!!.
здесь 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 для 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:
<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 :
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); } }
Что я уже пробовал:
я попробовал приведенный выше код, и заголовок и строки не выравниваются