Fixed Header Footer in GridView

Question

0.00/5 (No votes)

See more:

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 16-Nov-13 19:15pm

mn.sathish

Add a Solution

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

londhess · Answer 1 · 2013-12-24T01:31:00

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[^]