Click here to Skip to main content
15,923,142 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I'm trying fixed header and footer in grid view. But header alone fixed but footer does not fixed. Please help me to fix.

Below technique has taken from internet.

ASP.NET
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridScrolling.aspx.cs" Inherits="GridScrolling" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <!-- Import JQuery Plugins Starts Here -->
    <script type="text/jscript" src="jquery/jquery-1.9.1.js"></script>
    <script type="text/jscript" src="jquery/jquery-ui-1.10.3.js"></script>
    <link rel="stylesheet" href="jquery/jquery-ui.css" type="text/css" />
    <style type="text/css">
        .divgrid
        {
            height: 500px;
            width: 100%;
        }
        .divgrid table
        {
            width: 100%;
        }
        .divgrid table th
        {
            background-color: Green;
            color: #fff;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            try {
                $(".divgrid").each(function () {
                    var grid = $(this).find("table")[0];
                    var ScrollHeight = $(this).height();
                    var gridWidth = $(this).width();
                    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';
                    }
                    var gridHeight = grid.offsetHeight;
                    if (gridHeight < ScrollHeight)
                        ScrollHeight = gridHeight;
                    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);

                    //fixed footer
                    var dummyFooter = document.createElement('div');
                    dummyFooter.innerHTML = dummyHeader.innerHTML;
                    var footertr = grid.rows[grid.rows.length - 1];
                    grid.deleteRow(grid.rows.length - 1);
                    gridHeight = grid.offsetHeight;
                    if (gridHeight < ScrollHeight)
                        ScrollHeight = gridHeight;
                    scrollableDiv.style.height = ScrollHeight + 'px';
                    dummyFooter.getElementsByTagName('Table')[0].deleteRow(0);
                    dummyFooter.getElementsByTagName('Table')[0].appendChild(footertr);
                    gridRow = dummyHeader.getElementsByTagName('Table')[0].getElementsByTagName('TR')[0];
                    for (var i = 0; i < footertr.cells.length; i++) {
                        var width;
                        if (headerCellWidths[i] > gridRow.getElementsByTagName('TH')[i].offsetWidth) {
                            width = headerCellWidths[i];
                        }
                        else {
                            width = gridRow.getElementsByTagName('TH')[i].offsetWidth;
                        }
                        footertr.cells[i].style.width = parseInt(width - 3) + 'px';
                    }
                    parentDiv.appendChild(dummyFooter);


                });
            }
            catch (err) { }
        }
    );
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="divgrid">
            <asp:GridView ID="gvEmployees" runat="server" ShowFooter="true" AutoGenerateColumns="false">
                <FooterStyle BackColor="Green" />
                <Columns>
                    <asp:BoundField DataField="ModuleID" HeaderText="Module ID" Visible="false" HeaderStyle-Font-Bold="true" />
                    <asp:BoundField DataField="ModuleName" HeaderText="Module Name" HeaderStyle-Font-Bold="true" />
                    <asp:TemplateField ItemStyle-HorizontalAlign="Center">
                        <HeaderTemplate>
                            <input id="chkAll" runat="server" type="checkbox" />
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:CheckBox runat="server" ID="CheckBoxField" Checked='<%#DataBinder.Eval(Container.DataItem, "ActiveStatus")%>' />
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:Button ID="btnUpdate" runat="server" Text="Update" />
                        </FooterTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="SubModuleID" HeaderText="Sub Module ID" Visible="false"
                        HeaderStyle-Font-Bold="true" />
                    <asp:BoundField DataField="SubModuleName" HeaderText="Sub Module Name" HeaderStyle-Font-Bold="true" />
                </Columns>
            </asp:GridView>
        </div>
    </div>
    </form>
</body>
</html>



In Code behind:
C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;

public partial class GridScrolling : System.Web.UI.Page
{
    public string DBConStr = "";

