I am using Javascript for gridview header freeze privided by this web site. I keep gridview inside update panel, when i am clicking another button from another update panel, gridview showing all rows. please help me
var GridId = "<%=gvOrder.ClientID %>";
var ScrollHeight = 400;
window.onload = function () {
var grid = document.getElementById(GridId);
var gridWidth = grid.offsetWidth;
var gridHeight = grid.offsetHeight;
var headerCellWidths = new Array();
for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
}
grid.parentNode.appendChild(document.createElement("div"));
var parentDiv = grid.parentNode;
var table = document.createElement("table");
for (i = 0; i < grid.attributes.length; i++) {
if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
}
}
table.style.cssText = grid.style.cssText;
table.style.width = gridWidth + "px";
table.appendChild(document.createElement("tbody"));
table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
var cells = table.getElementsByTagName("TH");
var gridRow = grid.getElementsByTagName("TR")[0];
for (var i = 0; i < cells.length; i++) {
var width;
if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
width = headerCellWidths[i];
}
else {
width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
}
cells[i].style.width = parseInt(width - 3) + "px";
gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
}
parentDiv.removeChild(grid);
var dummyHeader = document.createElement("div");
dummyHeader.appendChild(table);
parentDiv.appendChild(dummyHeader);
var scrollableDiv = document.createElement("div");
if (parseInt(gridHeight) > ScrollHeight) {
gridWidth = parseInt(gridWidth) + 17;
}
scrollableDiv.style.cssText = "overflow:auto;height:" + ScrollHeight + "px;width:" + gridWidth + "px; margin-top:-21px;";
scrollableDiv.appendChild(grid);
parentDiv.appendChild(scrollableDiv);
}
<div style="overflow-x: auto;">
<asp:UpdatePanel ID="upOrderGrid" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="gvOrder" runat="server" AutoGenerateColumns="false" ClientIDMode="Static"
CssClass="table table-bordered tableLayout" HeaderStyle-CssClass="header" RowStyle-CssClass="rows" ShowHeader="true"
DataKeyNames="OrderId" ShowHeaderWhenEmpty="True" EmptyDataText="There are no data records to display."
OnRowCommand="gvOrder_RowCommand">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<span>Order Id</span>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="label1" runat="server" Text='<%# Bind("OrderIdForStaff") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<span>Carrier</span>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="label2" runat="server" Text='<%# Bind("Carrier") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<span>Customer</span>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="label3" runat="server" Text='<%# Bind("Customer") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<span>Reference No</span>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="label4" runat="server" Text='<%# Bind("ReferenceNo") %>'></asp:Label>
</ItemTemplate>
<ItemStyle CssClass="WordWrap" />
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<span>Origin</span>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="label5" runat="server" Text='<%# Bind("Origin") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<span>Destination</span>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="label6" runat="server" Text='<%# Bind("Destination") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<span>Net Cost</span>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="label7" runat="server" Text='<%# Bind("NetCost") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<span>Pickup <br />Date</span>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="label8" runat="server" Text='<%# Bind("PickupDate") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<span>Dropoff <br />Date</span>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="label9" runat="server" Text='<%# Bind("DropoffDate") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="ImageButton4" runat="server" ImageAlign="Middle"
ImageUrl="~/Images/Icons/link-symbol-16.png" ToolTip="Link Order" Style="cursor: pointer;"
CommandName="lbLinkOrder" CommandArgument='<%# Eval("OrderId")%>' />
<a href="javascript:void(0)" onclick="window.open('<%# Eval("OctopusCostEditingLink")%>')">
<asp:Image ID="Image1" runat="server"
ImageUrl="~/Images/Icons/octopus-16.png" ToolTip="Octopus Link" />
</a>
</ItemTemplate>
<%--<ItemStyle CssClass="OctopusLink" />--%>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
