Free jqGrid autocomplete disables for inline editing after select

Question

Here is my grid column code:

{name:'Track_Name',index:'isrc.Track_Name', width:195, align:"left", editable:true,
    editoptions:{
        dataInit:function (elem, options) {
            $(elem).autocomplete({
                source: "xtras/search_isrc.php",
                dataType: "json",
                minLength: 2,
                select: function(event, ui) {

                    $grid.jqGrid("setCell", options.rowId, "ISRC", ui.item.ISRC);
                    $grid.jqGrid("setCell", options.rowId, "Track_Name", ui.item.Track_Name);
                    $grid.jqGrid("setCell", options.rowId, "Time", ui.item.Track_Time);
                    $grid.jqGrid("setCell", options.rowId, "ArtistName", ui.item.ArtistName);
                    $grid.jqGrid("setCell", options.rowId, "Writer", ui.item.Writer);
                    $grid.jqGrid("setCell", options.rowId, "Publisher", ui.item.Publisher);
                    $grid.jqGrid("setCell", options.rowId, "Year", ui.item.TrackPLineYear);
                    $grid.jqGrid("setCell", options.rowId, "PInfo", ui.item.TrackPLineInfo);
                    $grid.jqGrid("setCell", options.rowId, "isrc_ID", ui.item.isrc_ID);

                    $("#"+options.rowId+"_Disc").focus();
                },
                change: function(event, ui) {
                    if (ui.item) {
                        $grid.jqGrid("setCell", options.rowId, "ISRC", ui.item.ISRC);
                        $grid.jqGrid("setCell", options.rowId, "Track_Name", ui.item.Track_Name);
                        $grid.jqGrid("setCell", options.rowId, "Time", ui.item.Track_Time);
                        $grid.jqGrid("setCell", options.rowId, "ArtistName", ui.item.ArtistName);
                        $grid.jqGrid("setCell", options.rowId, "Writer", ui.item.Writer);
                        $grid.jqGrid("setCell", options.rowId, "Publisher", ui.item.Publisher);
                        $grid.jqGrid("setCell", options.rowId, "Year", ui.item.TrackPLineYear);
                        $grid.jqGrid("setCell", options.rowId, "PInfo", ui.item.TrackPLineInfo);
                        $grid.jqGrid("setCell", options.rowId, "isrc_ID", ui.item.isrc_ID);
                        $("#"+options.rowId+"_Disc").focus();
                    }
                }
            });
            $('.ui-autocomplete').css('zIndex',1000); 

            if (options.mode !== "add") {
                $(elem).css({'border':'1px solid red','background-color':'#e8b7cf'});
            }
        }
    }
},

All above mentioned cells are visible and editable apart from isrc_ID, which is editable, but hidden. Here is what search_isrc.php returns:

$row_array['label']             = $data['Track_Name'];
$row_array['ISRC']              = $data['ISRC'];   
$row_array['Track_Name']        = $data['Track_Name'];
$row_array['ArtistName']        = $data['ArtistName']; 
$row_array['Track_Time']        = $data['Track_Time'];
$row_array['Writer']            = $data['Writer']; 
$row_array['Publisher']         = $data['Publisher']; 
$row_array['TrackPLineYear']    = $data['TrackPLineYear']; 
$row_array['TrackPLineInfo']    = $data['TrackPLineInfo']; 
$row_array['isrc_ID']           = $data['isrc_ID'];

Here is inline editing trigger:

ondblClickRow: function (rowid) {
    var savedRows = $grid.jqGrid("getGridParam", "savedRow");
    $grid.jqGrid("setSelection", rowid);

    if (savedRows.length > 0 && savedRows[0].id !== rowid) {
        // cancel editing of another row is editing
        // don't cancel on double click on the current editing
        $grid.jqGrid("restoreRow", savedRows[0].id);
    }
    if (savedRows.length === 0) {
        $grid.jqGrid("editRow", rowid, editOptions);
    } 
}

This selects, displays and sends correct values as expected. My problem is that after selecting a value all above cells becomes disabled for editing. How can I prevent this behaviour?

--------------------UPDATE---------------------

jqGrid 4.13.0 - free jqGrid

jquery-1.11.0.min.js

listed columns in select and change events are all editable:true - the goal is to fill in the data into those cells

$("#"+options.rowId+"_Disc").focus(); - is there just to put focus into specific cell after an autocomplete data was selected.

Which versions of free jqGrid and jQuery UI you use? For example I don't know about dataType: "json" option of autocomplete. Which columns are editable in the grid? You use setCell for many columns inside of select and change event. What is the goal of that? Is all the columns non-editable? The statement "editable apart from isrc_ID" is not clear enough because you didn't included colModel. What goal of the line $("#"+options.rowId+"_Disc").focus();. — Oleg

Oleg Oleg · Accepted Answer · 2016-02-25T10:46:37

It seems to me that the origin of your problem is the usage of setCell on cells which are in editing mode. One can't do this. The setCell will just set new HTML content on the cells (innerHTML of <td> elements) and the <input>, <select> and other editing controls will be removed from the row. If you really need to use set the values in the corresponding controls then you should access in input elements by ids.

The id of controls of inline editing row will be build based on rowid as the prefix, the underscore character _ and the name of the column. For example the code fragment

$grid.jqGrid("setCell", options.rowId, "ISRC", ui.item.ISRC);
$grid.jqGrid("setCell", options.rowId, "Track_Name", ui.item.Track_Name);
$grid.jqGrid("setCell", options.rowId, "Time", ui.item.Track_Time);
...

should be rewritten like

var idPrefix = "#" + options.rowId + "_", item = ui.item;
$(idPrefix + "ISRC").val(item.ISRC);
$(idPrefix + "Track_Name").val(item.Track_Name);
$(idPrefix + "Time").val(item.Track_Time);
...

Moreover you should remove non-existing option dataType: "json" of jQuery UI Autocomplete and unneeded property align:"left" of colModel.

Free jqGrid autocomplete disables for inline editing after select

1 Answers