Remove From My Forums

Gridview column total dynamically using jquery in asp.net

Question

User1152553138 posted

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

<!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>

  


</head>
<body>
    <form id="form1" runat="server">
   

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".calculate").keyup(function () {
                Calculate();
            });
            function Calculate() {
                var grandTotal = 0;
                $('[id*=testgrid] tr').each(function () {
                    var row = $(this);
                    var qty1 = $('[id*=txtTotalQty]', row).val();
                    var qty = $('[id*=txtCalcQuantity]', row).val();

                    var total;
                    var perc;
                    if (qty1 != '' && !isNaN(qty1) && qty != '' && !isNaN(qty)) {
                        total = parseFloat(qty1) - parseFloat(qty);
                        grandTotal += total;
                        $("[id*=lblGrandTotal]").html(grandTotal);
                    } else if (qty1 == '' || qty == '') {
                        total = 0;
                        grandTotal += total;
                        $("[id*=lblGrandTotal]").html(grandTotal);
                    }
                    $('[id*=lblTotal]', row).html(total);
                })
                SetPercentage(grandTotal);
            }
//            function SetPercentage(grandTotal) {
//                $('[id*=lblTotal]').each(function () {
//                    var total = $(this).html();
//                    var row = $(this).closest('tr');
//                    if (total != '' && total != 0) {
//                        var percent = (parseFloat(total) / grandTotal).toFixed(2);
//                        $('[id*=lblPercentage]', row).html(percent);
//                    }
//                });
//            }
        });
    </script>
    <asp:GridView ID="testgrid" runat="server" AutoGenerateColumns="False" ShowFooter="true">
        <Columns>
            <asp:BoundField DataField="RowNum" />

             <asp:TemplateField HeaderText="Total Qty">
                <ItemTemplate>
                    <asp:TextBox ID="txtTotalQty" placeholder="Total Qty" runat="server"
                        class="calculate"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>

            <asp:TemplateField HeaderText="Dis Quantity">
                <ItemTemplate>
                    <asp:TextBox ID="txtCalcQuantity" placeholder="Dis Quantity" runat="server" class="calculate"></asp:TextBox>
                </ItemTemplate>
                <FooterTemplate>
                    <asp:Label ID="lblGrandTotal1" runat="server" />
                </FooterTemplate>
            </asp:TemplateField>
          <%--  <asp:TemplateField HeaderText="Bal Qty">
                <ItemTemplate>
                    <asp:TextBox ID="txtCalcUnitprice" placeholder="Enter Unit Price" runat="server"
                        class="calculate"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>--%>
            <asp:TemplateField HeaderText="Bal Total">
                <ItemTemplate>
                    <asp:Label ID="lblTotal" runat="server" Text="0"></asp:Label>
                </ItemTemplate>
                 <FooterTemplate>
                    <asp:Label ID="lblGrandTotal" runat="server" />
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Percentage">
                <ItemTemplate>
                    <asp:Label ID="lblPercentage" runat="server"></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>


    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Services;

public partial class TestGridTotal : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("RowNum");
            dt.Rows.Add("1");
            dt.Rows.Add("2");
            dt.Rows.Add("3");
            testgrid.DataSource = dt;
            testgrid.DataBind();
        }
    }
}

The above code gridview total is orking fine. But i need column total for the column Dis Quantity

Kindly let me know what is wrong in the code

Tuesday, October 9, 2018 7:16 AM

Answers

User2103319870 posted

Even here Quantity total is not coming up ...

Change your Javascript CalculateTotals method like below

 function CalculateTotals() {
            var gv = document.getElementById("<%= GridView1.ClientID %>");
            var tb = gv.getElementsByTagName("input");
            var lb = gv.getElementsByTagName("span");

            var sub = 0;
            var total = 0;
            var indexQ = 1;
            var indexP = 0;
            var price = 0;
            //Variable to hold the total Quantity
            var totalQty = 0;

            for (var i = 0; i < tb.length; i++) {
                if (tb[i].type == "text") {
                    ValidateNumber(tb[i]);
                   
                    price = lb[indexP].innerHTML.replace("$", "").replace(",", "");
                    sub = parseFloat(price) - parseFloat(tb[i].value);
                    //Code to total the quantity value
                    if (tb[i].value !== "") {
                        totalQty = parseInt(totalQty) + parseInt(tb[i].value);
                    }
                    if (isNaN(sub)) {
                        lb[i + indexQ].innerHTML = "0.00";
                        sub = 0;
                    }
                    else {
                        lb[i + indexQ].innerHTML = FormatToMoney(sub, "Rs.", ",", ".");;
                    }

                    indexQ++;
                    indexP = indexP + 2;

                    total += parseFloat(sub);
                }
            }

            lb[lb.length - 1].innerHTML = FormatToMoney(total, "Rs.", ",", ".");
            //Assign total quantity to label
            lb[lb.length - 2].innerHTML = totalQty;
        }