    /// <summary> 
    /// Constructor - Initialize database connection string
    /// </summary>
    public GridScrolling()
    {
        try
        {
            DBConStr = ConfigurationManager.ConnectionStrings["ATM_ADMIN"].ToString().Trim();
        }
        catch (System.Exception ex)
        {
            ExceptionUtility.ExceptionHandling.LogException(ex, ex.Source.ToString());
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        try
        {
            using (SqlConnection _SQLCon = new SqlConnection(DBConStr))
            {
                DataSet ds = new DataSet();
                _SQLCon.Open();
                using (SqlCommand _SQLCmd = new SqlCommand("Fetch_Role_Module_Details", _SQLCon))
                {
                    _SQLCmd.CommandType = CommandType.StoredProcedure;
                    _SQLCmd.Parameters.Add("@RoleName", SqlDbType.NVarChar).Value = "Branch";
                    _SQLCmd.ExecuteNonQuery();
                    SqlDataAdapter _SQLAda = new SqlDataAdapter(_SQLCmd);
                    _SQLAda.Fill(ds);
                    gvEmployees.DataSource = ds.Tables[0].DefaultView;
                    gvEmployees.DataBind();
                }
            }
        }
        catch (System.Exception Ex)
        {
            ExceptionUtility.ExceptionHandling.LogException(Ex, Ex.Source.ToString());
        }
    }
}
Posted
Comments
Sergey Alexandrovich Kryukov 17-Nov-13 1:22am    
If you take some code from anywhere, provide a link to it with proper attribution. Did it show both fixed header and footer? It it did, follow the recipe. Such code samples are easy to find.
—SA
mn.sathish 17-Nov-13 2:08am    
It is working fine in Crome. Problem in IE 8, header is visible and fixed, but footer is not visible.

Link - http://www.dotnetlearners.com/aspdotnet/asp-dotnet-gridview-fixed-header-and-footer.aspx
MTProgrammer 22-Nov-13 16:50pm    
IE 8? you still support that browser version? If so, that will cause you headaches because it is so old and deprecated!
mn.sathish 5-Dec-13 1:53am    
I understood your point. But client wants IE 8 compatability, thats why i'm looking for solution

1 solution

actually there is no direct way for implementing fixed footer. So, here you have to play with gridview and panel.

I have implement in my side now its working fine. and looking good.

just study below link, and get this logic. I have already implement in my side as a test project.

First you make it test project.
JavaScript

C#
<script language="javascript" type="text/javascript">
function MakeStaticHeader(gridId, height, width, headerHeight, isFooter) {
var tbl = document.getElementById(gridId);
if (tbl) {
var DivHR = document.getElementById('DivHeaderRow');
var DivMC = document.getElementById('DivMainContent');
var DivFR = document.getElementById('DivFooterRow');

//*** Set divheaderRow Properties ****
DivHR.style.height = headerHeight + 'px';
DivHR.style.width = (parseInt(width) - 16) + 'px';
DivHR.style.position = 'relative';
DivHR.style.top = '0px';
DivHR.style.zIndex = '10';
DivHR.style.verticalAlign = 'top';

//*** Set divMainContent Properties ****
DivMC.style.width = width + 'px';
DivMC.style.height = height + 'px';
DivMC.style.position = 'relative';
DivMC.style.top = -headerHeight + 'px';
DivMC.style.zIndex = '1';

//*** Set divFooterRow Properties ****
DivFR.style.width = (parseInt(width) - 16) + 'px';
DivFR.style.position = 'relative';
DivFR.style.top = -headerHeight + 'px';
DivFR.style.verticalAlign = 'top';
DivFR.style.paddingtop = '2px';

if (isFooter) {
var tblfr = tbl.cloneNode(true);
tblfr.removeChild(tblfr.getElementsByTagName('tbody')[0]);
var tblBody = document.createElement('tbody');
tblfr.style.width = '100%';
tblfr.cellSpacing = "0";
tblfr.border = "0px";
tblfr.rules = "none";
//*****In the case of Footer Row *******
tblBody.appendChild(tbl.rows[tbl.rows.length - 1]);
tblfr.appendChild(tblBody);
DivFR.appendChild(tblfr);
}
//****Copy Header in divHeaderRow****
DivHR.appendChild(tbl.cloneNode(true));
}
}
</script>



XML
.aspx

<div id="DivRoot" align="left">
<div style="overflow: hidden;" id="DivHeaderRow">
</div>

<div style="overflow:scroll;" onscroll="OnScrollDiv(this)" id="DivMainContent">
<asp:GridView runat="server" ShowFooter="true" scrollbar ID="gvdetails" AutoGenerateColumns="false">
<RowStyle BackColor="#EFF3FB" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle CssClass="GVFixedHeader" />
<FooterStyle CssClass="GVFixedFooter" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="UserId" HeaderText="UserId" FooterText="Footer" />
<asp:BoundField DataField="UserName" HeaderText="UserName" FooterText="Footer" />
</Columns>
</asp:GridView>
</div>

<div id="DivFooterRow" style="overflow:hidden">
</div>



Load Event:

DataTable dt = new DataTable("tst");
dt.Columns.Add("UserID");
dt.Columns.Add("UserName");

DataRow dr;

for(int i=0;i<100;i++)

{

dr = dt.NewRow();
dr["UserID"] = "123" + i.ToString();
dr["UserName"] = "Test" + i.ToString();
dt.Rows.Add(dr);

}

gvdetails.DataSource = dt;
gvdetails.DataBind();

ScriptManager.RegisterStartupScript(Page, this.GetType(), "Key", "<script>MakeStaticHeader('" + gvdetails.ClientID + "', 400, 950 , 40 ,true); </script>", false);



Reference Url :

http://www.dotnetbull.com/2011/11/scrollable-gridview-with-fixed-headers.html[^]
 
Share this answer
 
Comments
mn.sathish 27-Dec-13 4:59am    
Thanks for your solution. I'll check. . ,

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900