I Was using this script: Dynamically freeze ASP.Net Gridview header using JavaScript for a while very succesfully.
however I had an issue arise when asked to allow filtering of my gridview.
I added filters to the gridview but now when you apply a filter to a column it "unfreezes" the header row and removes the scroll bar, showing all table rows, like its removing the height restriction.
My asp/js experience is pretty limited so any advice would be greatly appreciated.
Thanks
<div class="panel panel-default">
<div class="panel-heading"><b><a href="pm.aspx">Project Management Dashboard</a></b> - <a href="main.aspx">Home</a></div>
<%-- scrollable table script--%>
<script type = "text/javascript">
var GridId = "<%=GridView1.ClientID %>";
var ScrollHeight = 650;
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";
scrollableDiv.appendChild(grid);
parentDiv.appendChild(scrollableDiv);
}
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" Width = "100%" AutoGenerateColumns = "false" HeaderStyle-BackColor = "#cccccc" AlternatingRowStyle-BackColor="#add6ff" AllowPaging ="false" OnPageIndexChanging = "OnPaging" PageSize = "50" AllowSorting="true" >
<HeaderStyle CssClass="borderline" />
<Columns>
<asp:BoundField DataField = "id" HeaderText = "id" HtmlEncode = "true" />
<asp:TemplateField>
<HeaderTemplate>
Owner
<asp:DropDownList ID="ddlOwnerF" runat="server" OnSelectedIndexChanged="FilterChanged" AutoPostBack="true" AppendDataBoundItems="true">
<asp:ListItem Text="ALL" Value="ALL"></asp:ListItem>
</asp:DropDownList>
</HeaderTemplate>
<ItemTemplate>
<%# Eval("Owner") %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField = "Type" HeaderText = "Project Type" HtmlEncode = "true"/>
<asp:TemplateField>
<HeaderTemplate>
Customer
<asp:DropDownList ID="ddlCustF" runat="server" OnSelectedIndexChanged="FilterChanged" AutoPostBack="true" AppendDataBoundItems="true">
<asp:ListItem Text="ALL" Value="ALL"></asp:ListItem>
</asp:DropDownList>
</HeaderTemplate>
<ItemTemplate>
<%# Eval("Customer") %>
</ItemTemplate>
</asp:TemplateField>
<asp:HyperLinkField DataNavigateUrlFields = "id" HeaderText = "Project Name" DataNavigateUrlFormatString = "pm_edit.aspx?id={0}" DataTextField = "ProjName" />
<asp:TemplateField>
<HeaderTemplate>
Work Center
<asp:DropDownList ID="ddlWctrF" runat="server" OnSelectedIndexChanged="FilterChanged" AutoPostBack="true" AppendDataBoundItems="true">
<asp:ListItem Text="ALL" Value="ALL"></asp:ListItem>
</asp:DropDownList>
</HeaderTemplate>
<ItemTemplate>
<%# Eval("Wctr") %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField = "DueDate" HeaderText = "Due Date" HtmlEncode = "true"/>
<asp:TemplateField>
<HeaderTemplate>
Review Date
<asp:DropDownList ID="ddlRevDtF" runat="server" OnSelectedIndexChanged="FilterChanged" AutoPostBack="true" AppendDataBoundItems="true">
<asp:ListItem Text="ALL" Value="ALL"></asp:ListItem>
</asp:DropDownList>
</HeaderTemplate>
<ItemTemplate>
<%# Eval("RevDate") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Status
<asp:DropDownList ID="ddlStatusF" runat="server" OnSelectedIndexChanged="FilterChanged" AutoPostBack="true" AppendDataBoundItems="true">
<asp:ListItem Text="ALL" Value="ALL"></asp:ListItem>
</asp:DropDownList>
</HeaderTemplate>
<ItemTemplate>
<%# Eval("StatusText") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
On Plan
<asp:DropDownList ID="ddlOpF" runat="server" OnSelectedIndexChanged="FilterChanged" AutoPostBack="true" AppendDataBoundItems="true">
<asp:ListItem Text="ALL" Value="ALL"></asp:ListItem>
<asp:ListItem Text="Yes" Value="Yes"></asp:ListItem>
<asp:ListItem Text="No" Value="No"></asp:ListItem>
</asp:DropDownList>
</HeaderTemplate>
<ItemTemplate>
<%# Eval("OnPlan") %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField = "PartNums" HeaderText = "Part Numbers" HtmlEncode = "true"/>
<asp:BoundField DataField = "Notes" HeaderText = "Notes" HtmlEncode = "false"/>
<asp:TemplateField ItemStyle-Width = "30px" HeaderText = "Edit">
<ItemTemplate>
<asp:LinkButton ID="lnkEdit" runat="server" Text = "Edit" OnClick = "Edit"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
