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
}

Dowski

Answer 1

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.

Byssinosis

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}); – Dowski

@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? – Byssinosis

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. – Dowski

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. – Dowski

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. – Dowski

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. – Dryclean

@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, here etc. – Byssinosis

Answer 2

{
    // 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

Mien

Answer 3

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.

Coffman