Freeze GridView footer using jQuery in ASP.Net

Hi Listowel,

I have created a sample which full fill your requirement

HTML

<div>
    <div id="container" style="overflow: scroll; overflow-x: hidden">
    </div>
    <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ShowHeader="true"
            ShowFooter="true">
            <Columns>
                <asp:TemplateField HeaderText="Ministry">
                    <HeaderTemplate>
                        <asp:CheckBox ID="chkAll" runat="server" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="chkData" runat="server" />
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:CheckBox ID="chkDataFooter" runat="server" />
                    </FooterTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Ministry">
                    <ItemTemplate>
                        <asp:Label ID="Ministry" runat="server" Text='<%#Eval("Ministry")%>' />
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="txtMinistry" runat="server" />
                    </FooterTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Title">
                    <ItemTemplate>
                        <asp:Label ID="Title" runat="server" Text='<%#Eval("Title")%>' />
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="txtTitle" runat="server" />
                    </FooterTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Criteria">
                    <ItemTemplate>
                        <asp:Label ID="Criteria" runat="server" Text='<%#Eval("Criteria")%>' />
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="txtTitle" runat="server" />
                    </FooterTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    <div>
        <script type="text/javascript" src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var width = new Array();
                var table = $("table[id*=GridView1]");
                table.find("th").each(function (i) {
                    width[i] = $(this).width();
                });
                headerRow = table.find("tr:first");
                headerRow.find("th").each(function (i) {
                    $(this).width(width[i]);
                });
                var header = table.clone();
                header.empty();
                header.append(headerRow);
                header.css("width", width);
                $("#container").before(header);
                var footer = table.clone();
                footer.empty();
                footer.append(table.find("tr:last"));
                table.find("tr:first td").each(function (i) {
                    $(this).width(width[i]);
                });
                footer.find("td").each(function (i) {
                    $(this).width(width[i]);
                });
                $("#container").height(300);
                $("#container").width(table.width() + 20);
                $("#container").append(table);
                $("#container").after(footer);
            });
        </script>
    </div>
</div>

C#

protected void Page_Load(object sender, EventArgs e)
{
    var obj = new { Ministry = "Ministry 0", Title = "Title 0", Criteria = "Criteria 0" };
    var objList = (new[] { obj }).ToList();
    for (int i = 1; i < 100; i++)
    {
        objList.Add(new { Ministry = "Ministry " + i.ToString(), Title = "Title " + i.ToString(), Criteria = "Criteria " + i.ToString() });
    }
    GridView1.DataSource = objList;
    GridView1.DataBind();
}

ScreenShot