locked
Update Total From GridView RRS feed

  • Question

  • User1510859543 posted

    I have a GridView with a textbox on each row and I want to total up the value in a textbox with class="bonus" and place that total into a textbox with a class="bonustot".  The GridView is inside a div (panel) and the panel becomes visible when a user clicks a LinkButton.  I want the total to be set when the panel becomes visible and change when user enters a new amount or changes an existing amount.  Would like done in either javascript or jquery.  The panel/div and GridView is shown below.

        <asp:Panel ID="PanelBonus" runat="server" CssClass="Hide">
            <p>
                <asp:Button ID="BtnClearBonus" runat="server" Text="Clear All Bonus Amounts" />
                Total Bonus:
                <asp:TextBox ID="txtTotalBonus" runat="server" CssClass="bonustot" Width="60"></asp:TextBox>      
            </p>
            <asp:GridView ID="gvEmployeeBonus" runat="server" AutoGenerateColumns="False" 
                DataKeyNames="EmployeeCode" DataSourceID="SqlselPayrollBonus" 
                ShowFooter="True">
                <Columns>
                    <asp:TemplateField HeaderText="EECode">
                        <ItemTemplate>
                            <asp:Label ID="LblEmployeeCode" runat="server" Text='<%# Eval("EmployeeCode") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
                    <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
                    <asp:BoundField DataField="PayrollID" HeaderText="PayrollID" SortExpression="PayrollID" />
                    <asp:TemplateField>
                        <HeaderTemplate>
                            <span>
                                Bonus<br />
                                <asp:Label ID="LblBonusTotal" runat="server" Text="Total"></asp:Label>   
                            </span>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:TextBox ID="txtBonus" runat="server" Text='<%# Bind("Bonus","{0:n2}") %>' Width="80" CssClass="txtright bonus"></asp:TextBox>
                            <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" 
                                TargetControlID="txtBonus" ValidChars="0123456789.">
                            </cc1:FilteredTextBoxExtender>
                        </ItemTemplate>
                        <ItemStyle HorizontalAlign="Right" />
                        <FooterTemplate>
                            <asp:Button ID="BtnSaveBonus" runat="server" Text="Save Bonus" Width="100" ForeColor="Blue" CommandName="bonus" />
                        </FooterTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
            <asp:SqlDataSource ID="SqlselPayrollBonus" runat="server" 
                ConnectionString="<%$ ConnectionStrings:MgmtConnectionString %>" 
                SelectCommand="ms_selPayrollBonus" SelectCommandType="StoredProcedure">
                <SelectParameters>
                    <asp:ControlParameter ControlID="txtDateFrom" Name="StartDate" PropertyName="Text" Type="DateTime" />
                </SelectParameters>
            </asp:SqlDataSource>
        </asp:Panel>

    Monday, February 19, 2018 7:44 PM

Answers

  • User475983607 posted

    Wire up a blur event to the text boxes and sum the textboxes.  The following code shows a basic example. 

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="WebFormsDemo._default" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Default</title>
    
        <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
        <script src="Scripts/jquery-ui-1.12.1.js"></script>
        <script type="text/javascript">
    
            $(function ()
            {
                //total on load
                doSum();
    
                //Total when a value changes
                $('.bonus').blur(function () {
                    doSum();
                });
    
    
                function doSum() {
                    let total = 0;
                    $('.bonus').each(function (value, index) {
                        total += parseFloat($(this).val());
                    });
    
                    $('.bonustot').val(total.toString());
                }
                
                
            });
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
      
           <div>
               <asp:TextBox ID="TextBox1" runat="server" CssClass="bonus">2.0</asp:TextBox>
           </div>
            <div>
               <asp:TextBox ID="TextBox2" runat="server" CssClass="bonus">2.0</asp:TextBox>
           </div>
            <div>
               <asp:TextBox ID="TextBox3" runat="server" CssClass="bonus">2.0</asp:TextBox>
           </div>
            <div>
               <asp:TextBox ID="TextBox4" runat="server" CssClass="bonus">2.0</asp:TextBox>
           </div>
            <div>
               <asp:TextBox ID="TextBox5" runat="server" CssClass="bonus">2.0</asp:TextBox>
           </div>
            <hr />
             <div>
               <asp:TextBox ID="TextBox6" runat="server" CssClass="bonustot"></asp:TextBox>
           </div>
    
    
        </form>
    </body>
    </html>
    
    
    
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 19, 2018 8:25 PM