Complete Code

  <script type="text/javascript">

        function CalculateTotals() {
            var gv = document.getElementById("<%= GridView1.ClientID %>");
            var tb = gv.getElementsByTagName("input");
            var lb = gv.getElementsByTagName("span");

            var sub = 0;
            var total = 0;
            var indexQ = 1;
            var indexP = 0;
            var price = 0;
            //Variable to hold the total Quantity
            var totalQty = 0;

            for (var i = 0; i < tb.length; i++) {
                if (tb[i].type == "text") {
                    ValidateNumber(tb[i]);
                    debugger;
                    price = lb[indexP].innerHTML.replace("$", "").replace(",", "");
                    sub = parseFloat(price) - parseFloat(tb[i].value);
                    //Code to total the quantity value
                    if (tb[i].value !== "") {
                        totalQty = parseInt(totalQty) + parseInt(tb[i].value);
                    }
                    if (isNaN(sub)) {
                        lb[i + indexQ].innerHTML = "0.00";
                        sub = 0;
                    }
                    else {
                        lb[i + indexQ].innerHTML = FormatToMoney(sub, "Rs.", ",", ".");;
                    }

                    indexQ++;
                    indexP = indexP + 2;

                    total += parseFloat(sub);
                }
            }

            lb[lb.length - 1].innerHTML = FormatToMoney(total, "Rs.", ",", ".");
            //Assign total quantity to label
            lb[lb.length - 2].innerHTML = totalQty;
        }

        function ValidateNumber(o) {
            if (o.value.length > 0) {
                o.value = o.value.replace(/[^\d]+/g, ''); //Allow only whole numbers  
            }
        }
        function isThousands(position) {
            if (Math.floor(position / 3) * 3 == position) return true;
            return false;
        };

        function FormatToMoney(theNumber, theCurrency, theThousands, theDecimal) {
            var theDecimalDigits = Math.round((theNumber * 100) - (Math.floor(theNumber) * 100));
            theDecimalDigits = "" + (theDecimalDigits + "0").substring(0, 2);
            theNumber = "" + Math.floor(theNumber);
            var theOutput = theCurrency;
            for (x = 0; x < theNumber.length; x++) {
                theOutput += theNumber.substring(x, x + 1);
                if (isThousands(theNumber.length - x - 1) && (theNumber.length - x - 1 != 0)) {
                    theOutput += theThousands;
                };
            };
            theOutput += theDecimal + theDecimalDigits;
            return theOutput;
        }
    </script>

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Wednesday, October 10, 2018 2:26 AM

User839733648 posted

Hi Ashraf007,

Ashraf007

The above code gridview total is orking fine. But i need column total for the column Dis Quantity

Kindly let me know what is wrong in the code

According to your descripton and code, I suggest that you could add another variable to set the total of Dis Quantity.

For more information, you could refer to the code below.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".calculate").keyup(function () {
                Calculate();
            });
            function Calculate() {
                var grandTotal = 0;
                var disQtyTotal = 0;

                $('[id*=testgrid] tr').each(function () {
                    var row = $(this);
                    var qty1 = $('[id*=txtTotalQty]', row).val();
                    var qty = $('[id*=txtCalcQuantity]', row).val();

                    var total;
                    var perc;
                    var disQty;
                    if (qty1 != '' && !isNaN(qty1) && qty != '' && !isNaN(qty)) {
                        total = parseFloat(qty1) - parseFloat(qty);
                        grandTotal += total;
                        $("[id*=lblGrandTotal]").html(grandTotal);

                        disQty = parseFloat(qty);
                        disQtyTotal += disQty;
                        $("[id*=lblGrandTotal1]").html(disQtyTotal);
                    } else if (qty1 == '' || qty == '') {
                        total = 0;
                        grandTotal += total;
                        $("[id*=lblGrandTotal]").html(grandTotal);

                        disQty = 0;
                        disQtyTotal += disQty;
                        $("[id*=lblGrandTotal1]").html(disQtyTotal);
                    }
                    $('[id*=lblTotal]', row).html(total);
                })
                //SetPercentage(grandTotal);
            }
            //            function SetPercentage(grandTotal) {
            //                $('[id*=lblTotal]').each(function () {
            //                    var total = $(this).html();
            //                    var row = $(this).closest('tr');
            //                    if (total != '' && total != 0) {
            //                        var percent = (parseFloat(total) / grandTotal).toFixed(2);
            //                        $('[id*=lblPercentage]', row).html(percent);
            //                    }
            //                });
            //            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:GridView ID="testgrid" runat="server" AutoGenerateColumns="False" ShowFooter="true">
            <Columns>
                <asp:BoundField DataField="RowNum" />

                <asp:TemplateField HeaderText="Total Qty">
                    <ItemTemplate>
                        <asp:TextBox ID="txtTotalQty" placeholder="Total Qty" runat="server" class="calculate"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText="Dis Quantity">
                    <ItemTemplate>
                        <asp:TextBox ID="txtCalcQuantity" placeholder="Dis Quantity" runat="server" class="calculate"></asp:TextBox>
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:Label ID="lblGrandTotal1" runat="server" />
                    </FooterTemplate>
                </asp:TemplateField>
                <%--  <asp:TemplateField HeaderText="Bal Qty">
                <ItemTemplate>
                    <asp:TextBox ID="txtCalcUnitprice" placeholder="Enter Unit Price" runat="server"
                        class="calculate"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>--%>
                <asp:TemplateField HeaderText="Bal Total">
                    <ItemTemplate>
                        <asp:Label ID="lblTotal" runat="server" Text="0"></asp:Label>
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:Label ID="lblGrandTotal" runat="server" />
                    </FooterTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Percentage">
                    <ItemTemplate>
                        <asp:Label ID="lblPercentage" runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </form>
</body>
</html>

result:

Best Regards,

Jenifer

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Wednesday, October 10, 2018 5:29 AM

All replies