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

Javascript :

<scripttype="text/javascript">//This method is called when quantity/cost textbox looses focus with some change in contentfunctionMultiply(element, val) {

    //billamt =  txtkms * txtrateperkmvar otherElementName = '';
      var finalElementName = '';
      //id of calling element i.e, quantity/cost textboxvar 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-versaif (endsWith(elementName, "txtkms_" + index[2])) {
          otherElementName = elementName.replace("txtkms_" + index[2], "txtrateperkm_" + index[2]);
      }
      elseif (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 suffixfunctionendsWith(str, suffix) {
    return str.indexOf(suffix, str.length - suffix.length) !== -1;
}

</script>

Server Side :

protectedvoidPage_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();

}
classEmployee
{
 publicint ID { get; set; }
}

Please let me know if you need further assistance.

Solution 2:

Try this

OnRowDataBound

protectedvoidDemoGrid_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

functionCalculateBillAmount(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:GridViewID="DemoGrid"runat="server"AutoGenerateColumns="false"OnRowDataBound="DemoGrid_RowDataBound"><Columns><asp:TemplateField><ItemTemplate><%# Container.DataItem%></ItemTemplate></asp:TemplateField><asp:TemplateField><ItemTemplate><asp:TextBoxID="txtkms"runat="server"></asp:TextBox></ItemTemplate></asp:TemplateField><asp:TemplateField><ItemTemplate><asp:TextBoxID="txtrateperkm"runat="server"></asp:TextBox></ItemTemplate></asp:TemplateField><asp:TemplateField><ItemTemplate><asp:TextBoxID="billamt"runat="server"></asp:TextBox></ItemTemplate></asp:TemplateField></Columns></asp:GridView>

Page Load

protectedvoidPage_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())' />"