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

Solution 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.

Solution 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();
    }
}

Solution 3:

try this,

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