Gridview with Fixed Header RRS feed

  • Question

  • 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 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").css('position', 'absolute');

    $("#GHead").css('top', $("#<%=GridView1.ClientID%>").offset().top);



    <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">


    <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" />



    Tuesday, April 10, 2018 9:57 PM

All replies