GridView Up and Down Navigation using jQuery

Question

I am trying to achieve GridView Up and Down keyboard navigation feature, using jQuery. I have written code for the same, but with a bug that it is working only once

Answer 1

I've figured out your problem, you can't bind keydown on table row. But you can add listener to body for keydown:

$("body").keydown(function(e){
  if(e.keyCode == 40 ) //down arrow key code
    toggleRowSelectionDown();
  if(e.keyCode == 38) // up arrow key code
    toggleRowSelectionUp(); 
}); //this code detect is it up or down arrow

I have put your code in functions for easy reading and maintenance:

function toggleRowSelectionDown() {
    var row = $("#<%=GridView1.ClientID%> .selectedRowNew");
    if (!row.is(":last-child")) { //check for last row in grid
        $("#<%=GridView1.ClientID%> tr[id]").removeClass("selectedRowNew").addClass("normalRow");
        var next = row.next();
        next.removeClass("normalRow").addClass("selectedRowNew");
    }
}

function toggleRowSelectionUp() {
                var row = $("#<%=GridView1.ClientID%> .selectedRowNew");
                if (!row.is(":first-child")) { // check for first row in grid
                    var prev = row.prev();
                    if (prev.attr('id')) { // to avoid header row
                        $("#<%=GridView1.ClientID%> tr[id]").removeClass("selectedRowNew").addClass("normalRow");
                        prev.removeClass("normalRow").addClass("selectedRowNew");
                     }

                }
            }

I created this jsfiddle to demonstrate functionality: http://jsfiddle.net/Ps3WL/31/

Added check for start and end of the grid

Answer 2

you can replace your line with my lines only for

(e.keycode==40)            $(this).closest('tr').next().find('td:eq('+$(this).closest('td').index()+')').find('input').focus();