How to change the value of a label whenever a textbox's value is changed in GridView ASP.NET?

Question

How can I change the value of the label as a result of a multiplication from textbox and boundfield in gridview, whenever I change the value of the textbox? (not using Textbox_TextChanged, as it requires me to click elsewhere first before firing)

<asp:GridView ID="productView" runat="server" AutoGenerateColumns="False" OnSelectedIndexChanged="productView_SelectedIndexChanged">
    <Columns>

      <asp:TemplateField HeaderText="Sacks">
            <ItemTemplate>
                <asp:TextBox ID="txtSacks" runat="server"
                 CssClass="form-control" Text ="0" Width="100px"
                 OnTextChanged="txtSacks_TextChanged" AutoPostBack="true">
                </asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>

        <asp:BoundField DataField="pricingID.price" HeaderText="Price"/>

        <asp:TemplateField HeaderText="Subtotal">                  
            <ItemTemplate>
                <asp:Label ID="lblTotal" runat="server"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>

    </Columns>
</asp:GridView>

lblTotal = txtSacks * price

Thanks in advance for any kind of help

Answer 1

Your current event handler will do a postback when the textbox loose focus. You may need some client side javascript to accomplish it without posting back on every key press. Drop in jQuery into the page and try this code:

<Columns>
    <asp:TemplateField HeaderText="Sacks">
        <ItemTemplate>
            <asp:TextBox ID="txtSacks" runat="server"
                CssClass="form-control" Text="0" Width="100px" ToolTip="<%# Container.DataItemIndex + 1 %>">
            </asp:TextBox>
        </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Price">
        <ItemTemplate>
            <asp:Label runat="server" ID="lblPrice" CssClass="lbl-price" ToolTip="<%# Container.DataItemIndex + 1  %>" Text='<%# Bind("Price") %>'></asp:Label>
        </ItemTemplate>
    </asp:TemplateField>
    <asp:BoundField DataField="price" HeaderText="Price" />
    <asp:TemplateField HeaderText="Subtotal">
        <ItemTemplate>
            <asp:Label ID="lblTotal" runat="server" CssClass="lbl-total" ToolTip='<%# Container.DataItemIndex + 1 %>'></asp:Label>
        </ItemTemplate>
    </asp:TemplateField>
</Columns>        

Note that we are putting a data attribute on the controls with this code: data-sxid="sax-<%# Container.DataItemIndex + 1 %>" and data-lblid="sax-<%# Container.DataItemIndex + 1 %>"

Now we need some Javascript magic. Add this to the page:

<script>
  $("input[title]").on("keyup", function () {
       /*We had emitted ToolTip attribute on our controls in Grid. 
        Those are translated to `title` in the browser. Here we are 
        picking controls based on the values that would be set by 
        asp.net while rendering grid.*/
        var $t = $(this), 
         //pick value of title or tooptip attribute of $t control
         i = $t.attr("title") || $t.attr("tooltip");

        //we get value of $t and initialize a number from it as it is a string
        var s = Number($t.val());

        //if we are not able get a number from textbox value, return
        if (isNaN(s)) return;

        //we are looking for a span which has title attribute set to value
        //we picked from textbox above also having class lbl-price 
        //and getting its text
        var p = $("span[title='" + i + "'].lbl-price").text();

        //then we get next span with same title value but class lbl-total
        // and set its text to calculated value.
        $("span[title='" + i + "'].lbl-total").text(s * +p);
  });
</script>

This is not the most elegant way to accomplish this but it does work. Long time since done anything with web-forms and gridviews!

Note: in place of <%# Container.DataItemIndex + 1 %>, you can use some property from data-row to string the controls like priceId.