GridView calculations with JavaScript

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

Answers 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);
            }
        });
    

Related Articles