How to display product of two columns in third in GridView?

问题

I have a GridView which for instance has.. column1 and column2.. as user types numbers into column1 and column2 i want to display the product of the entered numbers in a textbox in third column3.

Column1 | Column2  | Column3
200     |  100     | 20000

This could have been simple if i wasnt usingGridView. I am not sure how to do this in a GridView since there can be unlimited rows. I am not sure if i can ClientIDMode to static.

If it werent for the GridView I could have used

function fill() {
        var txt1 = document.getElementById("TextBox1").value-0;
        var txt2 = document.getElementById("TextBox2").value-0;
        document.getElementById("TextBox3").value = txt1 * txt2;
    }

Note: I do not want to show calculated values on postback.. i want to show it on onchange event of textbox . If needed i am ready to limit the number of rows that can be added to any specific number such as 5.

UPDATE

<asp:gridview ID="Gridview1" runat="server" ShowFooter="True" 
        AutoGenerateColumns="False"  ShowHeaderWhenEmpty="true" EmptyDataText="" CssClass="tabledata" 
                                   Width="100%" onrowdatabound="Gridview1_RowDataBound">
        <Columns>
        <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />

       <%-- =================================================--%>
       <asp:TemplateField HeaderText="Charge Cost Center">
                <ItemTemplate>
                    <asp:DropDownList ID="drpchargecostcenter" runat="server" > <%--SelectedValue='<%# Eval("chargecostcenter") %>'--%>
                        <asp:ListItem Value="0">Select</asp:ListItem>
                        <asp:ListItem Value="1">A1ALTINV</asp:ListItem>
                        <asp:ListItem Value="2">A1BAXAD2C</asp:ListItem>
                    </asp:DropDownList>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Charge Location ">
                <ItemTemplate>
                    <asp:DropDownList ID="drpchargelocation" runat="server">
                        <asp:ListItem Value="0">Select</asp:ListItem>
                        <asp:ListItem Value="1">Thane</asp:ListItem>
                    </asp:DropDownList>
                </ItemTemplate>
            </asp:TemplateField>
         <%-- =================================================--%>


        <asp:TemplateField HeaderText="Expense Date">
            <ItemTemplate>
                <asp:TextBox ID="txtexpdate" runat="server" Text='<%# Eval("expdate") %>' 
                    onkeydown="return false;" Width="50px"></asp:TextBox>
                <asp:CalendarExtender ID="CalendarExtender1" runat="server" 
                    TargetControlID="txtexpdate">
                </asp:CalendarExtender>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="From Place">
            <ItemTemplate>
                <asp:TextBox ID="txtfrmplace" runat="server" Text='<%# Eval("fromplace") %>' 
                    Width="50px"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>

        <asp:TemplateField HeaderText="To Place">
            <FooterStyle HorizontalAlign="Right" />
            <ItemTemplate>
                <asp:TextBox ID="txttoplace" runat="server" Text='<%# Eval("toplace") %>' 
                    Width="50px"></asp:TextBox>
            </ItemTemplate>
            <FooterTemplate>
            <%-- <asp:Button ID="ButtonAdd" runat="server" Text="Add New Row" 
                    onclick="ButtonAdd_Click" />--%>
            </FooterTemplate>
        </asp:TemplateField>



        <asp:TemplateField HeaderText="Mode of Travel">
            <FooterStyle HorizontalAlign="Right" />
            <ItemTemplate>
                <asp:DropDownList ID="drpmodeoftravel" Width="100px" runat="server"  >
                </asp:DropDownList>
               <%-- <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
                    ConnectionString="<%$ ConnectionStrings:constr %>" 
                    SelectCommand="Proc_ReturnTravelMode" SelectCommandType="StoredProcedure">
                </asp:SqlDataSource>--%>
            </ItemTemplate>
            <FooterTemplate>
            <%-- <asp:Button ID="ButtonAdd" runat="server" Text="Add New Row" 
                    onclick="ButtonAdd_Click" />--%>
            </FooterTemplate>
        </asp:TemplateField>


            <asp:TemplateField HeaderText="KMS Travelled">
                <ItemTemplate>
                    <asp:TextBox ID="txtkms" runat="server" onkeypress="return isNumberKey(event)"
                        Text='<%# Eval("kmstravelled") %>' Width="50px"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Rate/KM">
                <ItemTemplate>
                    <asp:TextBox ID="txtrateperkm" runat="server" 
                        onkeypress="return isNumberKey(event)" Text='<%# Eval("rateperkm") %>' 
                        Width="40px"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Expense Head">
                <ItemTemplate>
                    <asp:DropDownList ID="drpexpensehead" runat="server" Width="80px">
                    <asp:ListItem Value="0">Select</asp:ListItem>
                        <asp:ListItem Value="1">Utkarsh Parajapati</asp:ListItem>
                    </asp:DropDownList>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Expense Description">
                <ItemTemplate>
                    <asp:TextBox ID="txtexpdesc" runat="server" 
                        Text='<%# Eval("expensedescription") %>' Width="60px"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Payment Mode">
                <ItemTemplate>
                    <asp:DropDownList ID="drppaymentmode" runat="server" Width="120px">                            
                        <asp:ListItem Value="0">Select</asp:ListItem>
                        <asp:ListItem Value="1">Reimbersement</asp:ListItem>
                    </asp:DropDownList>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Bill Amt">
                <ItemTemplate>
                    <asp:TextBox ID="billamt" runat="server" onkeypress="return isNumberKey(event)" 
                        Text='<%# Eval("billamt") %>' Width="60px"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
          <asp:TemplateField HeaderText="D">
            <ItemTemplate>
                <asp:LinkButton runat="server" ID="lnkDel" OnCommand="DeleteRowHandler" Text="D"></asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
        </Columns>
    </asp:gridview>

