Set focus to ASP.Net TextBox inside GridView column and row using JavaScript

Hi makumbi,

On TextChange event you need to set the RowIndex and CellIndex in a HiddenField.

Then using the HiddenField value next GridViewRow cell need to be referenced and call the focus function by referencing the TextBox.

Refer below example.

HTML

<asp:ScriptManager runat="server" />
<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false">
            <Columns>
                <asp:TemplateField HeaderText="Id">
                    <ItemTemplate>
                        <asp:TextBox ID="txtId" runat="server" Text='<%#Eval("Id") %>' onkeyup="enter(this)"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Name">
                    <ItemTemplate>
                        <asp:TextBox ID="txtName" runat="server" Text='<%#Eval("Name") %>' onkeyup="enter(this)"
                            AutoPostBack="true" OnTextChanged="OnNameChanged"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Country">
                    <ItemTemplate>
                        <asp:TextBox ID="txtCountry" runat="server" Text='<%#Eval("Country") %>' onkeyup="enter(this)"
                            AutoPostBack="true" OnTextChanged="OnCountryChanged"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <asp:HiddenField ID="hfRowIndex" runat="server" />
        <asp:HiddenField ID="hfCellIndex" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
    function enter(obj) {
        var tr = obj.parentNode.parentNode;
        var cellIndex = obj.parentNode.cellIndex;
        var rowIndex = obj.parentNode.parentNode.rowIndex;
        if (event.keyCode == 37) //Left
        {
            if (cellIndex > 0)
                tr.parentNode.rows[rowIndex].cells[cellIndex - 1].getElementsByTagName('INPUT')[0].focus();
            return;
        }
        if (event.keyCode == 38) //Up
        {
            if (rowIndex > 1)
                tr.parentNode.rows[rowIndex - 1].cells[cellIndex].getElementsByTagName('INPUT')[0].focus();
            return;
        }
        if (event.keyCode == 39) //Right
        {
            if (cellIndex < tr.cells.length - 1)
                tr.parentNode.rows[rowIndex].cells[cellIndex + 1].getElementsByTagName('INPUT')[0].focus();
            return;
        }
        if (event.keyCode == 40) //Down
        {
            if (rowIndex < tr.parentNode.rows.length - 1)
                tr.parentNode.rows[rowIndex + 1].cells[cellIndex].getElementsByTagName('INPUT')[0].focus();
            return;
        }
    };
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function (sender, e) {
            if (sender._postBackSettings.panelsToUpdate != null) {
                var rowIndex = parseInt(document.getElementById("hfRowIndex").value);
                var row = document.getElementById("gvCustomers").rows[rowIndex + 2];
                if (typeof (row) != "undefined") {
                    var celIndex = parseInt(document.getElementById("hfCellIndex").value);
                    var controls = row.cells[celIndex].getElementsByTagName("INPUT");
                    for (var i = 0; i < controls.length; i++) {
                        if (controls[i].id.indexOf("txtCountry") || controls[i].id.indexOf("txtName") != -1) {
                            // Focus to the next record.
                            controls[i].focus();
                            break;
                        }
                    }
                }
            }
        });
    };
</script>

Namespaces

using System.Data;

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3]{
                new DataColumn("Id"),
                new DataColumn("Name"),
                new DataColumn("Country")});
        dt.Rows.Add(1, "John Hammond", "United States");
        dt.Rows.Add(2, "Mudassar Khan", "India");
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        gvCustomers.DataSource = dt;
        gvCustomers.DataBind();
    }
}

protected void OnNameChanged(object sender, EventArgs e)
{
    GridViewRow row = (sender as TextBox).NamingContainer as GridViewRow;
    hfRowIndex.Value = row.RowIndex.ToString();
    hfCellIndex.Value = "1";
}

protected void OnCountryChanged(object sender, EventArgs e)
{
    GridViewRow row = (sender as TextBox).NamingContainer as GridViewRow;
    hfRowIndex.Value = row.RowIndex.ToString();
    hfCellIndex.Value = "2";
}

Screenshot