jqGrid. Async ajax calls

Question

first of all, thanks for your time.

I'm trying to use jqGrid to make an editable grid. I'd like the user edit lines, jqGrid send changes and WITHOUT waiting response from server, user continue editing lines. If server response is OK, do nothing, and if there is some error I'd show some kind of error log (but this doesn´t worry me).

This code works:

var ultimaFila = 0; // globally available               

var saveActRow = function(){ 
    jQuery('#gridLineas').jqGrid('saveRow', ultimaFila,  
        function(xhr) {                         
            var response = eval('(' + xhr.responseText + ')'); 
            if(response.respuesta == "ok"){ 
                return true;
            } else{
                return false;
            }
        }   
        , 'ActualizarLineaAlbaran.action'
    );   
};          

var addActRow = function(e) {                                   
    var lastRowInd = jQuery("#gridLineas").jqGrid("getGridParam","reccount"); 
    if (ultimaFila == lastRowInd){ // ¿es última línea? 
        jQuery("#gridLineas").jqGrid('addRow',{
            rowID : parseInt(ultimaFila) + 1,
            initdata : {'numLinea':parseInt(ultimaFila) + 1},
            position :"last",
            useDefValues : false,
            useFormatter : false,
            addRowParams : {extraparam:{}}
        });
    }
};          


jQuery(document).ready(function(){
      $("#gridLineas").jqGrid({   
            jsonReader : {root:"albaLineas", cell: "", repeatitems: false},  
            url:'albaLineas.action',
            //ajaxGridOptions: { async: false },
            loadui: 'disable',
            datatype: 'json',
            mtype: 'POST',                      
            colNames:['codIndiceAlb', 'numLinea', 'Código', 'CSP', 'cantidad'],
            colModel :[ 
                {name:'codIndiceAlb', index:'codIndiceAlb', hidden: true, width:50, editable: false, sortable:false, align: "center"},
                {name:'numLinea', index:'numLinea', hidden: false, width:50, editable: false, sortable:false, align: "right"},
                {name:'codigoArticulo', index:'codigoArticulo', width:50, editable: true, sortable:false, align: "right"},
                {name:'articuloCSP', index:'articuloCSP', width:50, editable: true, sortable:false, align: "right"},
                {name:'cantidad', index:'cantidad', width:60, editable: true, sortable:false, align: "right",
                    editoptions: { dataEvents: [                                            
                        { type: 'keydown', fn: function(e) {                                                                
                            var key = e.charCode || e.keyCode;
                            if (key == 13){ 
                                saveActRow();
                                addActRow(); 
                            }}}]}
                },              
            ], 
            rowNum:100,
            sortname: 'numLinea',
            sortorder: 'desc',
            gridview: true,
            caption: 'líneas',  
            height: 350,                
            loadtext :'cargando líneas...',
            editurl: 'ActualizarLineaAlbaran.action',
            onSelectRow: function(id) { 
                if (id && id !== ultimaFila) {
                    jQuery('#gridLineas').jqGrid('restoreRow',ultimaFila);   
                    ultimaFila = id;
                    /*jQuery("#grid_id").jqGrid('editRow',rowid, keys, oneditfunc, 
                            succesfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);*/
                    jQuery('#gridLineas').jqGrid('editRow', id, false, null, 
                        function(xhr) {
                            /* SUCCESFUNC*/
                            var response = eval('(' + xhr.responseText + ')'); 
                            if(response.respuesta == "ok"){ 
                                return true;
                            } else{
                                return false;
                            }
                         }  
                        , 'ActualizarLineaAlbaran.action'
                    );                              
                }

            }                       
    }); 

but user can't continue editing until server response. I thought Ajax tech was usefully for this, but I'm an absolutely newbie in Ajax and jGrid.

I tried Synchronous Calls with jqGrid? answer, but no result for me.

So, is there anyway to don't "wait" server answer? Any help is appreciated.

Thank you, Jon

************* EDITED - RESPONSE TO OLEG ANSWER ***********

thanks again Oleg! the ajaxRowOptions: { async: true } works perfect, but (there is always a but ;-)) users stills see the gray grid. I suspect there is something to do with

ui.jqgrid.css line .ui-jqgrid .jqgrid-overlay

because if I delete this line overlay is out, but I have unexpected results (grid is allways gray). With Firebug I see that

<div id="lui_gridLineas" class="ui-widget-overlay jqgrid-overlay" style="display: none;"></div>

line is the one witch is showing the overlay, but do someone know how to overwrite this particular line? Witch is the script code that change de style from display to block? Thanks everyone! and have a good day! Jon

Answer 1

You use inline editing. So you have close, but another problem as described in the answer which you referenced. So if you would use ajaxSubgridOptions: { async: false } it well not help. In the source code of jqGrid you can find the line which make problems to you. So you should use

ajaxRowOptions: { async: true }

See the answer which describes close problems.

Additionally I would you recommend don't eval. Instead of eval('(' + xhr.responseText + ')') you can use much more safe jQuery.parseJSON: $.parseJSON(xhr.responseText).

UPDATED: jqGrid uses the line

$("#lui_"+$t.p.id).show();

to display the loading overlay. You can hide the overlay either inside of serializeRowData callback (it should be defined as jqGrid parameter):

serializeRowData: function (postdata) {
    $("#lui_" + this.p.id).hide();
    return postdata;
}

or use beforeSend callback in the ajaxRowOptions:

ajaxRowOptions: {
    async: true,
    beforeSend: function () {
       // the gridLineas below should be the id of the grid
        $("#lui_gridLineas").hide();  
    }
}

I don't tested the suggestions but I hope the both should work.