All replies

  • User475983607 posted

    Wire up a blur event to the text boxes and sum the textboxes.  The following code shows a basic example. 

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="WebFormsDemo._default" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Default</title>
    
        <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
        <script src="Scripts/jquery-ui-1.12.1.js"></script>
        <script type="text/javascript">
    
            $(function ()
            {
                //total on load
                doSum();
    
                //Total when a value changes
                $('.bonus').blur(function () {
                    doSum();
                });
    
    
                function doSum() {
                    let total = 0;
                    $('.bonus').each(function (value, index) {
                        total += parseFloat($(this).val());
                    });
    
                    $('.bonustot').val(total.toString());
                }
                
                
            });
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
      
           <div>
               <asp:TextBox ID="TextBox1" runat="server" CssClass="bonus">2.0</asp:TextBox>
           </div>
            <div>
               <asp:TextBox ID="TextBox2" runat="server" CssClass="bonus">2.0</asp:TextBox>
           </div>
            <div>
               <asp:TextBox ID="TextBox3" runat="server" CssClass="bonus">2.0</asp:TextBox>
           </div>
            <div>
               <asp:TextBox ID="TextBox4" runat="server" CssClass="bonus">2.0</asp:TextBox>
           </div>
            <div>
               <asp:TextBox ID="TextBox5" runat="server" CssClass="bonus">2.0</asp:TextBox>
           </div>
            <hr />
             <div>
               <asp:TextBox ID="TextBox6" runat="server" CssClass="bonustot"></asp:TextBox>
           </div>
    
    
        </form>
    </body>
    </html>
    
    
    
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 19, 2018 8:25 PM
  • User1510859543 posted

    Perfect.  I used keyup instead of blur so total updates as they type (small grid).

    Monday, February 19, 2018 8:51 PM
  • User1510859543 posted

    For some reason this works on my PC but not on our customers PC's.  The bonustot box is blank on customer and is 3358 on ours.  Any idea what would keep this from working on others?

    Below is the jquery I am using.

    $(function ()
    {
    //total on load
    doSum();

    //Total when a value changes
    $('.bonus').keyup(function () {
    doSum();
    });

    function doSum() {
    total = 0;
    $('.bonus').each(function (value, index) {
    total += parseFloat($(this).val());
    });

    $('.bonustot').val(total.toFixed(2));
    }

    });

    Monday, February 19, 2018 10:18 PM
  • User475983607 posted

    You've defined the total variable in global space for some unknown reason and that can cause weird issues.  If the code show has been added to a JS file then I assume the customer's browser cached the file and needs to press crtl-F5 to get the latest source.

    Other than that I have no idea.  What troubleshooting steps have you performed? What browsers have you tested and what browser is your customer using?  What version of jQuery are you using?  Are you seeing errors in the dev tools?

    Tuesday, February 20, 2018 12:00 AM
  • User1510859543 posted

    I was using jquery 1.8.1 and found the problem was due to some other jquery code that I found for returning the cursor to the current location on a postback. I really would like to keep this functionality as the user edits a large ListView that previously required scrolling back down to the original location.  The script and code I removed to make it work is below.  Not sure if this helps but all worked fine here on every browser I tried (IE11, Edge, Chrome, Firefox) but failed on those same browsers at customer site. 

       <script src="../js/jquerysession.js" type="text/javascript"></script>
    
            $(document).ready(function () {
                if ($.session.get('scrollTop') != "" && $.session.get('scrollLeft') != "") {
                    $('#table').scrollLeft($.session.get('scrollLeft'));
                    $('#table').scrollTop($.session.get('scrollTop'));
                }
            });
    
            function gotoedit(x) {
                $(window).scrollTop($("#edit").offset().top);
                $.session.set('location', x.id)
                $.session.set('scrollLeft', $('#table').scrollLeft())
                $.session.set('scrollTop', $('#table').scrollTop())
            }
    
            function back(x) {
                $(window).scrollTop($("#" + $.session.get('location')).offset().top);
            }

    Tuesday, February 20, 2018 2:39 PM
  • User-707554951 posted

    Hi dlchase:

    It seems that you have find solution.

    Are you have any question now?

    If yes, I suggest you could use F12 develop tools to check whether there is have error in console tab

    Then post detailed description about your problem.

    If not, would you please close this thread by mark answer that help you?

    Thanks for understanding.

    Best regards

    Cathy

    Sunday, February 25, 2018 3:35 AM