Freeze a Gridview header in ASP.NET 3.5

My current project had a typical requirement. Our custom gridview control sometimes has 100’s of record in it.  Obviously we want to implement a freezed header kind of functionality to provide ease in viewing of large number of record in gridview. My gridview has also got dynamic columns as per the user rights hence i really can’t implement the panel kind of feature with scrollbars. That is a very good option for a fixed column gridview type of feature. After googling for few hours i came upon a solution and after doing some minor tweaks the solution worked for me and bingo !!

Here’s the sample code

Make sure that your gridview is enclosed within a div tag with a overflow-y: scroll;overflow-x: hidden style specified on it. Also specify the height of that div as per the height of your required fixed header. Also place a empty div tag  on top of the above mentioned div tag which will be used for the scroll functionality. Just like in sample below –

<!–an extra div required for scroll functionality –>
<div id=”divScroll” runat=”server”>
</div>
<div id=”divContainer” style=”overflow-y: scroll;overflow-x: hidden; height: 200px;” runat=”server”>
<tts:GridViewEx ID=”gvPackingList” runat=”server” AutoGenerateColumns=”False” AllowSorting=”true”
CssClass=”tblGrid” DataKeyNames=”PackingListItemId” EnableViewState=”True” PageSize=”100″
ShowSortIndicators=”false” OnRowDataBound=”gvPackingList_RowDataBound”
AllowPaging=”true” OnPageIndexChanging=”gvPackingList_PageIndexChanging”
OnRowCommand=”gvPackingList_RowCommand” OnSorting=”gvPackingList_Sorting”>
<AlternatingRowStyle CssClass=”alt_row” />
<Columns>
<asp:TemplateField HeaderText=”Action”>
<ItemTemplate>
<asp:ImageButton ID=”lnkEdit” runat=”server” Text=”Edit” ImageUrl=”~/img/icons/page_edit.png”
ToolTip=”Edit Packing Item” CommandName=”Edt” CommandArgument='<%# Bind(“PackingListItemId”) %>’
/>
<asp:ImageButton ID=”lnkDel” runat=”server” Text=”Delete” ImageUrl=”~/img/icons/ico_delete.png”
ToolTip=”Delete Packing Item” CommandName=”Del” CommandArgument='<%# Bind(“PackingListItemId”) %>’
OnClientClick=”return confirmPackingItemDelete();” />
</ItemTemplate>
<HeaderStyle/>
</asp:TemplateField>
<tts:SelectionField DataField=”PackingListItemId”>
<HeaderStyle />
</tts:SelectionField>
</Columns>
</tts:GridViewEx>
</div>

Now call this javascript code on your page load –

function FreezeGridViewHeader() {
/// <summary>
///   Used to create a fixed GridView header and allow scrolling
/// </summary>
var grid = document.getElementById(‘<%= gvPackingList.ClientID %>’);
var gridclone = grid.cloneNode(true);

for (i = gridclone.rows.length – 1; i > 0; i–)

{

gridclone.deleteRow(i);
}

grid.deleteRow(0);
var div = document.getElementById(‘<%= divScroll.ClientID %>’);
div.appendChild(gridclone);
if (navigator.appName != “Microsoft Internet Explorer”) {
//need to manage div width in case of mozilla
div.style.width = ‘883px’;
}
}

Here gvPackingList.ClientID is the gridview on which we want scroll to appear with fixed header. I have to specify a width for mozilla ff since as per my UI and css the gridview was giving some issues. That part of code can be completely optional for you.

Now try it and let me know of any loopholes !!