How to move cursor from Second Column to First Column in a new row in jqgrid

Question

I am new to jqgrid. I have the following code to insert a new row when a tab key is pressed. It works for the most part of it. But when a new row is inserted, the focus is given to the second Column in that row instead of First column.

How do I solve this problem??

HTML:

 <table  id="list11"></table>
 <!--<div id="paddtree"></div>-->
 <label>press tab to add new row</label>
<script>
    var selIRow = 1;
        var lastsel2
        jQuery("#list11").jqGrid({
    // url:'d/${jobId}.htm',
            datatype: "json",
            colNames: ['First Name', 'Email ID', 'Phone Number'],
            colModel: [
                // {name:'id',index:'id', width:75, search:true, stype:'text' , search:true, sortable:true},
                {name: 'firstName', width: 180, search: true, stype: 'text', sortable: true, editable: true, },
                {name: 'email', index: 'email', width: 250, editable: true},
                {name: 'phoneNumber', index: 'phoneNumber', width: 100, align: "right", editable: true,
                    editoptions: {
                        dataInit: function(elem) {
                            $(elem).focus(function() {
                                this.select();
                            })
                        },
                        dataEvents: [
                            {
                                type: 'keydown',
                                fn: function(e) {
                                    var key = e.charCode || e.keyCode;
                                    if (key == 9 || key == 15)//tab
                                    {
                                        var grid = $('#list11');
                                        //Save editing for current row
                                        grid.jqGrid('saveRow', selIRow, false, 'clientArray');
                                        //If at bottom of grid, create new row
                                        // alert(grid.getDataIDs().length);
                                        if (selIRow++ == grid.getDataIDs().length) {

                                            grid.addRowData(selIRow, {});
                                        }
                                        //Enter edit row for next row in grid
                                        grid.jqGrid('editRow', selIRow, true, 'clientArray');

                                    }
                                }
                            }
                        ]
                    }, },
            ],
            beforeRequest: function(data) {
                var grid = $('#list11');

                grid.addRowData(grid.jqGrid('getGridParam', 'records') + 1, {});
                grid.jqGrid('editRow', selIRow, false, 'clientArray');


            },
            onSelectRow: function(id) {
                if (id && id !== lastsel2) {

                    jQuery('#list11').jqGrid('restoreRow', lastsel2);
                    jQuery('#list11').jqGrid('editRow', id, true);
                    lastsel2 = id;
                }
            },
            // editurl: "data/add.htm",
            sortname: 'id',
            viewrecords: true,
            sortorder: "desc",
    caption: "Candidates applied for <bold> ${job.getTitle()}</bold>",
            // pager : "#paddtree",
            emptyrecords: "new",
        });
</script>

Thanks.

Hyperaesthesia

Have you tryed e.stopPropagation() when you set a new row for editing? im not sure but maybe what is happening is that you start editing a row, focus is given to the first input, but then the event propagates and passes focus to next input – Diamagnetic

I have many questions to the code which you posted. The first one: how you fill the grid (you use datatype: "json" so it should be url options)? You don't defined editurl. You specify in some places (but not everywhere) 'clientArray' as url. Do you want to modify the data only locally? Moreover you set focus of third column ('phoneNumber') and moreover in a wrong way, but you wrote "the focus is given to the second Column in that row instead of First column". What behavior you want to implement? – Proviso

@Proviso I have specified both URL and EDITURL but only here I have commented it out. – Hyperaesthesia

@deepakkumar: Could you describe where you want to save the data? you use editRow in onSelectRow with saving on remote place (editurl: "data/add.htm"), but don't save new added data at all or discard the data (save only locally) if one TAB pressed? – Proviso

@Proviso I am implementing it step by step, I still have to write code. Saving data on the server in not my primary concern right now. – Hyperaesthesia

@deepakkumar: I see many problems in your code, but I am not sure what the code should do? Could you describe it as a text in your question? Moreover I don't understand what behavior with setting of the focus you want to implement and what problem exactly you have now. I'v mentioned in my previous comment that you try set focus in column 'phoneNumber' which is the third column and not first or second like you wrote in the question. What behavior you really need to implement and what problem (and when - on selection of new row or on inserting of new row by TAB only) you currently have? – Proviso

Can you create a jsfiddle? – Require

Answer 1

All you have to do to your code is add the line e.preventDefault(); here:

if (key == 9 || key == 15)//tab
{
    e.preventDefault();
    ...

Jellied

Answer 2

Your example works if you use e.preventDefault() :

if (key == 9 || key == 15) //tab
{
    e.preventDefault();
    //do your other stuff...

Outmoded

Answer 3

Use e.preventDefult();. This prevents predefined actions such as open new tab on click....

Alternatively

Personally haven't used jgrid but the syntax is the same with jQuery datatables. Its very flexible and it has an awesome documentation have a look at it.

Fractocumulus