0
votes

I have a Jqgrid which requires editing. I have successfully managed to configure the grid to save the data after editing, however the issue is that when the data is saved the grid is not refreshed with the data present in the database. For example the version field is automatically updated by the application backend however after a edit is done it is not refreshed and the old value is shown. I have tried afterSubmit afterComplete

which did not work. I also placed an alert in it to verify that the function was called however the alert was not shown either. Additionally I set loadonce to false and reloadaftersubmit to true but this did not work either. I think the issue could be that I either havent configured the edit correctly or placed the above mention parameters in the incorrect location.

After a save is done (edit) the updated data (which is the WHOLE page) is returned to the Jqgrid (as json). The issue here is that the old data is shown and how do I display this updated data after the edit.

UPDATE : I found out that when I edit via the popup box the afterSubmit is executed. HOWEVER the editing takes place via the formatoptions which allows to edit the data in the table itself. Now when the data is edited and saved from the grid itself without the use of the popup I want an afterSubmit to fire to refresh the table. Where do I place my afterSubmit / How do I achieve this.

/**
 * Initialize and Draw JQGrid
 * @return
 */
function drawFOMJQGrid(){

    var lastsel2;

    jQuery("#tblGrid").jqGrid({     

        height: 180, 
        width:990,
        datatype: "json", 
        colNames:['','Hotel','Outlet','Major Group','Item Group','Version'], 
        jsonReader : {
              root: "regDetails", 
              page: "page",
              total: "total",
              records: "records",   
              repeatitems: false
        },
        colModel:[ 
            {name: 'myac', width:80, fixed:true, sortable:false, resize:false, formatter:'actions', formatoptions:{keys:true}},
            {name:'hotelName',index:'hotelName',align:"left",width:30,resizable:false}, 
            {name:'majorGroupName',index:'majorGroupName',align:"left", width:20,resizable:false}, 
            {name:'itemGroupName',index:'itemGroupName', width:30,align:"left",resizable:false},
            {name:'version',index:'version', width:20,align:"right",resizable:false,editable:true,hidden: false}


        ],

        onSelectRow: function(id){
        },
        /*afterSubmit : function(response, postdata){
                        alert("AAAA");
        },  
        afterComplete : function(response, postdata){
                        alert("AAAA2");
        },  */              
        //rowList:[10,20,30], 
        rowNum:5,   
        pager: '#divGridPg', 
        sortname: 'hotelName', 
        viewrecords: true, 
        sortorder: "outletName",
        gridview: true, 
        bgiframe: true,
        autoOpen: false,
        caption: 'POS Item Pricing',
        forceFit: false,
        loadtext: 'Loading ...',
        sortable: true,
        loadonce: false,
        editurl:  "itemPricingSave.action", //"/js/itemPricing/server.js",          
        datatype: "json"




    }); 



    $("#tblGrid")[0].addJSONData(regGridJSONData);
    $("#tblGrid").setGridParam({datatype: 'json'});
    jQuery("#tblGrid").jqGrid('navGrid','#divGridPg',{edit:true,add:false,del:false,reloadAfterSubmit:true});       


}

/**
 * Initialize and Draw JQGrid
 * @return
 */
function drawFOMJQGrid(){

    var lastsel2;

    jQuery("#tblGrid").jqGrid({     

        height: 180, 
        width:990,
        datatype: "json", 
        colNames:['','Hotel','Outlet','Major Group','Item Group','Version'], 
        jsonReader : {
              root: "regDetails", 
              page: "page",
              total: "total",
              records: "records",   
              repeatitems: false
        },
        colModel:[ 
            {name: 'myac', width:80, fixed:true, sortable:false, resize:false, formatter:'actions', formatoptions:{keys:true}},
            {name:'hotelName',index:'hotelName',align:"left",width:30,resizable:false}, 
            {name:'majorGroupName',index:'majorGroupName',align:"left", width:20,resizable:false}, 
            {name:'itemGroupName',index:'itemGroupName', width:30,align:"left",resizable:false},
            {name:'version',index:'version', width:20,align:"right",resizable:false,editable:true,hidden: false}


        ],

        onSelectRow: function(id){
        },
        /*afterSubmit : function(response, postdata){
                        alert("AAAA");
        },  
        afterComplete : function(response, postdata){
                        alert("AAAA2");
        },  */              
        //rowList:[10,20,30], 
        rowNum:5,   
        pager: '#divGridPg', 
        sortname: 'hotelName', 
        viewrecords: true, 
        sortorder: "outletName",
        gridview: true, 
        bgiframe: true,
        autoOpen: false,
        caption: 'POS Item Pricing',
        forceFit: false,
        loadtext: 'Loading ...',
        sortable: true,
        loadonce: false,
        editurl:  "itemPricingSave.action", //"/js/itemPricing/server.js",          
        datatype: "json"




    }); 



    $("#tblGrid")[0].addJSONData(regGridJSONData);
    $("#tblGrid").setGridParam({datatype: 'json'});
    jQuery("#tblGrid").jqGrid('navGrid','#divGridPg',{edit:true,add:false,del:false,reloadAfterSubmit:true});       


}
2

2 Answers

0
votes

I did the following to force the grid reload:

.navGrid('#pager',
                    {edit:true,
                    add: true, 
                    del:true,refresh:false},
              { // edit options

                    afterSubmit: function() {
                        comptes[0].clearToolbar();
                        comptes.jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
                          return [true,'',false]; // no error and no new rowid
                         }
                }, 
                { // add options

                     afterSubmit: function() {
                            comptes[0].clearToolbar();
                            comptes.jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
                        return [true,'']; // no error
                    }
                } ,
                { // delete options
                     afterSubmit: function() {
                            comptes[0].clearToolbar();
                            comptes.jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
                        return [true,'']; // no error
                    }
                }       
               );
0
votes

Try to reload jqGrid with new data after all your editing process as following:

jQuery("#grid").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');