Hi,

  I have a gridview which has 200 rows and 9 columns in each cell. All
the columns have text boxes. I have added the keyboard navigation to
the text boxes so that the user can use left, right, up, down arrow
keys to go to the next cell. But it is little bit slow. I just want to
make sure if I am doing this right. If not, what would be right
approach? Please see my code below.

//ready event
$(function(){
            $('input[type=text]').not('[id^=outside]').each(function()
{
                var current = this;
                this.onkeydown = function(event) {
                    if(!event) event = window.event;
                    funcKeyDown(event,
this);
                }
            });
 });

function funcKeyDown(evt, obj)
        {
            var inputSelector = 'input[type=text]';
            var inputFilter = '[id=' + obj.id + ']';
            var elem = $
(inputSelector).filter(inputFilter);
            var index = $(inputSelector).index(elem);
            //get the number of elements in each row
            var numElements =
elem.parent().parent().children().size();
            switch(evt.keyCode) {
                case 37: //
left
                    if(index != -1)
                    {
                        var nextElem = $(inputSelector).get(index -
1);
                        if(nextElem != null)
                        {
                            nextElem.focus();
                        }
                    }
                    return false;
                case 38: //up
                    var cellIndex = index % numElements;
                    var rowIndex = parseInt(index /
numElements);
                    if(rowIndex > 0)
                        rowIndex = rowIndex - 1;
                    var cell = $(inputSelector).get((rowIndex *
numElements) + cellIndex);
                    if(cell != null)
                    {
                        cell.focus();
                    }
                    return false;
                case 39: //right
                    if(index != -1)
                    {
                        var nextElem = $(inputSelector).get(index +
1);
                        if(nextElem != null)
                        {
                            nextElem.focus();
                        }
                    }
                    return false;
                case 40: //down
                    var cellIndex = index % numElements;
                    var rowIndex = parseInt(index / numElements) +
1;
                    var cell = $(inputSelector).get((rowIndex *
numElements) + cellIndex);
                    if(cell != null)
                    {
                        cell.focus();
                    }
                    return false;
            }
        }

Reply via email to