回答1:

I have created one sample to resemble your issue.Please check this and modify according to your requirement.

ASPX :

 <asp:GridView ID="Gridview1" runat="server" ShowFooter="True" AutoGenerateColumns="False"
        ShowHeaderWhenEmpty="true" EmptyDataText="" CssClass="tabledata" Width="100%">
        <Columns>
            <asp:BoundField DataField="ID" HeaderText="Row Number" />
            <asp:TemplateField HeaderText="KMS Travelled">
                <ItemTemplate>
                    <asp:TextBox ID="txtkms" runat="server" onchange="return Multiply(this,this.value);"
                        Width="50px"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Rate/KM">
                <ItemTemplate>
                    <asp:TextBox ID="txtrateperkm" runat="server" onchange="return Multiply(this,this.value);"
                         Width="40px"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Bill Amt">
                <ItemTemplate>
                    <asp:TextBox ID="billamt" runat="server" 
                        Width="60px"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

Javascript :

 <script type="text/javascript">
  //This method is called when quantity/cost textbox looses focus with some change in content
  function Multiply(element, val) {

    //billamt =  txtkms * txtrateperkm
      var otherElementName = '';
      var finalElementName = '';
      //id of calling element i.e, quantity/cost textbox
      var elementName = element.id;
      var index = elementName.split('_');
      var finalElement = document.getElementById(index[0] + "_billamt_" + index[2]);
      finalElement.value = '';
    //get second element, i.e., get quantity if change is in cost and vice-versa
      if (endsWith(elementName, "txtkms_" + index[2])) {
          otherElementName = elementName.replace("txtkms_" + index[2], "txtrateperkm_" + index[2]);
      }
      else if (endsWith(elementName, "txtrateperkm_" + index[2])) {
          otherElementName = elementName.replace("txtrateperkm" + index[2], "txtkms_" + index[2]);
      }
      var otherElement = document.getElementById(otherElementName);
      //get textbox where final value is to be displayed
      finalElementName = index[0] + "_billamt_" + index[2];        
      var finalElement = document.getElementById(finalElementName);
      finalElement.value = otherElement.value * val;
  }

  //checks if given string ends with given suffix
  function endsWith(str, suffix) {
    return str.indexOf(suffix, str.length - suffix.length) !== -1;
}

</script>

Server Side :

 protected void Page_Load(object sender, EventArgs e)
{
    Employee emp = null;
    List<Employee> listEmployee = new List<Employee>();
    for (int i = 0; i < 1; i++)
    {
        emp = new Employee();
        emp.ID = i;
        //emp.Age = "Age :" + i.ToString();
        //emp.Location = "Location :" + i.ToString();
        listEmployee.Add(emp);
    }
    Gridview1.DataSource = listEmployee;
    Gridview1.DataBind();

}
class Employee
{
 public int ID { get; set; }
}

Please let me know if you need further assistance.

回答2:

Try this

OnRowDataBound

protected void DemoGrid_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        var txtkms = e.Row.FindControl("txtkms") as TextBox;
        var txtrateperkm = e.Row.FindControl("txtrateperkm") as TextBox;
        var billamt = e.Row.FindControl("billamt") as TextBox;
        var jsFunction = String.Format("CalculateBillAmount('{0}','{1}','{2}');", txtkms.ClientID, txtrateperkm.ClientID, billamt.ClientID);
        txtkms.Attributes.Add("onkeyup", jsFunction);
        txtkms.Attributes.Add("onblur", jsFunction);
        txtrateperkm.Attributes.Add("onkeyup", jsFunction);
        txtrateperkm.Attributes.Add("onblur", jsFunction);
    }
}

JavaScript

function CalculateBillAmount(kmID, rateID, amtID) {
    var objKm = document.getElementById(kmID), objRate = document.getElementById(rateID), objAmt = document.getElementById(amtID);
    objAmt.value = +objKm.value * +objRate.value;
}

Update: Here is the markup and GridView bind at page load.

GridView Markup.

<asp:GridView ID="DemoGrid" runat="server" 
        AutoGenerateColumns="false" 
        OnRowDataBound="DemoGrid_RowDataBound">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate><%# Container.DataItem%></ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:TextBox ID="txtkms" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:TextBox ID="txtrateperkm" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:TextBox ID="billamt" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Page Load

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        var data = new List<int> { 1, 2, 3, 4, 5 };
        DemoGrid.DataSource = data;
        DemoGrid.DataBind();
    }
}

回答3:

try this,

<asp:textbox id="column3" runat="server" text='<%# string.Format( (int)Eval("column1").tostring()*(int)Eval("column2").tostring())' />"

来源：https://stackoverflow.com/questions/18973570/how-to-display-product-of-two-columns-in-third-in-gridview

标签

javascript

ASP.NET

gridview