locked
Gridview column total dynamically using jquery in asp.net RRS feed

  • 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

  • User1152553138 posted

    I have tried another calculation too ...

    Even here Quantity total is not coming up ...

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestTT.aspx.cs" Inherits="TestTT" %>
    
    <!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>
    
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    
        <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;
    
                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);
                        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.", ",", ".");
            }
    
            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>  
    
    
    </head>
    <body>
        <form id="form1" runat="server">
       <asp:gridview ID="GridView1"  runat="server"  ShowFooter="true" AutoGenerateColumns="false">  
            <Columns>  
            <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />  
            <asp:BoundField DataField="Description" HeaderText="Item Description" />  
            <asp:TemplateField HeaderText="Item Price">  
                <ItemTemplate>  
                    <asp:Label ID="LBLPrice" runat="server" Text='<%# Eval("Price","{0:C}") %>'></asp:Label>  
                </ItemTemplate>  
                <FooterTemplate>  
                    <b>Total Qty:</b>  
                </FooterTemplate>  
            </asp:TemplateField>  
            <asp:TemplateField HeaderText="Quantity">  
                <ItemTemplate>  
                    <asp:TextBox ID="TXTQty" runat="server" onkeyup="CalculateTotals();"></asp:TextBox>  
                </ItemTemplate>  
                <FooterTemplate>  
                    <asp:Label ID="LBLQtyTotal" runat="server" Font-Bold="true" ForeColor="Blue" Text="0" ></asp:Label>       
                    <b>Total Amount:</b>  
                </FooterTemplate>  
            </asp:TemplateField>  
            <asp:TemplateField HeaderText="Sub-Total">  
                <ItemTemplate>  
                    <asp:Label ID="LBLSubTotal" runat="server" ForeColor="Green" Text="0.00"></asp:Label>  
                </ItemTemplate>  
                <FooterTemplate>  
                    <asp:Label ID="LBLTotal" runat="server" ForeColor="Green" Font-Bold="true" Text="0.00"></asp:Label>  
                </FooterTemplate>  
            </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 TestTT : System.Web.UI.Page
    {
        
    
        private void BindDummyDataToGrid()
        {
    
            DataTable dt = new DataTable();
            DataRow dr = null;
    
            dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
            dt.Columns.Add(new DataColumn("Description", typeof(string)));
            dt.Columns.Add(new DataColumn("Price", typeof(string)));
    
            dr = dt.NewRow();
            dr["RowNumber"] = 1;
            dr["Description"] = "Nike";
            dr["Price"] = "1000";
            dt.Rows.Add(dr);
    
            dr = dt.NewRow();
            dr["RowNumber"] = 2;
            dr["Description"] = "Converse";
            dr["Price"] = "800";
            dt.Rows.Add(dr);
    
            dr = dt.NewRow();
            dr["RowNumber"] = 3;
            dr["Description"] = "Adidas";
            dr["Price"] = "500";
            dt.Rows.Add(dr);
    
            dr = dt.NewRow();
            dr["RowNumber"] = 4;
            dr["Description"] = "Reebok";
            dr["Price"] = "750";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["RowNumber"] = 5;
            dr["Description"] = "Vans";
            dr["Price"] = "1100";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["RowNumber"] = 6;
            dr["Description"] = "Fila";
            dr["Price"] = "200";
            dt.Rows.Add(dr);
            //Bind the GridView  
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindDummyDataToGrid();
            }
        }  
    
    }

    Tuesday, October 9, 2018 8:09 AM
  • 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