jqgrid reload is not working

Question

my code....

public string ConstructButtonEvents(string buttonid, string gridID, string GridControlId, string ActionUrl)
    {
        StringBuilder sbButtonEvents = new StringBuilder();
        GridControlId = GridControlId.Trim();
        sbButtonEvents.Append(" $('#" + buttonid + "').die().live('click', function () { ");
        sbButtonEvents.Append("var SelectedArtifactDetails = new Array();");
        sbButtonEvents.Append(" var CurrentArtifactDetails = new Array();");
        sbButtonEvents.Append("for (var i = 0; i < $('#" + gridID + " tbody tr').length; i++) {");
        sbButtonEvents.Append(" var rowId = jQuery('#" + gridID + " tr:eq(' + i + ')').attr('id');");
        sbButtonEvents.Append("var row = $('#" + gridID + "').jqGrid('getRowData', rowId);");

        sbButtonEvents.Append(" if (($('#Status" + GridControlId + "'+rowId).attr('checked') == 'checked') && ($('#Status" + GridControlId + "'+rowId).attr('disabled') != 'disabled')) {");

        sbButtonEvents.Append("CurrentArtifactDetails = {");
        sbButtonEvents.Append(" Complete: 'Y',");
        sbButtonEvents.Append("StakeHolderEmail: $('#Stakeholder" + GridControlId + "'+rowId).attr('value'),");
        sbButtonEvents.Append("UploadFile: $('#uploadFile" + GridControlId + "'+rowId).attr('value'),");
        sbButtonEvents.Append("PhaseArtifactId: $(row).attr('ID'),");

        sbButtonEvents.Append("Status: $('#list" + GridControlId + "'+rowId+'  option:selected').text()");
        sbButtonEvents.Append("};");

        sbButtonEvents.Append("SelectedArtifactDetails.push(CurrentArtifactDetails);");
        sbButtonEvents.Append("}");
        sbButtonEvents.Append("}");

        sbButtonEvents.Append(" $.ajax({");
        sbButtonEvents.Append(" url: '" + ActionUrl + "',");
        sbButtonEvents.Append(" async: false,");
        sbButtonEvents.Append(" loadonce:false, type: 'POST', dataType: 'json', data: JSON.stringify(SelectedArtifactDetails), contentType: 'application/json; charset=utf-8',");
        sbButtonEvents.Append(" success: function () {");
        //sbButtonEvents.Append(" $('#" + gridID + "').jqGrid('GridUnload');");
        sbButtonEvents.Append(" $('#" + gridID + "').trigger('reloadGrid');");            
        sbButtonEvents.Append(" }, error: function () { alert('error'); }");
        sbButtonEvents.Append("});");
        sbButtonEvents.Append("});");

        return sbButtonEvents.ToString();
    }

i have mutliple tabs yet the grid id generation is perfect. I'm constructing the grid in the .cs itself. i need to update the data in the rows to the DB. so, i have an update button... on click of it i post (ajax) the data. The data is getting updated pretty much well. But the grid is not getting reloaded.

on click of update button i fetch the values and then the below ajax post is called

$.ajax({ url: '/SDLCMClassic/EditProject/BatchUpdate',
    type: 'POST',
    dataType: 'json',
    data: JSON.stringify(SelectedArtifactDetails),
    contentType: 'application/json; charset=utf-8',
    success: function () {
        $('#tblArtifact1').trigger('reloadGrid');
    }, error: function () { alert('error'); }
});

});

I'm able to fetch the row values in the grid and i'm able to post it successfully. It is getting updated in DB as well. But immediate reload is not happening. if i refresh the whole page then only i'm able to see the updated data.

Here is the code to construct jqgrid in js

$(function () {
    $('#tblArtifact1').jqGrid({
        url: '/SDLCMClassic/EditProject/FillArtifactGrid?ppmno=188035&phaseName=Project Startup',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Artifact', 'Complete', 'Status', 'Stakeholder', 'App Reference', 'Document', 'URL', 'ID'],
        colModel: [
        { name: 'Name', index: 'Name', editable: false, edittype: '', align: 'left', key: false, hidden: false, formatter: 'showlink', formatoptions: { target: '_blank', baseLinkUrl: '' }, width: $(window).width() * .1, sortable: false },
        { name: 'Complete', index: 'Complete', editable: false, edittype: '', align: 'center', key: false, hidden: false, formatter: '', formatoptions: { target: '', baseLinkUrl: '' }, width: $(window).width() * .06, sortable: false },
        { name: 'Status', index: 'Status', editable: false, edittype: '', align: 'center', key: false, hidden: false, formatter: '', formatoptions: { target: '', baseLinkUrl: '' }, width: $(window).width() * .10, sortable: false },
        { name: 'StakeHolderEmail', index: 'StakeHolderEmail', editable: false, edittype: '', align: 'center', key: false, hidden: false, formatter: '', formatoptions: { target: '', baseLinkUrl: '' }, width: $(window).width() * .15, sortable: false },
        { name: 'App Reference', index: 'App Reference', editable: false, edittype: '', align: 'center', key: false, hidden: false, formatter: '', formatoptions: { target: '', baseLinkUrl: '' }, width: $(window).width() * .15, sortable: false },
        { name: 'Document', index: 'Document', editable: false, edittype: '', align: 'center', key: false, hidden: false, formatter: '', formatoptions: { target: '', baseLinkUrl: '' }, width: $(window).width() * .18, sortable: false },
        { name: 'URL', index: 'URL', editable: false, edittype: '', align: 'center', key: false, hidden: false, formatter: '', formatoptions: { target: '', baseLinkUrl: '' }, width: $(window).width() * .15, sortable: false },
        { name: 'ID', index: 'ID', editable: false, edittype: '', align: 'center', key: false, hidden: true, formatter: '', formatoptions: { target: '', baseLinkUrl: '' }, width: $(window).width() * .01, sortable: false }
         ],
        viewrecords: true,
        sortname: 'Complete',
        sortorder: 'asc',
        width: 'auto',
        height: 'auto',
        subGrid: true,
        subGridRowExpanded: function (subgrid_id, row_id) {
            $('#' + subgrid_id).html(renderhtmlforSubgrid(this, subgrid_id, row_id));
        },
        gridComplete: function () {
            var dataIds = $('#tblArtifact1').jqGrid('getDataIDs');
            for (var i = 0; i < dataIds.length; i++) {
                $('#tblArtifact1').editRow(dataIds[i], false);
            }
        },
        loadComplete: function () {
            ModifyGridDefaultStyles('tblArtifact1');
        }
    });
});

Answer 1

You don't posted the most important part of the code: the code which defines jqGrid. So I have to guess.

Typical problem with not reloading of grid per .trigger('reloadGrid'); is because you use loadonce: true option in the jqGrid. It changes datatype from the initial "json" or "xml" value to datatype: "local". So reloading do work, but reload the local data. If you need to reload the data from the server you have to reset datatype to initial value "json" or "xml" before trigger reloadGrid. See the answer and the answer for more details.