Fixed ASP.Net GridView Header with Scrollbar in JavaScript

Last Reply 4 months ago By pandeyism

Posted 4 months ago

I need to fix gridview header, please help

    <script src="Scripts/jquery-1.7.1.js"></script>
    <script type="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 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>

 

                            <div style="width: 550px;">
                                <div id="GHead"></div>
                                    <%-- This GHead is added for Store Gridview Header  --%>
                                    <div style="height: 300px; overflow: auto">
                                        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
                                            CellPadding="5" HeaderStyle-BackColor="#f3f3f3">
                                            <Columns>
                                                <asp:BoundField DataField="Name" SortExpression="Name" HeaderText="Vendor"></asp:BoundField>
                                                <asp:BoundField DataField="CopyOf" SortExpression="CopyOf" HeaderText="Label"></asp:BoundField>
                                                <asp:BoundField DataField="Category" SortExpression="Category" HeaderText="Main Category"></asp:BoundField>
                                                <asp:BoundField DataField="CategoryDetHead" SortExpression="CategoryDetHead" HeaderText="Sub Category"></asp:BoundField>
                                                <asp:BoundField DataField="1" SortExpression="1" HeaderText="Last One" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:F2}">
                                                    <ItemStyle Width="80px" />
                                                    <HeaderStyle HorizontalAlign="Center" />
                                                </asp:BoundField>
                                                <asp:BoundField DataField="2" SortExpression="2" HeaderText="2nd Last" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:F2}">
                                                    <ItemStyle Width="80px" />
                                                    <HeaderStyle HorizontalAlign="Center" />
                                                </asp:BoundField>
                                                <asp:BoundField DataField="3" SortExpression="3" HeaderText="3rd Last" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:F2}">
                                                    <ItemStyle Width="80px" />
                                                    <HeaderStyle HorizontalAlign="Center" />
                                                </asp:BoundField>
                                                <asp:BoundField DataField="4" SortExpression="4" HeaderText="4th Last" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:F2}">
                                                    <ItemStyle Width="80px" />
                                                    <HeaderStyle HorizontalAlign="Center" />
                                                </asp:BoundField>
                                                <asp:BoundField DataField="5" SortExpression="5" HeaderText="5th Last" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:F2}">
                                                    <ItemStyle Width="80px" />
                                                    <HeaderStyle HorizontalAlign="Center" />
                                                </asp:BoundField>
                                                <asp:BoundField DataField="6" SortExpression="6" HeaderText="6th Last" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:F2}">
                                                    <ItemStyle Width="80px" />
                                                    <HeaderStyle HorizontalAlign="Center" />
                                                </asp:BoundField>
                                            </Columns>
                                        </asp:GridView>
                                    </div>
                                </div>