Navigate between cells using arrow keys in ASP.Net GridView using JavaScript

makumbi
 
on Jul 28, 2022 03:09 AM
646 Views
Name Class Stream A1 A2 A3 A4 A5 A6 A7 A8 A9 A10    
ann                            
john                            
 jane                            
peter                            

i am trying to use this but the cursor jumps aways please help

<script type="text/javascript">
    function enter2(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();
            GetSelectedRow(obj)
            // return;
        }
        if (event.keyCode == 38) //Up
        {
            if (rowIndex > 1)
                tr.parentNode.rows[rowIndex - 1].cells[cellIndex].getElementsByTagName('INPUT')[0].focus();
            GetSelectedRow(obj)
           // return;
        }
        if (event.keyCode == 39) //Right
        {
            if (cellIndex < tr.cells.length - 1)
                tr.parentNode.rows[rowIndex].cells[cellIndex + 1].getElementsByTagName('INPUT')[0].focus();
            GetSelectedRow(obj)
            //return;
        }
        if (event.keyCode == 40) //Down
        {
            if (rowIndex < tr.parentNode.rows.length - 1)
                tr.parentNode.rows[rowIndex + 1].cells[cellIndex].getElementsByTagName('INPUT')[0].focus();
            GetSelectedRow(obj)
         //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("StudentGridMarks").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++) {
                        switch (controls[i].className) {
                            case "A1":
                                controls[i].focus();
                                return;
                                break;
                            case "A2":
                                controls[i].focus();
                                return;
                                break;
                            default:
                        }
                    }
                }
            }
        });
    }
</script>
Download FREE API for Word, Excel and PDF in ASP.Net: Download
Shivam.M
 
on Aug 01, 2022 05:35 AM
on Aug 01, 2022 08:12 AM

Hi makumbi,

Please refer below sample.

Note: For this sample i have used temporary DataTable. For more details refer How to create Temporary Table in ASP.Net using C# and VB.Net.

HTML 

