Reload of jqgrid not happening with loadonce:true

Question

I am newbie in using jqgrid.

While new page load the grid is properly loading the data from database. Afterwards due to loadonce: true the grid is not reloading the data from database for add/edit/delete.

My application combination is JSP, Servlet, MySQL

I have a grid with following settings

jQuery("#userList").jqGrid({
                    url: '<%=request.getContextPath()%>/userJqGrid?q=1&action=fetchData&userCookie=<%= encodedCookie%>',
                    datatype: 'xml',
                    mtype: 'GET',
                    colNames:['<%= userProp.getProperty(userColNames[0])%>',
                              '<%= userProp.getProperty(userColNames[1])%>',
                              '<%= userProp.getProperty(userColNames[2])%>',
                              '<%= userProp.getProperty(userColNames[3])%>',
                              '<%= userProp.getProperty(userColNames[4])%>',
                              '<%= userProp.getProperty(userColNames[5])%>'
],
                    colModel:[
                        {name:'<%= userColNames[0]%>',index:'<%= userColNames[0]%>',
                            width:120,sortable:true,editable:true,editrules:{required:true},formoptions:{rowpos:1, elmprefix:'*'}},
                        {name:'<%= userColNames[1]%>',index:'<%= userColNames[1]%>',
                            width:130,sortable:true,editable:true},
                        {name:'<%= userColNames[2]%>',index:'<%= userColNames[2]%>',
                            width:100,sortable:true,editable:true,editrules:{required:true},formoptions:{rowpos:3, elmprefix:'*'}},
                        {name:'<%= userColNames[3]%>',index:'<%= userColNames[3]%>',
                            width:180,sortable:true,editable:true,editrules:{email:true,required:true},formoptions:{rowpos:4, elmprefix:'*'}},
                        {name:'<%= userColNames[4]%>',index:'<%= userColNames[4]%>', 
                            width:100,sortable:true,editable:true},
                        {name:'<%= userColNames[5]%>',index:'<%= userColNames[5]%>', 
                            width:100,sortable:true,editable:true},
                    ],
                    pager: '#pager1',
                    rowNum:50,
                    height:'auto',
                    //rowList:[10,20,30],
                    loadonce: true,
                    sortname:'<%= userColNames[0]%>',
                    viewrecords: true,
                    editurl:'<%=request.getContextPath()%>/userJqGrid?q=1&action=addData&userCookie=<%= encodedCookie%>',
                    caption: 'User Grid',
                    ondblClickRow: function(rowid) {
                       $("#userList").jqGrid('editGridRow',rowid, userEditParam);
                        return;
                    }
                 });
$("#userList").jqGrid('navGrid',"#pager1",{add:true,edit:true,del:true});
$("#userList").jqGrid('gridResize', { minWidth: 450, minHeight: 150});

I tried adding following code to reload

$("#userList").jqGrid('setGridParam',{datatype:xml}).trigger('reloadGrid')

Can some one help?

Solution which worked for me

$("#userList").jqGrid('navGrid',"#pager1",{add:true,edit:true,del:true,refresh:true,

beforeRefresh: function() {
   $("#userList").jqGrid('setGridParam',{datatype:xml}).trigger('reloadGrid');
}},
{
  afterSubmit: processAddEdit,
       closeAfterAdd:true,
       closeAfterEdit:true
},{
  aftersubmit:processAddEdit,
       closeAfterAdd:true,
       closeAfterEdit:true
});

function processAddEdit() {
  $("#userList").jqGrid('setGridParam',{datatype:xml}).trigger('reloadGrid');
  return[true,'']; //no error
}

score 9 · Accepted Answer · edited May 23 '17 at 12:25

Correct is datatype:'xml' and not datatype:xml. So the code like

$("#userList").jqGrid('setGridParam', {datatype:'xml'})
              .trigger('reloadGrid', [{page:1}]);

should work. See here for description of additional parameters of reloadGrid.

UPDATED: From your comments I hope that I know where you have problem with the implementation. If I understand you correct now you want that "Reload Grid" button from the navigator bar reloads the grid from the server. To do so you should redefine the standard "Reload Grid" button with your implementation which do the code which I included in my answer (see above). So you should use refresh: false as the navGrid option to remove the standard "Reload Grid" button and then use navButtonAdd to add new button which looks exactly like the standard button and have your custom implementation or the onClickButton event:

var myGrid = $('#userList');
myGrid.jqGrid({
    datatype: 'xml',
    loadonce: true,
    pager: '#pager1',
    // ... other parameters which you use
});
myGrid.jqGrid('navGrid', '#pager1', {refresh: false});
myGrid.jqGrid(
    'navButtonAdd',
    '#pager1',
    {
        caption: "",
        buttonicon: "ui-icon-refresh",
        title: $.jgrid.nav.refreshtitle,
        onClickButton: function () {
            $(this).jqGrid('setGridParam', {datatype:'xml'});
            $(this).trigger('reloadGrid', [{page:1}]);
        }
    }
);

