CODEWITHSUNDEEP
jqueryautocompletefree-jqgrid
Elen
Elen

Reputation: 2343

Free jqGrid autocomplete disables for inline editing after select

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.

Upvotes: 0

Views: 341

Answers (1)

Oleg
Oleg

Reputation: 221997

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.

Upvotes: 1

Related Questions