2

How would I refresh a jqgrid based grid from outside of the grid itself? Within the code for a grid exists the option to call reloadGrid. However, I want to reload the grid after doing an ajax file upload, outside of the jqgrid code. How could I call reloadGrid in that context?

I realize I can completely reload the entire page with something like: location.reload(); but that reloads the whole lot and puts me back to the first page of results for a grid and kind of defeats the purpose of using ajax to upload a file in the first place.

Some code:

reloadGrid is called from within jqgrid as follows:

$("#thegrid").trigger("reloadGrid");

but it does nothing when called from within my ajaxupload:

        onComplete: function(file, response) {
            if (response == 'success') {
                        //location.reload();
                        $("#thegrid").trigger("reloadGrid");
                    }else if (response == 'error') {
                        alert("Doh!");
                    }

If I uncomment location.reload(), the page reloads but with the trigger uncommented (as in the above example) nothing happens at all. So how do I reload this grid?

Lothar
  • 3,409
  • 8
  • 43
  • 58

2 Answers2

4

Make a function of the code to load the jqgrid. And unload the Jqgrid first, and call the previous function:

$("#thegrid").GridUnload();
Loadthegrid();

I hope this helps.

bruno
  • 1,830
  • 2
  • 22
  • 36
  • Thx for the response though I don't quite follow. I assume GridUnload is a method available via jqGrid (yes?) but then this LoadtheGrid... that would just be the function of the code that I would create to load it in the first place? Am I understanding this correctly? – Lothar Dec 21 '10 at 07:57
  • GridUnload is indeed a method available via JqGrid. http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods&s[]=gridunload – bruno Dec 21 '10 at 08:00
  • And the Loadthegrid() is indeed your own function of the code that creates yourgrid in first place. You are understanding it correctly. – bruno Dec 21 '10 at 08:01
  • Thanks i can solve my problem quickly.. +1 for ans http://stackoverflow.com/questions/15859346/jqgrid-data-update-on-live-function-click-but-not-updating-data – Amit Apr 07 '13 at 08:31
3

I see no problem in using of $("#thegrid").trigger("reloadGrid") outside of jqGrid. Probably the problem is in relation between onComplete from the ajaxupload and $("#thegrid") at all.

For example you can define an external button on the same page as jqGrid with <table> element having id="thegrid" and use

$("#button").click(function() {
    if ($("#thegrid").length === 0) {
        alert("no element with id='thegrid' is found");
    }
    if ($.isFunction($("#thegrid").jqGrid) !== true) {
        alert("$('#thegrid') is not jqGrid");
    }
    var e = $("#thegrid").data("events");
    if (typeof(e) !== "undefined" && typeof(e.reloadGrid) !== "undefined") {
        $("#thegrid").trigger("reloadGrid");
    } else {
        alert("$('#thegrid') is not bound to 'reloadGrid' function");
    }
}

you will see the the code work without any alerts. You can include the same code inside of the onComplete handler of your ajaxupload.

To verify that 'reloadGrid' function work you can use loadComplete:

loadComplete: function() {
    alert("grid is loaded/reloaded");
}

UPDATED: Starting with jQuery 1.8 one should use $._data($("#thegrid")[0], "events"); instead of $("#thegrid").data("events") to get the list of all events of the grid.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • So I am reaching the trigger and loadComplete is firing, however I see no change in the grid. Could it be the fact that I have loadonce: true? Like, the grid is reloading but only with the local data it has on hand, which does not include the newly uploaded data? Hmmm... this seems likely, yes? – Lothar Dec 23 '10 at 23:52
  • @rg88: Yes, it must be so if you use `loadonce:true`. From your question you don't included almost nothing about the jaGrid definition. If you use `loadonce:true` and want reload data from the server you should reset `datatype` back to `'json'` (After the first load the `datatype` are changed to the `'local'`). See http://stackoverflow.com/questions/3441839/jqgrid-reload-not-working/3442156#3442156 for example. – Oleg Dec 24 '10 at 00:03
  • Thanks Oleg, do you know why setting loadonce:false would disable paging? with loadonce:true I get 3 pages of data (20 items per page) but with loadonce:false I only get one page of 20 items (though if I choose to display more items per page I can see them). – Lothar Dec 24 '10 at 00:46
  • @rg88: If you don't use `loadonce:false` your server application should send back **only one page** of data back: the page which corresponds `page` input parameter, sorting parameters `sidx` and the sort direction `sord`. So you have to implement at least sorting and paging of data on the server side. – Oleg Dec 24 '10 at 08:26