Question

I have a jqGrid with a list of users in it using inline add/edit functions. For some reason, I cannot get jqGrid to save the edits I have made when my saveEdit function is called, but the data will save if I press the enter key. If I comment out the inlineNav line of jqGrid, everything works as expected.

To clarify, no request is ever sent to the server when my saveEdit function is run. When I press the enter key, a request is sent to the server. Any idea what is going on?

Here is my code:

var editParams = {
    afterSubmit: processResponse, 
    successfunc: function(response) {
        var processed = processResponse(response);
        if(processed[0] !== true) {
            $.jgrid.info_dialog($.jgrid.errors.errcap, processed[1], $.jgrid.edit.bClose);
        }
        return processed[0];
    }, 
    bottominfo: 'Fields marked with an (*) are required', 
    keys: true
};
$.extend($.jgrid.edit, editParams);
$('#grid')
    .jqGrid({
        datatype: 'json', 
        colNames: ['User ID', 'First Name', 'Last Name', 'Email'], 
        colModel: [
            {name: 'usr_id', jsonmap: 'usr_id', width: 75, editable: true, editrules: {required: true}, formoptions: {elmprefix: '(*) '}}, 
            {name: 'usr_fname', jsonmap: 'usr_fname', width: 75, editable: true, editrules: {required: true}, formoptions: {elmprefix: '(*) '}}, 
            {name: 'usr_lname', jsonmap: 'usr_lname', width: 75, editable: true, editrules: {required: true}, formoptions: {elmprefix: '(*) '}}, 
            {name: 'usr_email', jsonmap: 'usr_email', width: 125, editable: true, editrules: {required: true}, formoptions: {elmprefix: '(*) '}}
        ], 
        grouping: true, 
        shrinkToFit: false, 
        height: 200, 
        width: 800, 
        rowNum: 20, 
        rowList: [10, 20, 30, 40, 50, 100], 
        repeatitems: false, 
        ignoreCase: true, 
        jsonReader: { repeatitems: false, id: 'usr_id'}, 
        pager: '#grid_pager', 
        url: 'dataurl.php', 
        editurl: 'editurl.php', 
        ondblClickRow: inlineEdit, 
        onSelectRow: saveEdit
    })
    .jqGrid('navGrid', '#users_pager', {add: false, edit: false, del: false, refresh: false, search: false})
    .jqGrid('inlineNav', '#users_pager', {edit: false, save: false, cancel: false}); //If I comment out this line, everything works perfectly

var lastSel;
/* Start editing the row */
function inlineEdit(id, iRow, iCol) {
    $(this).jqGrid('editRow', id, true, function() { focusRow(id, iCol, this); });
}

function focusRow(id, iCol, table) {
    var ele = document.getElementById(id + '_' + table.p.colModel[iCol].name), 
        length = ele.value.length;
    ele.focus();
    if(ele.setSelectionRange) { //IE
        ele.setSelectionRange(length, length);
    }
    else if(ele.createTextRange) {
        var range = ele.createTextRange();
        range.collapse(true);
        range.moveEnd('character', length);
        range.moveStart('character', start);
        range.select();
    }
}

function saveEdit(id) {
    if(id && id != $(this).data('lastSel')) {
        /* Save the last selected row before changing it */
        $(this).jqGrid('saveRow', $(this).data('lastSel'), editParams);
        $(this).data('lastSel', id);
    }
    $(this).data('lastSel', id);
}

Thank you in advance to anyone that helps me.

Answer 1

well buddy, you are not using inlineNav anyhow, why do u want to keep it there? second when you press enter, its not calling your saveEdit function, by default functionality is like this only.

I see you are saving your records on onSelectRow property and when press enter, after inline edit, this won’t be called. You can make your keys:false. It will not trigger the request to server on enter key press.