locked
Column total in gridview Footer and Display in textbox outside gridview.? RRS feed

  • Question

  • User-367318540 posted

    i am trying to calculate gridview total,but it is not getting done.

    below is javascript ,but it is not calculating.

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var grandTotal = 0;
            var grid = document.getElementById('<%=GVFood.ClientID%>');
            var tr = grid.getElementsByTagName("tr");
            var sum = 0;
            for (var i = 1; i < tr.length - 1; i++) {
                var iAmount = tr[i].getElementsByTagName("td")[2].getElementsByTagName('span')[0].innerHTML;
                var cAmount = tr[i].getElementsByTagName("td")[3].getElementsByTagName('input')[0].value;
                var balance = parseFloat(iAmount) - parseFloat(cAmount);
                tr[i].getElementsByTagName("td")[6].getElementsByTagName('input')[0].value = balance;
                grandTotal += balance;
            }
            $("[id*=lblGrandTotal]").html(grandTotal.toString());
        });
    </script>

    Gridview Html.

     <asp:GridView ID="GVFood"  Width="97%"  PagerStyle-CssClass="pager" HeaderStyle-CssClass="header" ShowFooter="true"
                            RowStyle-CssClass="rows"  runat="server" AutoGenerateColumns="false" auttopostback="true"
                 OnRowEditing="GVFood_RowEditing" OnRowDataBound="GVFood_RowDataBound" OnRowDeleting="GVFood_RowDeleting" 
                            Height="216px" CssClass="auto-style15" >
           
                                             <Columns>
                                                  <asp:TemplateField HeaderText="S.No">
            <ItemTemplate>
                 <%#Container.DataItemIndex+1 %>
            </ItemTemplate>
        </asp:TemplateField>
                                                  <asp:BoundField DataField="B_ID" HeaderText="Codeitem" Visible="false" />
            <asp:BoundField DataField="B_Name" HeaderText="Descriptionitem" Readonly="true" />
            <%--<asp:BoundField DataField="QTY" HeaderText="QTY" onkeyup="CalculateTotals();" ControlStyle-Width="20px"  />--%>
                                                  <asp:TemplateField HeaderText="Quantity">
                    <ItemTemplate>
                        <asp:TextBox ID="QTY" Text='<%#Eval("QTY") %>' Enabled="true"  AutoPostBack="True"  ontextchanged="QTY_TextChanged" runat="server"  ControlStyle-Width="50px" ></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                                                  <asp:TemplateField HeaderText="Price">
                    <ItemTemplate>
                           <asp:Textbox ID="Rate" runat="server" onkeyup="CalculateTotal();"  Width="50px" Enabled="true" Text='<%#Eval("Rate") %>'></asp:Textbox>
    
                    </ItemTemplate>
                                   
                </asp:TemplateField>
                                                 <asp:TemplateField HeaderText="Dis">
                    <ItemTemplate>
                           <asp:Textbox ID="txtdisc" runat="server" AutoPostBack="True"  ontextchanged="txtdisc_TextChanged"   Width="50px" Enabled="true" Text='<%#Eval("txtdisc") %>'></asp:Textbox>
    
                    </ItemTemplate>
                                   
                </asp:TemplateField>
                                                 <asp:TemplateField HeaderText="S.Total">
        <ItemTemplate>
      <asp:Label ID="lbltotalDisc" runat="server" Text=""></asp:Label>
    
        
        </ItemTemplate>
                                                      </asp:TemplateField>
    
    
    <asp:TemplateField HeaderText="Total">
        <ItemTemplate>
      <asp:Label ID="lbltotal" runat="server"   Text='<%# Eval("lbltotal") %>'></asp:Label>
    
        
        </ItemTemplate>
             <FooterTemplate>
                                            <asp:Label ID="lblGrandTotal" runat="server"></asp:Label>
                                        </FooterTemplate>
                                         </asp:TemplateField>
    
                                            
    
                                                  <asp:CommandField ShowDeleteButton="True" ButtonType="Link" />
        </Columns>
                        </asp:GridView>

    Textbox outside gridview.

        Grand Total :
    
                        <asp:Textbox ID="txtTotal"  runat="server" Height="19px" Width="58px" Enabled="False"></asp:Textbox>

    https://ibb.co/tKWK0PG

    Thursday, November 26, 2020 3:34 PM

