Set focus to next ASP.Net GridView Row TextBox after update record using JavaScript

makumbi

SOLVED CLOSED ACTIVE ANSWERED
User: makumbi
Posted: on Jun 20, 2022 07:09 AM
Forum: Data Controls
Answer: 1
Views: 8444
Sample Code: Download

Please help how I can move the focus to the next cell after updating a record in the GridView

please help

<script type="text/javascript">
    function enter(obj) {
        var tr = obj.parentNode.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) {
                enter(obj);
            }
        });
    };
</script>

<asp:GridView ID="StudentGridMarks" runat="server" BackColor="White" AutoGenerateColumns="False" AllowPaging="True"
    OnPageIndexChanging="OnPageIndexChanging" PageSize="45" Style="margin-right: 60px">
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <asp:CheckBox ID="chkAll" runat="server" AutoPostBack="true" />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" Enabled="False" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Admno">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("admno") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" Text='<%# Bind("admno") %>' Visible="False"></asp:Label>
                <asp:TextBox ID="admno" runat="server" Height="16px" Text='<%# Eval("admno") %>' onkeyup="enter(this)" Width="70px"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Names">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Name") %>' onkeyup="enter(this)"></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label2" runat="server" Text='<%# Bind("Name") %>' Visible="False"></asp:Label>
                <asp:TextBox ID="Names" runat="server" Height="16px" Text='<%# Eval("Name") %>' onkeyup="enter(this)" Width="245px"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Class">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("Class") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label3" runat="server" Text='<%# Bind("Class") %>' Visible="False"></asp:Label>
                <asp:TextBox ID="Classr" runat="server" Height="16px" Text='<%# Eval("Class") %>' onkeyup="enter(this)" Width="34px"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Stream">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("Stream") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label4" runat="server" Text='<%# Bind("Stream") %>' Visible="False"></asp:Label>
                <asp:TextBox ID="Stream" runat="server" Height="16px" Text='<%# Eval("Stream") %>' onkeyup="enter(this)" Width="47px"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Score">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox5" runat="server" Text='<%# Bind("score") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label5" runat="server" Text='<%# Bind("score") %>' Visible="False"></asp:Label>
                <asp:TextBox ID="Score" runat="server" Height="16px" Text='<%# Eval("score") %>' onkeyup="enter(this)" Width="30px" OnTextChanged="Score_TextChanged" AutoPostBack="True"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Agg">
            <EditItemTemplate>
                <asp:TextBox ID="TxtAgg" runat="server" Text='<%# Bind("Grade") %>' onkeyup="enter(this)"></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label6" runat="server" Text='<%# Bind("Grade") %>' Visible="False"></asp:Label>
                <asp:TextBox ID="Agg" runat="server" Height="16px" Text='<%# Eval("Grade") %>' onkeyup="enter(this)" Width="28px" Enabled="False"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Remarks">
            <EditItemTemplate>
                <asp:TextBox ID="txtRemarks" runat="server" Text='<%# Bind("Remark") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label7" runat="server" Text='<%# Bind("Remark") %>' Visible="False"></asp:Label>
                <asp:TextBox ID="Remarks" runat="server" Height="16px" onkeyup="enter(this)" OnTextChanged="Remarks_TextChanged" Text='<%# Eval("Remark") %>' Width="392px"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="UserName">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox8" runat="server" Text='<%# Bind("username") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label8" runat="server" Text='<%# Bind("username") %>' Visible="False"></asp:Label>
                <asp:TextBox ID="Username" runat="server" Height="16px" Text='<%# Eval("username") %>' onkeyup="enter(this)" Width="89px"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="DateTime">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox9" runat="server" Text='<%# Bind("time") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label9" runat="server" Text='<%# Bind("time") %>' Visible="False"></asp:Label>
                <asp:TextBox ID="DateTime" runat="server" Text='<%# Eval("time") %>' Height="16px" Width="142px"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Protected Sub Score_TextChanged(sender As Object, e As EventArgs)
    khold = "hold"
End Sub

dharmend...

0 6

Reply
ANSWER
User: dharmendr
Replied: on Jun 24, 2022 01:13 AM
Report

Hi makumbi,

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

Then using the HiddenField value next GridViewRow 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)"></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="OnTextChanged"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <asp:HiddenField ID="hfRowIndex" 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 index = parseInt(document.getElementById("hfRowIndex").value);
                var row = document.getElementById("gvCustomers").rows[index + 2];
                if (typeof (row) != "undefined") {
                    var controls = row.getElementsByTagName("INPUT");
                    for (var i = 0; i < controls.length; i++) {
                        if (controls[i].id.indexOf("txtCountry") != -1) {
                            // Focus to the next record.
                            controls[i].focus();
                            break;
                        }
                    }
                }
            }
        });
    };
</script>

Namespaces

using System.Data;

VB.Net

Imports 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 OnTextChanged(object sender, EventArgs e)
{
    GridViewRow row = (sender as TextBox).NamingContainer as GridViewRow;
    hfRowIndex.Value = row.RowIndex.ToString();
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn(2) {
                            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()
    End If
End Sub

Protected Sub txtCountry_TextChanged(ByVal sender As Object, ByVal e As EventArgs)
    Dim row As GridViewRow = TryCast(TryCast(sender, TextBox).NamingContainer, GridViewRow)
    hfRowIndex.Value = row.RowIndex.ToString()
End Sub

Screenshot

Set focus to next ASP.Net GridView Row TextBox after update record using JavaScript

Company

Explore

Follow us

Contact Us