How to get jqGrid to dismiss add dialog after submit

Question

I have a jqGrid that uses inline editing for editing a single row and uses the icons on the navGrid to handle Add and Delete. It is working just fine, except that after clicking on the Submit button from the Add Dialog, the row is added, but the dialog does not close. I have placed the closeAfterAdd: true and closeAfterEdit: true in the appropriate places (AFAIK), yet the Add dialog does not go away after submit. I am sure I am missing something simple, but I have scoured the wiki and can't seem to figure out what is missing. Following is my script code:

$(document).ready(function () {         
    var lastsel;
    var idToSelect;
    jQuery("#grdEnvironments").jqGrid({
        url: '/Artifacts/GetEnvrionments',
        datatype: 'json',
        mType: 'GET',
        colNames: ['', 'Name'],
        colModel: [
            { name: 'TCEnvironmentId', key: true, index: 'TCEnvironmentId', sortable: false, hidden: true, editable: false },
            { name: 'Name', index: 'Name', width: 150, editable: true, editrules: { required: true } },
        ],
        pager: '#grdEnvironmentsPager',
        rowNum: 15,
        gridview: true,
        loadui: 'block',
        width: 300,
        height: 250,
        viewrecords: true,
        editurl: '/Artifacts/EditEnvrionment',
        caption: 'Various Envrionments',
        onSelectRow: function (id) {
            if (id && id != lastsel) {
                $(this).restoreRow(lastsel);
                $(this).editRow(id, {
                    keys: true,
                    closeAfterEdit: true
                });
                lastsel = id;
            }
        },
        loadComplete: function() {
            if (idToSelect) {
                $(this).jqGrid('setSelection', idToSelect);
                //console.log('In load Complete');
                //console.log(idToSelect);
                idToSelect = undefined;
            }
        }
    });
    jQuery('#grdEnvironments').jqGrid('navGrid', '#grdEnvironmentsPager',
        { add: true, edit: false, del: true, search: false, view: false },
        {/* Edit Options */
            closeAfterEdit: true
        },
        {/* Add Options */
            closeAfterAdd: true,
            afterSubmit: function(response)  {
                idToSelect = response.responseText;
                //console.log('In after submit');
                //console.log(idToSelect);
                return [true,'',idToSelect];
            }
        });
});

Any help is appreciated - this is not a show stopper, but I would like to get the behavior that is documented. BTW - when I comment out the console.log statements, they appear in the console, so I know I am getting into the code.

Thanks.

Answer 1

You should try with the last 4.5.2 version of jqGrid. The version 4.5.0 contains some bugs with usage of closeAfterAdd and clearAfterAdd. The bug is fixed in 4.5.1 version (see here).