Answers

  • User1535942433 posted

    Hi akhterr,

    Accroding to your description and codes,I'm guessing that Total is  Quantity * Price. If I'm right, getElementsByTagName("td")[2] is  B_Name. Index is start from 0. 

    Accroding to your codes,I created a demo.You could refer to below codes:

    <script src="Scripts/jquery-3.2.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var grandTotal = 0;
                var grid = document.getElementById('<%=GVFood.ClientID%>');
            var tr = grid.getElementsByTagName("tr");
            var sum = 0;
            for (var i = 1; i < tr.length - 1; i++) {
                var iAmount = tr[i].getElementsByTagName("td")[1].getElementsByTagName('input')[0].value;
                var cAmount = tr[i].getElementsByTagName("td")[2].getElementsByTagName('input')[0].value;
                var balance = parseFloat(iAmount) * parseFloat(cAmount);
                var tAmount = tr[i].getElementsByTagName("td")[3].getElementsByTagName('span')[0].value;
                tr[i].getElementsByTagName("td")[3].innerHTML = balance.toString();
                tAmount = balance;
                grandTotal += balance;
            }
                $("[id*=lblGrandTotal]").html(grandTotal.toString());
                $("[id*=txtTotal]").val(grandTotal.toString());
        });
        </script>

    <asp:GridView ID="GVFood" Width="97%" PagerStyle-CssClass="pager" HeaderStyle-CssClass="header" ShowFooter="true" RowStyle-CssClass="rows" runat="server" AutoGenerateColumns="false" auttopostback="true" OnRowEditing="GVFood_RowEditing" OnRowDataBound="GVFood_RowDataBound" OnRowDeleting="GVFood_RowDeleting" Height="216px" CssClass="auto-style15"> <Columns> <asp:TemplateField HeaderText="S.No"> <ItemTemplate> <%#Container.DataItemIndex+1 %> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Quantity"> <ItemTemplate> <asp:TextBox runat="server" ID="tbqty" Text='<%#Eval("Id") %>'></asp:TextBox> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Price"> <ItemTemplate> <asp:TextBox runat="server" ID="tbprice" Text='<%#Eval("num") %>'></asp:TextBox> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Total"> <ItemTemplate> <asp:Label ID="lbltotal" runat="server"></asp:Label> </ItemTemplate> <FooterTemplate> <asp:Label ID="lblGrandTotal" runat="server"></asp:Label> </FooterTemplate> </asp:TemplateField> </Columns> </asp:GridView> Grand Total : <asp:TextBox ID="txtTotal" runat="server" Height="19px" Width="58px" Enabled="False"></asp:TextBox>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, November 27, 2020 2:49 AM

All replies

  • User1535942433 posted

    Hi akhterr,

    Accroding to your description and codes,I'm guessing that Total is  Quantity * Price. If I'm right, getElementsByTagName("td")[2] is  B_Name. Index is start from 0. 

    Accroding to your codes,I created a demo.You could refer to below codes:

    <script src="Scripts/jquery-3.2.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var grandTotal = 0;
                var grid = document.getElementById('<%=GVFood.ClientID%>');
            var tr = grid.getElementsByTagName("tr");
            var sum = 0;
            for (var i = 1; i < tr.length - 1; i++) {
                var iAmount = tr[i].getElementsByTagName("td")[1].getElementsByTagName('input')[0].value;
                var cAmount = tr[i].getElementsByTagName("td")[2].getElementsByTagName('input')[0].value;
                var balance = parseFloat(iAmount) * parseFloat(cAmount);
                var tAmount = tr[i].getElementsByTagName("td")[3].getElementsByTagName('span')[0].value;
                tr[i].getElementsByTagName("td")[3].innerHTML = balance.toString();
                tAmount = balance;
                grandTotal += balance;
            }
                $("[id*=lblGrandTotal]").html(grandTotal.toString());
                $("[id*=txtTotal]").val(grandTotal.toString());
        });
        </script>

    <asp:GridView ID="GVFood" Width="97%" PagerStyle-CssClass="pager" HeaderStyle-CssClass="header" ShowFooter="true" RowStyle-CssClass="rows" runat="server" AutoGenerateColumns="false" auttopostback="true" OnRowEditing="GVFood_RowEditing" OnRowDataBound="GVFood_RowDataBound" OnRowDeleting="GVFood_RowDeleting" Height="216px" CssClass="auto-style15"> <Columns> <asp:TemplateField HeaderText="S.No"> <ItemTemplate> <%#Container.DataItemIndex+1 %> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Quantity"> <ItemTemplate> <asp:TextBox runat="server" ID="tbqty" Text='<%#Eval("Id") %>'></asp:TextBox> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Price"> <ItemTemplate> <asp:TextBox runat="server" ID="tbprice" Text='<%#Eval("num") %>'></asp:TextBox> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Total"> <ItemTemplate> <asp:Label ID="lbltotal" runat="server"></asp:Label> </ItemTemplate> <FooterTemplate> <asp:Label ID="lblGrandTotal" runat="server"></asp:Label> </FooterTemplate> </asp:TemplateField> </Columns> </asp:GridView> Grand Total : <asp:TextBox ID="txtTotal" runat="server" Height="19px" Width="58px" Enabled="False"></asp:TextBox>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, November 27, 2020 2:49 AM
  • User-2054057000 posted

    There is also a relevant tutorial on this thing - How to show sum of columns in the footer of the GridView with jQuery

    Friday, November 27, 2020 5:04 AM
  • User-367318540 posted

    i tried to follow about link,but still sum is not getting done, i have textbox in gridview not label

    Friday, November 27, 2020 5:23 AM