2
votes

How to set focus on specific cell in onSelectRow in inline edit jqgrid?

I have tried the answers from:
1. Need jqGrid inline editing to have focus go to clicked cell
2. How to set focus to cell which was clicked to start inline edit in jqgrid
3. How to edit the selected cell on jqGrid
4. Set the focus to the editable input field on select row in jqgrid

but none of that works!

So now I don't need to find what cell the user clicked, but I need the cursor to be exactly in "lg_description" column for each row. Which I guess the problem is with the e parameter, and I think when I set it to "lg_description" column, I just need to attach "lg_description" somewhere instead of e parameter.

EDITED:
This is my code:

onSelectRow: function(id, status, e){
    var grid = $(this); 
    if(id && id!==lastSel){               
        grid.restoreRow(lastSel);   
        lastSel=id;

        //cursor focus

        //first attemp: $("#lg_description").focus();
        //second attemp: $("input, select",e.target).focus();
        //third attemp: document.getElementById("lg_description").focus();
        //fourth attemp:
        /*var setFocusToCell = function(e) {
            if(!e || !e.target) return;
            var $td = $(e.target).closest("td"), $tr = $td.closest("tr.jqgrow"), ci, ri, rows = this.rows;
            if ($td.length === 0 || $tr.length === 0 || !rows) return;
            ci = $.jgrid.getCellIndex($td[0]);
            ri = $tr[0].rowIndex;
            $(rows[ri].cells[ci]).find("input,select").focus();
        }
        setFocusToCell(e);*/
    }
    grid.editRow(id, true,"","","","",aftersavefunc);  
    //fifth attemp: grid.editRow(id, true,function() {$("#lg_description").focus();},"","","",aftersavefunc);
 },

I have tried 5 different attemps where the fifth one is a substitute for the code above it

1
You wrote that none from above suggestions not works. If you double-click on some cell in the demo you don't have focus in the clicked cell? Or your mean that your code based on the suggestion not works? Could you include the code of your accempts? You wrote about lg_description. Where is the corresponding code? Do you tried to place .focus() call inside of setTimeout()? Typically the setting of focus with small timeout work always.Oleg
I mean that my code based on the suggestions didn't work. I've edited my questions to attach the codeMarsha
you makes many attempts to set focus before calling of editRow which creates the input fields if inline editing. Moreover I asked you to insert more full code which you use. It's strange why you try to use $("#lg_description").focus(); with lg_description to set the focus. Is the rowid of the editing row lg? Is the column name is description? Could you include more full code which you use? At least colModel and test data for the grid (2 rows are enough) are required.Oleg
lg_description is the column name and index from the col model. Oh I see, so we must call the editRow first before we can set the focus on specific cell. So I tried to implement stackoverflow.com/questions/6536654/… code again, and it works! I don't know why I failed on my attempts before. Thanks Oleg!Marsha

1 Answers

3
votes

You makes many attempts to set focus before calling of editRow which creates the input fields if inline editing. Moreover it's strange why you try to use

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

with id="lg_description" to set the focus. Is the rowid of the editing row "lg"? Is the column name is "description"? The demo from the answer which you referenced set focus on the <input> or <select> in the clicked cell (children of e.target). If you want to set the focus always on specific column then you should use

$("#" + $.jgrid.jqID(id) + "_lg_description").focus();
// where "lg_description" is the column name

The usage of $.jgrid.jqID(id) instead of id is more safe, because id could have in common case meta-characters which have to be escaped in the selector. See jQuery documentation for more details.