make calculation inside the gridview

Question

I have these two itemtemplates of textboxes inside the gridview and i am trying to make calculation between them but is not working inside the grid.here is my code

  <asp:TemplateField HeaderText="Net Weight">
                    <ItemTemplate>
                        <asp:TextBox ID="txtNetWT" runat="server" Width="70px"  AutoPostBack=false></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Rate">
                    <ItemTemplate>
                        <asp:TextBox ID="txtRate" runat="server" Width="70px" ></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="SNF">
                    <ItemTemplate>
                        <asp:TextBox ID="txtSNF" runat="server" Width="70px" ></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="FAT">
                    <ItemTemplate>
                        <asp:TextBox ID="txtFat" runat="server" Width="70px" ></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="LR">
                    <ItemTemplate>
                        <asp:TextBox ID="txtLR" runat="server" Width="70px"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="14 TS">
                    <ItemTemplate>
                        <asp:TextBox ID="txtTS" runat="server" Width="70px" ></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>

But When I enter the value this make no effect to other element.Please tell me any proper function in Javascript to do this.

Answer 1

Please check the following codes. Note you need to adjust.. integer or float.. etc. I tested some calculation based on your fomula.

-- to put in javascript section inside head

<script type="text/javascript" language="javascript">
        function Calculate(txtFAT, txtSNF, txtNETWT, txtTS) {
            var txtFATObj = document.getElementById(txtFAT);
            var txtSNFObj = document.getElementById(txtSNF);
            var txtNETWTObj = document.getElementById(txtNETWT);
            var txtTSObj = document.getElementById(txtTS);

            if (txtFATObj != null && txtSNFObj != null && txtNETWTObj != null && txtTSObj != null) {
                txtTSObj.value = parseFloat(txtFATObj.value) + (parseFloat(txtSNFObj.value) * parseFloat(txtNETWTObj.value) / 14);
            }
        }
    </script>

--- tested gridview code aspx -----------

<asp:GridView ID="grvCalc" runat="server" AutoGenerateColumns="false" 
        onrowdatabound="grvCalc_RowDataBound">
        <Columns>
            <asp:BoundField HeaderText="Item" DataField="Item" />
            <asp:TemplateField HeaderText="Net Weight">
                <ItemTemplate>
                    <asp:TextBox ID="txtNetWT" runat="server" Width="70px"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Rate">
                <ItemTemplate>
                    <asp:TextBox ID="txtRate" runat="server" Width="70px"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="SNF">
                <ItemTemplate>
                    <asp:TextBox ID="txtSNF" runat="server" Width="70px"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="FAT">
                <ItemTemplate>
                    <asp:TextBox ID="txtFat" runat="server" Width="70px"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="LR">
                <ItemTemplate>
                    <asp:TextBox ID="txtLR" runat="server" Width="70px"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="14 TS">
                <ItemTemplate>
                    <asp:TextBox ID="txtTS" runat="server" Width="70px"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>            
        </Columns>
    </asp:GridView>

---------test data bind to gridview ----------------

private void BindGridView()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("Item");

            DataRow dr = dt.NewRow();
            dr[0] = "Item 1";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = "Item 2";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = "Item 3";
            dt.Rows.Add(dr);

            grvCalc.DataSource = dt;
            grvCalc.DataBind();
        }

-----need to attach client side event of each text control for calcuation involvement -- gridvew row data bound event .. calculation will perform onfoucus event of text box

protected void grvCalc_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                TextBox txtFATObj = (TextBox)e.Row.FindControl("txtFAT");
                TextBox txtSNFObj = (TextBox)e.Row.FindControl("txtSNF");
                TextBox txtNETWTObj = (TextBox)e.Row.FindControl("txtNETWT");
                TextBox txtTSObj = (TextBox)e.Row.FindControl("txtTS");

                txtFATObj.Attributes.Add("onfocusout", "Calculate('" + txtFATObj.ClientID + "','" + txtSNFObj.ClientID + "','" + txtNETWTObj.ClientID + "','" + txtTSObj .ClientID + "')");
                txtSNFObj.Attributes.Add("onfocusout", "Calculate('" + txtFATObj.ClientID + "','" + txtSNFObj.ClientID + "','" + txtNETWTObj.ClientID + "','" + txtTSObj.ClientID + "')");
                txtNETWTObj.Attributes.Add("onfocusout", "Calculate('" + txtFATObj.ClientID + "','" + txtSNFObj.ClientID + "','" + txtNETWTObj.ClientID + "','" + txtTSObj.ClientID + "')");
            }
        }

Answer 2

Only change the aspx.cs page "onkeyup" txtFATObj.Attributes.Add("onkeyup", "Calculate('" + txtFATObj.ClientID + "','" + txtSNFObj.ClientID + "','" + txtNETWTObj.ClientID + "','" + txtTSObj.ClientID + "')");

Answer 3

This should work:

onkeydown="document.getElementById('<%= txtRate.ClientID %>').value=this.value;"