<asp:ScriptManager runat="server" />
<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <asp:GridView ID="gvStudentGridMarks" runat="server" AllowPaging="True" AutoGenerateColumns="False" PageSize="45">
            <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" Visible="false">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox3" runat="server" Text='<%# Eval("admno") %>'></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label3" runat="server" Text='<%# Bind("admno") %>' Visible="False"></asp:Label>
                        <asp:TextBox ID="admno" runat="server" Text='<%# Eval("admno") %>' Height="16px" Width="93px" ReadOnly="True"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Name">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("Name") %>'></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:TextBox ID="Name" runat="server" Text='<%# Eval("Name") %>' Height="16px" Width="186px" ReadOnly="True"></asp:TextBox>
                        <asp:Label ID="Label1" runat="server" Text='<%# Bind("Name") %>' Visible="False"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Class">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox2" runat="server" Text='<%# Eval("Class") %>' Height="16px" Width="58px"></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label2" runat="server" Text='<%# Bind("Class") %>' Visible="False"></asp:Label>
                        <asp:TextBox ID="Class" runat="server" Text='<%# Eval("Class") %>' Height="16px" Width="32px" ReadOnly="True"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Stream">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox4" runat="server" Height="16px" Text='<%# Bind("Stream") %>' Width="42px"></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") %>' Width="41px" ReadOnly="True"></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" Text='<%#Eval("Score") %>' CssClass="Score" onkeyup="enter(this)" AutoPostBack="true" Height="16px" Width="31px"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Agg" Visible="false">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox6" runat="server" Text='<%# Bind("Grade") %>'></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" ReadOnly="True" Text='<%# Eval("Grade") %>' Width="29px"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Remarks" >
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox7" 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" Text='<%# Eval("Remark") %>' CssClass="Remarks"
                            AutoPostBack="True" Height="18px" onkeyup="enter(this)" Width="431px"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="User Name" Visible="false">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox8" runat="server"></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label8" runat="server" Visible="False"></asp:Label>
                        <asp:TextBox ID="UserName" runat="server" Text='<%# Eval("Username") %>' Height="16px" Width="106px" ReadOnly="True"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Date Time" Visible="false">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox9" runat="server"></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label9" runat="server" Visible="False"></asp:Label>
                        <asp:TextBox ID="txtDateTime" runat="server" Height="16px" Text='<%# Eval("time") %>' Width="151px" ReadOnly="True"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="A1">
                    <ItemTemplate>
                        <asp:TextBox ID="A1" runat="server" Height="16px" Text='<%# Eval("A1")  %>' CssClass="A1" onkeyup="enter2(this)" Width="29px" AutoPostBack="True"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="A2">
                    <ItemTemplate>
                        <asp:TextBox ID="A2" runat="server" Height="16px" Text='<%# Eval("A2") %>' CssClass="A2" onkeyup="enter2(this)" Width="29px" AutoPostBack="True"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="A3">
                    <ItemTemplate>
                        <asp:TextBox ID="A3" runat="server" Height="16px" Text='<%# Eval("A3") %>' CssClass="A3" onkeyup="enter2(this)" Width="29px" AutoPostBack="True"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="A4">
                    <ItemTemplate>
                        <asp:TextBox ID="A4" runat="server" Height="16px" Text='<%# Eval("A4") %>' CssClass="A4" onkeyup="enter2(this)" Width="29px" AutoPostBack="True"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="A5">
                    <ItemTemplate>
                        <asp:TextBox ID="A5" runat="server" Height="16px" Text='<%# Eval("A5") %>' CssClass="A5" onkeyup="enter2(this)" Width="29px" AutoPostBack="True"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="A6">
                    <ItemTemplate>
                        <asp:TextBox ID="A6" runat="server" Height="16px" Text='<%# Eval("A6") %>' CssClass="A6" onkeyup="enter2(this)" Width="29px" AutoPostBack="True"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="A7">
                    <ItemTemplate>
                        <asp:TextBox ID="A7" runat="server" Height="16px" Text='<%# Eval("A7") %>' CssClass="A7" Width="29px" AutoPostBack="True"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="A8">
                    <ItemTemplate>
                        <asp:TextBox ID="A8" runat="server" Height="16px" Text='<%# Eval("A8") %>' CssClass="A8" Width="29px" AutoPostBack="True"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="A9">
                    <ItemTemplate>
                        <asp:TextBox ID="A9" runat="server" Height="16px" Text='<%# Eval("A9") %>' CssClass="A9" Width="29px" AutoPostBack="True"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="A10">
                    <ItemTemplate>
                        <asp:TextBox ID="A10" runat="server" Height="16px" Text='<%# Eval("A10") %>' CssClass="A10" Width="29px" AutoPostBack="True"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <asp:HiddenField ID="hfRowIndex" runat="server" />
        <asp:HiddenField ID="hfCellIndex" runat="server" />
        <asp:Label ID="lblTotal" 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();
            GetSelectedRow(obj)
            // return;
        }
        if (event.keyCode == 38) //Up
        {
            if (rowIndex > 1)
                tr.parentNode.rows[rowIndex - 1].cells[cellIndex].getElementsByTagName('INPUT')[0].focus();
            GetSelectedRow(obj)
            // return;
        }
        if (event.keyCode == 39) //Right
        {
            if (cellIndex < tr.cells.length - 1)
                tr.parentNode.rows[rowIndex].cells[cellIndex + 1].getElementsByTagName('INPUT')[0].focus();
            GetSelectedRow(obj)
            //return;
        }
        if (event.keyCode == 40) //Down
        {
            if (rowIndex < tr.parentNode.rows.length - 1)
                tr.parentNode.rows[rowIndex + 1].cells[cellIndex].getElementsByTagName('INPUT')[0].focus();
            GetSelectedRow(obj)
            //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("StudentGridMarks").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++) {
                        switch (controls[i].className) {
                            case "Remarks":
                                controls[i].focus();
                                return;
                                break;
                            case "Score":
                                controls[i].focus();
                                return;

                            default:
                        }
                    }
                }
            }
        });
    }
