GridView calculations with JavaScript

Question

Hi since Grid View will be rendered as table in browser

How can i apply below JavaScript on asp.net grid-view

demo on HTML table : jsfiddle

Javascript Code

Notice here calculated the grand total first then divided each row total by the grand total

<script>
    $(document).ready(function () {
        $(".txtMult input").keyup(multInputs);

        function multInputs() {

            var $mult = 0;
            // calculate Grand total
            $("tr.txtMult").each(function () {
                // get the values from this row:
                var $val1 = $('.val1', this).val();
                var $val2 = $('.val2', this).val();
                var $total = ($val1) * ($val2);
                $mult += $total;
            });

            // for each row:
            $("tr.txtMult").each(function () {
                // get the values from this row:
                var $val1 = $('.val1', this).val();
                var $val2 = $('.val2', this).val();
                var $total = ($val1) * ($val2);
                var $Percentage = (($total / $mult)).toFixed(2);
                $('.percentage', this).text($Percentage);
                $('.multTotal', this).text($total);
            });
            $("#grandTotal").text(mult);
        }
    });
</script>

Grid-view Code

<asp:GridView ID="testgrid" runat="server" AutoGenerateColumns="False">
    <Columns>
        <asp:TemplateField HeaderText="Quantity">
            <ItemTemplate>
                <asp:TextBox ID="txtCalcQuantity" placeholder="Enter Quantity" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>

        <asp:TemplateField HeaderText="Unit Price">
            <ItemTemplate>
                <asp:TextBox ID="txtCalcUnitprice" placeholder="Enter Unit Price" runat="server"></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>

Your help is much appreciated

Answer 1

Grid View:

<asp:GridView ID="testgrid" runat="server" AutoGenerateColumns="False" OnRowDataBound="testgrid_RowDataBound">
    <Columns>
        <asp:TemplateField HeaderText="Quantity">
            <ItemTemplate>
                <asp:TextBox ID="txtCalcQuantity" CssClass="val1"  placeholder="Enter Quantity" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>

        <asp:TemplateField HeaderText="Unit Price">
            <ItemTemplate>
                <asp:TextBox ID="txtCalcUnitprice" CssClass="val2"  placeholder="Enter Unit Price" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>

        <asp:TemplateField HeaderText="Total">
            <ItemTemplate>
                <asp:Label ID="lblTotal" CssClass="multTotal" runat="server" Text="0"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>

        <asp:TemplateField HeaderText="Percentage">
            <ItemTemplate>
                <asp:Label ID="lblPercentage" CssClass="percentage"  runat="server"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>

    </Columns>

</asp:GridView>
        <asp:Label ID="grandTotal" runat="server"></asp:Label>

GV backend:

 protected void testgrid_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {

                    e.Row.CssClass = "txtMult";

            }
        }

Javascript :

<script>
    $(document).ready(function () {
        $(".txtMult input").keyup(multInputs);

        function multInputs() {

            var $mult = 0;
            // calculate Grand total
            $("tr.txtMult").each(function () {
                // get the values from this row:
                var $val1 = $('.val1', this).val();
                var $val2 = $('.val2', this).val();
                var $total = ($val1) * ($val2);
                $mult += $total;
            });

            // for each row:
            $("tr.txtMult").each(function () {
                // get the values from this row:
                var $val1 = $('.val1', this).val();
                var $val2 = $('.val2', this).val();
                var $total = ($val1) * ($val2);
                var $Percentage = (($total / $mult)).toFixed(2);
                $('.percentage', this).text($Percentage);
                $('.multTotal', this).text($total);
            });
            $("#<%=grandTotal.ClientID %>").text($mult);
        }
    });