UPDATED 2: To force reloading of the grid after Add and Edit operations you can use afterSubmit event which will be called after the receiving successful server response, but before reloadGrid made by the jqGrid.

myGrid.jqGrid('navGrid', '#pager1', {refresh: false},
    { // Edit options
        afterSubmit: function () {
            $(this).jqGrid('setGridParam', {datatype:'xml'});
            return [true,'']; // no error
        }
    },
    { // Add options
        afterSubmit: function () {
            $(this).jqGrid('setGridParam', {datatype:'xml'});
            return [true,'',false]; // no error and no new rowid
        }
    },
    { // Delete options
        afterSubmit: function () {
            $(this).jqGrid('setGridParam', {datatype:'xml'});
            return [true,'']; // no error
        }
    }
);

I am not sure that reloading of the grid from the server is really required after Edit and Delete operations in general, but reloading after the Add operation could be needed if the server not returns the new id in the server response. You can set reloadAfterSubmit: false and return the new id in the server response. See this and this answers for details.

Thanks for the quick reply. We tried your solution but still the reload is not triggered. I have added the your code after $("#userList").jqGrid('gridResize', { minWidth: 450, minHeight: 150}); — Natraj, Aug 15 '11 at 17:30
@user862755: Sorry, but I don't understand why you place 'reloadGrid' after the 'gridResize'. The grid **has** already `datatype: 'xml'` at the definition. So the jqGrid will try to fill the grid by the corresponding Ajax call to `url`. If you just place call of `'reloadGrid'` during pending ajax request the reloading will be discarded. Could you first explain **why** and **when** you need to reload the grid? — Oleg, Aug 15 '11 at 17:59
I want to have a client side sorting and navigation hence I have set 'reloadOnce' as true. Plus I will be adding/modifying/deleting a record using the inbuilt functionality of the grid. Which I want to show it in the grid when they are saved in the database. — Natraj, Aug 16 '11 at 04:35
Sorry, my last comment might have given you wrong information. I already have the reload button functionality working. I want the data to be automatically refreshed in the grid after Add / Modify / Delete which is not happening at present. — Natraj, Aug 16 '11 at 10:37
Thanks for your solution it worked but we needed few modification. I have added the solution. Once more thanks oleg you just saved 2 ppls professional life's. — Natraj, Aug 19 '11 at 08:43
I used it and it worked but it seems the reload doesn't update the form's data which is mentioned in formIds, instead it just resent the data that it sent before. Please help here. — coding_idiot, Jul 12 '12 at 06:33
@XCoder: I am not sure that I understand you correct, but if you mean Add/Edit/Delete forms then the refreshing problem can be soled by usage of `recreateForm: true` option of the form editing. See [here](http://stackoverflow.com/a/6971820/315935), [here](http://stackoverflow.com/a/6128195/315935) etc. — Oleg, Jul 12 '12 at 11:14

score 1 · Answer 2 · edited Feb 12 '16 at 14:32

{
    // edit options
    zIndex: 100,
    url: '/User/Edit',
    closeOnEscape: true,
    closeAfterEdit: true,
    recreateForm: true,

    afterComplete: function (response) {
        if (response.responseText) {
            $("#userGrid").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
        }
    }
}

Worked for me :

Logic is we are reloading the grid again after the call returns to the JqGrid....try it works

Swati Pisal · Answer 3 · 2013-12-25T06:25:26.517

Thanks,

        $("#list1").jqGrid('navGrid', '#pager1', {refresh: false},
{ // Edit options
    afterSubmit: function () {$(this).jqGrid('setGridParam', {datatype:'xml'});
        return [true,'']; // no error
    }
},
{ // Add options
    afterSubmit: function () {
        $(this).jqGrid('setGridParam', {datatype:'xml'});
        return [true,'',false]; // no error and no new rowid
    }
},
{ // Delete options
    afterSubmit: function () {
        $(this).jqGrid('setGridParam', {datatype:'xml'});
        return [true,'']; // no error
    }
});  jQuery("#list1").jqGrid('navGrid','#pager1',{edit:true,add:true,del:true,view:false},{url: "product.php" },{closeAfterEdit: true,closeAfterAdd: true});
       jQuery("#list1").jqGrid('gridResize',{minWidth:350,maxWidth:850,minHeight:80, maxHeight:350}).trigger('reloadGrid');
       $('#list1').jqGrid('setGridParam', {datatype:'xml'});
       $('#list1').trigger('reloadGrid', [{page:1}]);

works for me.once again thanks a lot.

Reload of jqgrid not happening with loadonce:true

3 Answers3

Linked