locked
Calculate running total and percentage in gridview using Jquery in ASP.Net RRS feed

  • Question

  • User1910487977 posted
     <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 qty = $('[id*=txtCalcQuantity]', row).val();
                        var price = $('[id*=txtCalcUnitprice]', row).val();
                        var total;
                        var perc;
                        if (qty != '' && !isNaN(qty) && price != '' && !isNaN(price)) {
                            total = parseFloat(qty) * parseFloat(price);
                            grandTotal += total;
                            $("[id*=lblGrandTotal]").html(grandTotal);
                        } else if (qty == '' || price == '') {
                            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="Quantity">
                    <ItemTemplate>
                        <asp:TextBox ID="txtCalcQuantity" placeholder="Enter Quantity" runat="server" class="calculate"></asp:TextBox>
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:Label ID="lblGrandTotal" runat="server" />
                    </FooterTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Unit Price">
                    <ItemTemplate>
                        <asp:TextBox ID="txtCalcUnitprice" placeholder="Enter Unit Price" runat="server"
                            class="calculate"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Total">
                    <ItemTemplate>
                        <asp:Label ID="lblTotal" runat="server" Text="0"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Percentage">
                    <ItemTemplate>
                        <asp:Label ID="lblPercentage" runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    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 is working fine. Instead of label in total column i would like to have textbox. Where i need to change the code?

    Instead of this <asp:Label ID="lblTotal" runat="server" Text="0"></asp:Label> i would like to have Textbox control.

    Saturday, November 9, 2019 8:03 AM

Answers

  • User288213138 posted

    Hi UmerFaiz001,

    Instead of label in total column i would like to have textbox. Where i need to change the code?

    You can get the Textbox value by val() method. The val() method returns or sets the value attribute of the selected elements. and the html() method sets or returns the content of the selected elements.

    The code:

    <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 qty = $('[id*=txtCalcQuantity]', row).val();
                        var price = $('[id*=txtCalcUnitprice]', row).val();
                        var total;
                        var perc;
                        if (qty != '' && !isNaN(qty) && price != '' && !isNaN(price)) {
                            total = parseFloat(qty) * parseFloat(price);
                            grandTotal += total;
                            $("[id*=lblGrandTotal]").html(grandTotal);
                        }
                        else if (qty == '' || price == '') {
                            total = 0;
                            grandTotal += total;
                            $("[id*=lblGrandTotal]").html(grandTotal);
                        }
                        $('[id*=lblTotal]', row).val(total);
                    })
                    SetPercentage(grandTotal);
                }
                function SetPercentage(grandTotal) {
                    $('[id*=lblTotal]').each(function () {
                        var total = $(this).val();
                        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="Quantity">
                            <ItemTemplate>
                                <asp:TextBox ID="txtCalcQuantity" placeholder="Enter Quantity" runat="server" class="calculate"></asp:TextBox>
                            </ItemTemplate>
                            <FooterTemplate>
                                <asp:Label ID="lblGrandTotal" runat="server" />
                            </FooterTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Unit Price">
                            <ItemTemplate>
                                <asp:TextBox ID="txtCalcUnitprice" placeholder="Enter Unit Price" runat="server"
                                    class="calculate"></asp:TextBox>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Total">
                            <ItemTemplate>
                                <%--<asp:Label ID="lblTotal" runat="server" Text="0"></asp:Label>--%>
                                <asp:TextBox ID="lblTotal" runat="server"></asp:TextBox>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Percentage">
                            <ItemTemplate>
                                <asp:Label ID="lblPercentage" runat="server"></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>

    The result:

    Best regards,

    sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 11, 2019 7:55 AM