GridView calculations with JavaScript

Question

User-172769993 posted

Hi since the Grid View will be rendered as table in browser

How can i apply below JavaScript on asp grid-view

demo on HTML table : [jsfiddle]

Javascript Code

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

<asp:Label ID="lblGrandTotal" runat="server" Text="0"></asp:Label>

  

Answer 1

User61956409 posted

Hi asp.net4,

As you said, ASP.NET GridView control will be rendered as table in the browser, you could find the inputs from the current row then you could do calculation. The following article explained how to calculate per row total and the final grand total, you could refer to it.

http://www.aspsnippets.com/Articles/Calculate-Row-Total-and-Grand-Total-in-ASPNet-GridView-using-jQuery.aspx

Best Regards,

Fei Han

Answer 2

User-172769993 posted

Thanks but i need to apply with the code i provided

Answer 3

User632428103 posted

Hello,

if i well understand you'd like to obtain the same thing that in the fiddle but with grid ?

well, add just a class to your textBox CssClass="txtMult"  locate in gridview and remove  tr in the javascript code 

the result will be this : 

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

            function multInputs() {

                var $mult = 0;
                // calculate Grand total
                $(".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:
                $(".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>

and the grid

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

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

hope this help