Gridview-with-fixed-Header-and-footer

Gridview with fixed Header and footer in asp.net C#

Here I will explain how to display fixed header and footer to gridview with help of jQuery in Asp.net C# . Lets see code.

Code: GridviewFix2.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridviewFix2.aspx.cs" 
    Inherits="LearnBootstrap.Asp.Net.GridviewFix2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <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(200);
            $("#container").width(table.width() + 20);
            $("#container").append(table);
            $("#container").after(footer);
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="container" style="overflow: scroll; overflow-x: hidden">
        </div>
        <div>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ShowHeader="true"
                 OnRowDataBound="GridView1_RowDataBound" 
                ShowFooter="true">
                <Columns>
                    <asp:TemplateField HeaderText="StudentID">
                        <ItemTemplate>
                            <asp:Label ID="StudentID" runat="server" Text='<%#Eval("StudentID")%>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="StudentName">
                        <ItemTemplate>
                            <asp:Label ID="Title" runat="server" Text='<%#Eval("StudentName")%>' />
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:Label runat="server"  Text="Total Fees: " ></asp:Label>
                        </FooterTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Fees">
                        <ItemTemplate>
                            <asp:Label ID="lblFees" runat="server" Text='<%#Eval("Fees")%>' />
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:Label runat="server" ID="lblTotalFees" ></asp:Label>
                        </FooterTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
    </form>
</body>
</html>

Code: GridviewFix2.aspx.cs

                    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace LearnBootstrap.Asp.Net
{
    public partial class GridviewFix2 : System.Web.UI.Page
    {
        int TotalFee = 0;
        protected void Page_Load(object sender, EventArgs e)
        {
            var obj = new { StudentID = "Std1", StudentName = "Title 0", Fees = 230 };
            var objList = (new[] { obj }).ToList();
            for (int i = 1; i < 100; i++)
            {
                objList.Add(new { StudentID = "Std" + (i+1).ToString(),
                    StudentName = "Student " + i.ToString(), Fees = 230 });
            }
            GridView1.DataSource = objList;
            GridView1.DataBind();
        }
        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                TotalFee += Convert.ToInt32(DataBinder.Eval(e.Row.DataItem, "Fees"));
            }
            if (e.Row.RowType == DataControlRowType.Footer)
            {
                Label lblreceiptcount = (Label)e.Row.FindControl("lblTotalFees");
                lblreceiptcount.Text = TotalFee.ToString("0");
            }
        }
    }
}

Output:

In above code we have used jQuery to fixed the Header and Footer of gridview. Data reqired for gridview in generate with help of loop and store in List object. Footer total is done with help of gridview OnRowDataBound event.

11 April 2021

Gridview-with-fixed-Header-and-footer

No comments:

Post a Comment