0
Ich versuche, ein GridView mit festen Headern einzurichten. Ich kann dies jedoch tun, sobald ich meine PagerTemplate am Anfang der Seite hinzugefügt habe, sind meine Header nicht mehr fixiert. Wenn ich das PagerTemplate weglasse oder es stattdessen unten anlege, funktioniert alles wie erwartet. Unten ist mein Code mit der PagerTemplate an der Spitze, wie ich es will, so dass die Header nicht für vertikales Scrollen fixiert sind. Jede Hilfe ist willkommen:GridView mit Frozen Header und PagerTemplate
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Language" content="en-us" />
<style type="text/css">
.GridViewStyle
{
background-color:White;
}
.GridViewHeaderStyle
{
color:White;
background-color:Black;
}
</style>
<script language="javascript" type="text/javascript">
function CreateGridHeader(DataDiv, GridView1, HeaderDiv) {
var DataDivObj = document.getElementById(DataDiv);
var DataGridObj = document.getElementById(GridView1);
var HeaderDivObj = document.getElementById(HeaderDiv);
//********* Creating new table which contains the header row ***********
var HeadertableObj = HeaderDivObj.appendChild(document.createElement('table'));
DataDivObj.style.paddingTop = '0px';
var DataDivWidth = DataDivObj.clientWidth;
DataDivObj.style.width = '5000px';
//********** Setting the style of Header Div as per the Data Div ************
HeaderDivObj.className = DataDivObj.className;
HeaderDivObj.style.cssText = DataDivObj.style.cssText;
//**** Making the Header Div scrollable. *****
HeaderDivObj.style.overflow = 'auto';
//*** Hiding the horizontal scroll bar of Header Div ****
HeaderDivObj.style.overflowX = 'hidden';
//**** Hiding the vertical scroll bar of Header Div ****
HeaderDivObj.style.overflowY = 'hidden';
HeaderDivObj.style.height = DataGridObj.rows[0].clientHeight + 'px';
//**** Removing any border between Header Div and Data Div ****
HeaderDivObj.style.borderBottomWidth = '0px';
//********** Setting the style of Header Table as per the GridView ************
HeadertableObj.className = DataGridObj.className;
//**** Setting the Headertable css text as per the GridView css text
HeadertableObj.style.cssText = DataGridObj.style.cssText;
HeadertableObj.border = '1px';
HeadertableObj.rules = 'all';
HeadertableObj.cellPadding = DataGridObj.cellPadding;
HeadertableObj.cellSpacing = DataGridObj.cellSpacing;
//********** Creating the new header row **********
var Row = HeadertableObj.insertRow(0);
Row.className = DataGridObj.rows[0].className;
Row.style.cssText = DataGridObj.rows[0].style.cssText;
Row.style.fontWeight = 'bold';
//******** This loop will create each header cell *********
for (var iCntr = 0; iCntr < DataGridObj.rows[0].cells.length; iCntr++) {
var spanTag = Row.appendChild(document.createElement('td'));
spanTag.innerHTML = DataGridObj.rows[0].cells[iCntr].innerHTML;
var width = 0;
//****** Setting the width of Header Cell **********
if (spanTag.clientWidth > DataGridObj.rows[1].cells[iCntr].clientWidth) {
width = spanTag.clientWidth;
}
else {
width = DataGridObj.rows[1].cells[iCntr].clientWidth;
}
if (iCntr <= DataGridObj.rows[0].cells.length - 2) {
spanTag.style.width = width + 'px';
}
else {
spanTag.style.width = width + 20 + 'px';
}
DataGridObj.rows[1].cells[iCntr].style.width = width + 'px';
}
var tableWidth = DataGridObj.clientWidth;
//********* Hidding the original header of GridView *******
DataGridObj.rows[0].style.display = 'none';
//********* Setting the same width of all the componets **********
HeaderDivObj.style.width = DataDivWidth + 'px';
DataDivObj.style.width = DataDivWidth + 'px';
DataGridObj.style.width = tableWidth + 'px';
HeadertableObj.style.width = tableWidth + 20 + 'px';
return false;
}
function Onscrollfnction() {
var div = document.getElementById('DataDiv');
var div2 = document.getElementById('HeaderDiv');
//****** Scrolling HeaderDiv along with DataDiv ******
div2.scrollLeft = div.scrollLeft;
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="HeaderDiv">
</div>
<div id="DataDiv" style="overflow:auto; width:100%; height:500px;" onscroll="Onscrollfnction();">
<asp:GridView ID="GridView1" runat="server"
DataSourceID="SqlDS1" BackColor="White"
OnDataBound="GridView1_DataBound" AllowPaging="True"
AllowSorting="True" PageSize="1000" OnPreRender="GridView_PreRender"
CssClass="GridViewStyle" onrowdatabound="GridView1_RowDataBound">
<PagerSettings Position="Top" />
<PagerTemplate>
<div>
<asp:DropDownList ID="PagingDropDownList" runat="server" AutoPostBack="true"
OnSelectedIndexChanged="PagingDropDownList_SelectedIndexChanged" height="30px" />
</div>
</PagerTemplate>
<HeaderStyle CssClass="GridViewHeaderStyle" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDS1" runat="server"
ConnectionString="<%$ ConnectionStrings:TTN-CSS-01ConnectionString %>"
SelectCommandType="StoredProcedure">
</asp:SqlDataSource>
</div>
</div>
</form>
</body>
</html>
EDIT: Blick in diese ein wenig mehr, es sieht aus wie das Problem ist, dass, wenn die Tabelle aufgebaut ist, wenn es Pagertemplate auf Top verwendet dann die neue Tabelle erzeugt durch Das Javascript benutzt das als oberste Zeile, also wenn ich mich nicht irre, ist die Paging-Zeile die eingefrorene (obwohl ich sie bereits als feste Position habe). Ich bin mir nicht sicher, wie ich das lösen soll. Nachdem ich die Seiten geladen und die Quelle angesehen habe, sehe ich, was ich sehe.
Pagertemplate auf Top (nicht funktioniert)
<div>
<div id="HeaderDiv">
</div>
<div id="DataDiv" style="overflow:auto; width: 100%; height: 500px;" onscroll="Onscrollfnction();">
<div>
<table class="GridViewStyle" cellspacing="0" rules="all" border="1" id="GridView1" style="background-color:White;border-collapse:collapse;">
<tr>
<td colspan="16">
<div class="pages">
<select name="GridView1$ctl01$PagingDropDownList" onchange="javascript:setTimeout('__doPostBack(\'GridView1$ctl01$PagingDropDownList\',\'\')', 0)" id="GridView1_ctl01_PagingDropDownList" style="height:30px;">
<option selected="selected" value="1">1</option>
</select>
</div>
</td>
</tr>
<tr style="color:White;background-color:#DF1E37;">
<th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Col1')" style="color:White;">Col1</a>
Pagertemplate auf der Unterseite oder aus (Arbeits)
<div>
<div id="HeaderDiv">
</div>
<div id="DataDiv" style="overflow:auto; width: 100%; height: 500px;" onscroll="Onscrollfnction();">
<div>
<table class="GridViewStyle" cellspacing="0" rules="all" border="1" id="ReportsGridView" style="background-color:White;border-collapse:collapse;">
<tr style="color:White;background-color:#DF1E37;">
<th scope="col"><a href="javascript:__doPostBack('ReportsGridView','Sort$Col1')" style="color:White;">Col1</a></th>