I currently have a gridview that updates based on the number entered in a textbox using the OnTextChanged event. The issue is that the gridview only refreshes when the textbox loses focus, but I want it to update as soon as a key is pressed while entering the number. I've tried various methods like an ajax call to a web method or calling a code behind function from JavaScript, but nothing has worked.

Here is the input textbox:

<asp:UpdatePanel runat="server" ID="upNumComps" UpdateMode="Conditional">
    <ContentTemplate>
        <table>
            <tr>
                <td>
                    <asp:Label ID="lblNumComps" runat="server" Text="Nº de Componentes " ForeColor="#142658" Style="font-weight: bold;"></asp:Label><span style="color: red; margin-right: 5px;"> * </span>
                </td>
                <td>
                    <asp:TextBox ID="txtNumComps" runat="server" AutoPostBack="True" OnTextChanged="txtNumComps_TextChanged"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="rfvNumComps" runat="server" ForeColor="red" ControlToValidate="txtNumComps" ErrorMessage=""></asp:RequiredFieldValidator>
                </td>
            </tr>
        </table>
    </ContentTemplate>
</asp:UpdatePanel>

And here is the gridview:

<asp:UpdatePanel ID="upDetComps" CssClass="mGrid1" runat="server">
    <ContentTemplate>
        <asp:GridView ID="grvComponentes" runat="server" AutoGenerateColumns="False" ForeColor="#001f3f" GridLines="None" Style="text-align: center;">
            <Columns>
                <asp:TemplateField HeaderText="Nº" ItemStyle-HorizontalAlign="Center">

                    <ItemTemplate>
                        <asp:Label ID="lblRowNumber" Text='<%# Container.DataItemIndex + 1 %>' runat="server" Style="margin-left: 10px; margin-right: 10px;" />
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText="Componente">
                    <ItemTemplate>
                        <asp:TextBox ID="txtComponente" runat="server" Style="margin-left: 10px; margin-right: 10px; margin-top: 5px;"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfvComponente" ForeColor="red" runat="server" ControlToValidate="txtComponente" ErrorMessage="*"></asp:RequiredFieldValidator>
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText="Base">
                    <ItemTemplate>
                        <asp:TextBox ID="txtBase" runat="server" Style="margin-left: 10px; margin-right: 10px; margin-top: 5px;"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfvBase" ForeColor="red" runat="server" ControlToValidate="txtBase" ErrorMessage="*"></asp:RequiredFieldValidator>
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText="Comprimento">
                    <ItemTemplate>

                        <asp:UpdatePanel runat="server">
                            <ContentTemplate>

                                <asp:TextBox ID="txtComprimento" runat="server" AutoPostBack="true" OnTextChanged="txtComprimento_TextChanged" Style="margin-left: 10px; margin-right: 10px; margin-top: 5px;"></asp:TextBox>
                                <asp:RequiredFieldValidator ID="rfvComprimento" ForeColor="red" runat="server" ControlToValidate="txtComprimento" ErrorMessage="*"></asp:RequiredFieldValidator>

                            </ContentTemplate>
                            <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="txtComprimento" EventName="TextChanged" />
                            </Triggers>
                        </asp:UpdatePanel>

                    </ItemTemplate>
                </asp:TemplateField>

            </Columns>
        </asp:GridView>
    </ContentTemplate>
</asp:UpdatePanel>

Code Behind function

protected void txtNumComps_TextChanged(object sender, EventArgs e)
{
    string rowCount = "";
    if (!CheckInt(txtNumComps.Text) || txtNumComps.Text == "0")
    {
        txtNumComps.Text = "";
        txtNumComps.Attributes.Add("placeholder", "Insira um número");
        rowCount = "0";
        ViewState["rowCount"] = rowCount;
        grvComponentesBind();
    }
    else if (CheckInt(txtNumComps.Text) && txtNumComps.Text != "0")
    {
        rowCount = txtNumComps.Text;
        ViewState["rowCount"] = rowCount;
        grvComponentesBind();
    }
}

EDIT

Here's what I've done so far:

I added this JavaScript function

 <script type="text/javascript">
    function RefreshUpdatePanel(id) {
        debugger
        __doPostBack(id, '');
        document.getElementById(id).blur(id);
        document.getElementById(id).focus(id);
    };
</script>

Then, I updated the textbox to include this script:

<asp:TextBox ID="txtNumComps" runat="server" onkeyup="RefreshUpdatePanel(this.id);" OnTextChanged="txtNumComps_TextChanged"></asp:TextBox>

Although now the gridview updates with each keypress in the textbox instead of waiting for a focus change, there still remains an issue. The textbox loses focus after one key press, and attempting to set the focus programmatically did not work or caused the cursor position to shift back to the previously entered number.