Calculate price on ASP.Net TextBox change inside GridView using JavaScript

Hi borutonextnaruto500,

You need make changes in Javascript.

Refer below code

HTML

<asp:GridView runat="server" AutoGenerateEditButton="true" OnRowEditing="OnRowEditing" ID="GridView1"
    AutoGenerateColumns="false" OnRowCancelingEdit="OnRowCancelingEdit">
    <Columns>
        <asp:TemplateField HeaderText="Weight (Kg)">
            <ItemStyle HorizontalAlign="left" VerticalAlign="Middle" Width="100px" />
            <EditItemTemplate>
                <asp:TextBox ID="txtWeight" type="number" Width="100px" oninput="calculatePrice(this);"
                    Style="border: 1px solid#000; height: 25px; margin: 20px 20px 0 0;" runat="server"
                    value="1" step="1" min="1" pattern="^[1-9]*$"></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="lbweight" runat="server" Text='<%# Bind("weight")%>' Width="50px"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Price (Kyat)">
            <ItemStyle HorizontalAlign="left" VerticalAlign="Middle" Width="100px" />
            <EditItemTemplate>
                <asp:TextBox ID="txtPrice" runat="server" Width="100px"
                    Style="border: 1px solid #000; height: 25px; margin: 20px 20px 0 0;" ReadOnly="true">1500</asp:TextBox>
                <asp:RequiredFieldValidator ID="rfvPrice" runat="server" ControlToValidate="txtPrice"
                    ErrorMessage="<span class='error-text'>Require Price</span>">*</asp:RequiredFieldValidator>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="lbprice" runat="server" Text='<%# Bind("price")%>' Width="50px"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Javascript

function calculatePrice(ele) {
    // Get the weight value entered by the user
    var weight = ele.value;

    // Ensure that weight is at least 1
    if (weight < 1) {
        weight = 1;
        ele.value = 1500;
    }

    // Calculate the price based on the weight
    var price = (weight * 1500);

    // Update the price in TextBox1
    ele.parentNode.parentNode.getElementsByTagName('INPUT')[1].value = price;
}

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[2] { new DataColumn("weight"), new DataColumn("price") });
        dt.Rows.Add(45, 2500);
        ViewState["dt"] = dt;
        this.BindGrid();

    }
}
protected void BindGrid()
{
    GridView1.DataSource = ViewState["dt"] as DataTable;
    GridView1.DataBind();
}

protected void OnRowEditing(object sender, GridViewEditEventArgs e)
{
    GridView1.EditIndex = e.NewEditIndex;
    this.BindGrid();
}

protected void OnRowCancelingEdit(object sender, EventArgs e)
{
    GridView1.EditIndex = -1;
    this.BindGrid();
}

Screenshot