User618430650 posted
I created a scrollable(left and right, up and down) gridview with a fixed header that has 35 boundfield but the fix header does not stay within the parameters of the gridview. The fix header runs off the page. What am I missing for the fix header to stay
within the parameters of the gridview
</asp:Content>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<script src="Scripts/jquery-1.8.2.js"></script>
<script language="javascript">
$(document).ready(function () {
var gridHeader = $('#<%=GridView1.ClientID %>').clone(true); //Here clone Copy of Gridview with style
$(gridHeader).find("tr:gt(0)").remove(); //Here remove all rows except first row (header row)
$('#<%=GridView1.ClientID%> tr th').each(function (i) {
//Here Set Width of each th from gridview with to new table(clone table) th
$("th:nth-child(" + (i + 1) + ")", gridHeader).css('width', $(this).width().toString() + "px");
});
$("#GHead").append(gridHeader);
$("#GHead").css('position', 'absolute');
$("#GHead").css('top', $("#<%=GridView1.ClientID%>").offset().top);
});
</script>
<h3>Scrollable and a Fixed Header</h3>
<div style="width: 100%">
<div id="GHead"></div>
<div style="height: 350px; overflow:auto">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
cellPadding="5" HeaderStyle-BackColor="#f3f3f3">
<Columns>
<asp:BoundField HeaderText="Date" DataField="DATE" />
<asp:BoundField HeaderText="Monday" DataField="Monday" />
<asp:BoundField HeaderText="Tuesday" DataField="Tuesday" />
<asp:BoundField HeaderText="Wednesday" DataField="Wednesday" />
<asp:BoundField HeaderText="Thursday" DataField="Thursday" />
<asp:BoundField HeaderText="Friday" DataField="Friday" />
<asp:BoundField HeaderText="Saturday" DataField="Saturday" />
<asp:BoundField HeaderText="Sunday" DataField="Sunday" />
</Columns>
</asp:GridView>
