locked
GridView calculations with JavaScript RRS feed

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


      

    Monday, March 28, 2016 11:46 PM

Answers

  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 29, 2016 12:07 PM

All replies

  • 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

    Tuesday, March 29, 2016 1:37 AM
  • User-172769993 posted

    Thanks but i need to apply with the code i provided

    Tuesday, March 29, 2016 2:40 AM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 29, 2016 12:07 PM