Calculate Sum (Total) Bootstrap Responsive GridView ASP.Net

Here I have created sample that will help you out.

HTML

<div>
    <asp:GridView ID="GridView1" CssClass="footable" runat="server" AutoGenerateColumns="false"
        Style="max-width: 500px" ShowFooter="true">
        <Columns>
            <asp:BoundField DataField="Id" HeaderText="Customer Id" />
            <asp:BoundField DataField="Name" HeaderText="Customer Name" />
            <asp:BoundField DataField="Country" HeaderText="Country" />
            <asp:BoundField DataField="Salary" HeaderText="Salary" />
        </Columns>
    </asp:GridView>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/css/footable.min.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/js/footable.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('[id*=GridView1]').footable();
            var footer = $('[id*=GridView1] tr:last');
            $('td', footer).eq(0).removeClass('expand');
            $('[id*=GridView1] td').click(function () {
                if (!$(this).hasClass('expand')) {
                    return false;
                };
            });
        });
    </script>
</div>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[4] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country"), new DataColumn("Salary", typeof(int)) });
        dt.Rows.Add(1, "John Hammond", "United States", 70000);
        dt.Rows.Add(2, "Mudassar Khan", "India", 40000);
        dt.Rows.Add(3, "Suzanne Mathews", "France", 30000);
        dt.Rows.Add(4, "Robert Schidner", "Russia", 50000);
        GridView1.DataSource = dt;
        GridView1.DataBind();
        int total = dt.AsEnumerable().Sum(row => row.Field<int>("Salary"));
        GridView1.FooterRow.Cells[3].Text = total.ToString();
        //Attribute to show the Plus Minus Button.
        GridView1.HeaderRow.Cells[0].Attributes["data-class"] = "expand";

        //Attribute to hide column in Phone.
        GridView1.HeaderRow.Cells[1].Attributes["data-hide"] = "phone";
        GridView1.HeaderRow.Cells[2].Attributes["data-hide"] = "phone";

        //Adds THEAD and TBODY to GridView.
        GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
    }
}

Screenshot

Hi Shashikant, Thanks for you kinda response. We can Also Achieve it via Row Data bound.

<asp:TemplateField HeaderText="Salary" ItemStyle-HorizontalAlign="Right">
                            <ItemTemplate>
                                <asp:Label runat="server" ID="lblSalary" Text='<%#Eval("Salary")%>'></asp:Label>
                            </ItemTemplate>
                           <FooterTemplate>
                                <asp:Label runat="server" ID="lblTotalSalary"></asp:Label>
                            </FooterTemplate>
                        </asp:TemplateField>

TimeSpan? TotalSalary { get { return ViewState["TotalSalary"] as TimeSpan?; } set { ViewState["TotalSalary"] = value; } }

        protected void Page_Load(object sender, EventArgs e)
        {
            TotalSalary = new TimeSpan();
        }

protected void grdAttendance_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
Label lblSalary = e.Row.FindControl("lblSalary") as Label;
if (TotalSalary == TimeSpan.Zero)
{
TotalSalary = TimeSpan.Parse(lblSalary.Text);
}
else
{
TotalSalary += TimeSpan.Parse(lblSalary.Text);
}
}
if (e.Row.RowType == DataControlRowType.Footer)
{
 
Label lblTotalSalary = e.Row.FindControl("lblTotalSalary") as Label;
lblTotalSalary.Text = TotalSalary.Value.ToString();
}
}