Adding an extra column with the sum from two columns in an editable GridView

Question

Hello everyone. I have an editable GridView that pull data from a SQL data source. I would like to add an extra column where it would substract TotalCost (double) from Balance (double) and show the difference.

I was wondering if this could be done with a one-liner inside the Text property like <asp:Label ID="BalanceCalculation" runat="server" Text='<%# Eval("Budget") - Eval("TotalCost")%>'></asp:Label>.

Or it has to be done with RowDataBound in the code behind somehow?

I am adding the code as a comment as it will not let me format it properly.

Answer 1

Hi @Xander Todor , The demo I have posted you it could add new td on your existing gridview. And you don't want to use rowdatabound,there are two ways:

1. Sum two Eval based on your codes. Just like this: <asp:TemplateField> <ItemTemplate> <asp:Label ID="BalanceCalculation" runat="server" Text='<%#string.Format("{0:C2}",Convert.ToInt32(Eval("Budget"))+Convert.ToInt32(Eval("TotalCost")))%>' /> </ItemTemplate> </asp:TemplateField> 2.Sum using jquery.

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. You could refer to below article: https://jquery.com/

Best regards, Yijing Sun

---

If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our  documentation  to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

<asp:UpdatePanel ID="upnlMoney" runat="server">
<ContentTemplate>

    <div>
        <asp:GridView ID="gvBalancesGrants" runat="server" AutoGenerateColumns="False" DataKeyNames="Id"
            DataSourceID="sdsGRNTSBalancesGrants" GridLines="None" CssClass="GridView"
            PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt" AllowPaging="true"
            PageSize="20" OnRowUpdating="gvBalancesGrants_RowUpdating" ShowFooter="true" OnRowCommand="gvBalancesGrants_RowCommand"
            AllowSorting="true" OnRowEditing="gvBalancesGrants_RowEditing" 
            EmptyDataText="There is nothing to display.">
            <Columns>


                <%--Budget--%>
                <asp:TemplateField HeaderText="Budget" SortExpression="Budget">
                    <ItemTemplate>
                        <asp:Label ID="lblBudget_Balances" runat="server" Text='<%# Bind("Budget","{0:C2}") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="txtBudget_Balances" runat="server" Text='<%#Bind("Budget") %>'></asp:TextBox>
                        <asp:CompareValidator ID="vtxtBudget_Balances" runat="server"
                            Type="Double"
                            ErrorMessage="Value must be a integer or float"
                            Operator="DataTypeCheck" ErrorText="*"
                            ControlToValidate="txtBudget_Balances"
                            ValidationGroup="VG6">*</asp:CompareValidator>
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="inBudget_Balances" runat="server" />
                        <asp:CompareValidator ID="vinBudget_Balances" runat="server"
                            Type="Double"
                            ErrorMessage="Value must be a integer or float"
                            Operator="DataTypeCheck" ErrorText="*"
                            ControlToValidate="inBudget_Balances"
                            ValidationGroup="VGBalances">*</asp:CompareValidator>
                    </FooterTemplate>
                </asp:TemplateField>

                <%--TotalCost--%>
                <asp:TemplateField HeaderText="TotalCost" SortExpression="TotalCost">
                    <ItemTemplate>
                        <asp:Label ID="lblTotalCost" runat="server" Text='<%# Bind("TotalCost","{0:C2}") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="txtTotalCost" runat="server" Text='<%#Bind("TotalCost") %>'></asp:TextBox>
                        <asp:CompareValidator ID="vtxtTotalCost" runat="server"
                            Type="Double"
                            ErrorMessage="Value must be a integer or float"
                            Operator="DataTypeCheck" ErrorText="*"
                            ControlToValidate="txtTotalCost"
                            ValidationGroup="VG6">*</asp:CompareValidator>
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="inTotalCost" runat="server" />
                        <asp:CompareValidator ID="vinTotalCost" runat="server"
                            Type="Double"
                            ErrorMessage="Value must be a integer or float"
                            Operator="DataTypeCheck" ErrorText="*"
                            ControlToValidate="inTotalCost"
                            ValidationGroup="VGBalances">*</asp:CompareValidator>
                    </FooterTemplate>
                </asp:TemplateField>

                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Label ID="BalanceCalculation" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>

            </Columns>
        </asp:GridView>
    </div>
</ContentTemplate>

</asp:UpdatePanel>

Answer 3

Hi @Xander Todor ,
As far as I think,you could use jquery to add a new column and it's not necessary to use rowdatabound. You could get the value of the budget and TotalCost. And then append them. Just like this:

 <script src="Scripts/jquery-3.6.0.min.js"></script>  
        <script>  
            $(function () {  
                $("#gvBalancesGrants tr:not(:first):not(:last)").each(function () {  
                    var Budget = $(this).find("td:eq(0)").text();  
                    var TotalCost = $(this).find("td:eq(1)").text();  
                    var sum = Budget - TotalCost;  
                    $(this).append("<td>" + sum + "</td>");  
                })  
      
            })  
        </script>  

Best regards,
Yijing Sun

---

If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our  documentation  to enable e-mail notifications if you want to receive the related email notification for this thread.