JQgrid set cell focus on press 'TAB' key

See more:

ASP.NET

jQuery

JQGrid

Hi,

I'm beginner in JQgrid. I have started implementing JQGrid by adding custom delete & duplicate actions.Below is my grid structure.

$("#jQGridDemo").jqGrid({
            url: "<%= ConfigurationManager.AppSettings["WebApiUri"].ToString() %>" + "api/Person/GetDummyPersons",
            datatype: "json",
            colNames: ['Row No', 'Name', 'Age', 'Gender', 'Address', '', ''],
            colModel: [
                { name: 'RowNo', label: 'Row No', index: 'RowNo', width: 150, editable: false, hidden: true },
                { name: 'sName', label: 'Name', index: 'sName', width: 150, editable: true, edittype: 'text' },
                { name: 'iAge', label: 'Age', index: 'iAge', width: 150, editable: true, edittype: 'text', editrules: { integer: true } },
                { name: 'sGen', label: 'Gender', index: 'sGen', width: 150, editable: true, edittype: 'select' },
                { name: 'sAddress', label: 'Address', index: 'sAddress', width: 160, editable: true, edittype: 'text'                     },
                {
                    name: 'Delete', width: 20, sortable: false,
                    formatter: function () {
                        return "<img src='http://icons.iconarchive.com/icons/hopstarter/button/16/Button-Delete-icon.png'/>"
                    }
                },
                {
                    name: 'Duplicate', width: 20, sortable: false,
                    formatter: function () {
                        return "<img src='http://icons.iconarchive.com/icons/hopstarter/soft-scraps/16/File-New-icon.png'/>"
                    }
                }
            ],
            hidegrid: false,
            width: '100%',
            height: '100%',
            scrollOffset: 0,
            viewrecords: true,
            rowNum: -1,
            rownumbers : true,
            caption: "Job Details",
            cellEdit: true,
            cellsubmit: 'clientArray',
            editurl: 'clientArray',
            pager: '#jQGridDemo_pager',
.......

Since i have action keys(del & dup) at right side of my grid, when users hitting TAB key I need to set focus on those keys. After key's focus again i need to start focus on next row's first cell('sName' in my case).

I come across many examples like

$("#" + id + "lg_description").focus();

Even I tried like

$('#1_sName').focus(); //To set focus onload very first time

Nothing works. While checking in rendered content the editable cell "1_sName" is only generated on mouse click of an particular cell.At the very beginning JQgrid is simply generate "< td >" tags without any content inside.(only on clicking particular cell, the editable controls are rendering).

Here i dont have any post/save. I'm just trying to create an editable grid.

I have tried lot more examples from google but no luck !! help me out with some tips.