</script>

<script type="text/javascript">
    function enter2(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();
            //  GetSelectedRow(obj)
            return;
        }
        if (event.keyCode == 38) //Up
        {
            if (rowIndex > 1)
                tr.parentNode.rows[rowIndex - 1].cells[cellIndex].getElementsByTagName('INPUT')[0].focus();
            //  GetSelectedRow(obj)
            return;
        }
        if (event.keyCode == 39) //Right
        {
            if (cellIndex < tr.cells.length - 1)
                tr.parentNode.rows[rowIndex].cells[cellIndex + 1].getElementsByTagName('INPUT')[0].focus();
            // GetSelectedRow(obj)
            //return;
        }
        if (event.keyCode == 40) //Down
        {
            if (rowIndex < tr.parentNode.rows.length - 1)
                tr.parentNode.rows[rowIndex + 1].cells[cellIndex].getElementsByTagName('INPUT')[0].focus();
            //  GetSelectedRow(obj)
            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("StudentGridMarks").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++) {
                        switch (controls[i].className) {

                            case "A1":
                                controls[i].focus();
                                return;
                                break;
                            case "A2":
                                controls[i].focus();
                                return;
                                break;
                            case "A3":
                                controls[i].focus();
                                return;
                                break;
                            case "A4":
                                controls[i].focus();
                                return;
                                break;
                            case "A5":
                                controls[i].focus();
                                return;
                                break;
                            case "A6":
                                controls[i].focus();
                                return;
                                break;
                            case "A7":
                                controls[i].focus();
                                return;
                                break;
                            case "A8":
                                controls[i].focus();
                                return;
                                break;
                            case "A9":
                                controls[i].focus();
                                return;
                                break;
                            case "A10":
                                controls[i].focus();
                                return;
                                break;

                            default:
                        }
                    }
                }
            }
        });
    }
</script>

Namespace

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[19]{
                            new DataColumn("admno"),
                            new DataColumn("Name"),
                            new DataColumn("Class"),
                            new DataColumn("Stream"),
                            new DataColumn("Score"),
                            new DataColumn("Grade"),
                            new DataColumn("Remark"),
                            new DataColumn("Username"),
                            new DataColumn("time"),
                            new DataColumn("A1"),
                            new DataColumn("A2"),
                            new DataColumn("A3"),
                            new DataColumn("A4"),
                            new DataColumn("A5"),
                            new DataColumn("A6"),
                            new DataColumn("A7"),
                            new DataColumn("A8"),
                            new DataColumn("A9"),
                            new DataColumn("A10")
        });
        dt.Rows.Add("", "ann"  , "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "");
        dt.Rows.Add("", "john" , "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "");
        dt.Rows.Add("", "jane" , "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "");
        dt.Rows.Add("", "peter", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "");
        gvStudentGridMarks.DataSource = dt;
        gvStudentGridMarks.DataBind();
    }
}

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(18) {
                            New DataColumn("admno"),
                            New DataColumn("Name"),
                            New DataColumn("Class"),
                            New DataColumn("Stream"),
                            New DataColumn("Score"),
                            New DataColumn("Grade"),
                            New DataColumn("Remark"),
                            New DataColumn("Username"),
                            New DataColumn("time"),
                            New DataColumn("A1"),
                            New DataColumn("A2"),
                            New DataColumn("A3"),
                            New DataColumn("A4"),
                            New DataColumn("A5"),
                            New DataColumn("A6"),
                            New DataColumn("A7"),
                            New DataColumn("A8"),
                            New DataColumn("A9"),
                            New DataColumn("A10")})
        dt.Rows.Add("", "ann", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "")
        dt.Rows.Add("", "john", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "")
        dt.Rows.Add("", "jane", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "")
        dt.Rows.Add("", "peter", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "")
        gvStudentGridMarks.DataSource = dt
        gvStudentGridMarks.DataBind()
    End If
End Sub

Screenshot