jQgrid reload with new data

To reload a jQGrid with fresh data you need to set the data parameter on the grid and invoke reload on it.

jQuery("#promotionsGrid").setGridParam({ 'data': newData}).trigger("reloadGrid");

Here newData is a JavaScript array with which I need to re-load the grid. The important thing here is that I had to place this statement just before the grid initialization code even though the reload was expected on change event of a text box. Without that there was simply no effect on my grid!


Something like this :


initGrid = function() {
jQuery("#myGrid").setGridParam({ 'data':  newData }).trigger("reloadGrid");
jQuery("#myGrid").jqGrid({
datatype: "local",
data : gridData, ....

A few days later I ran into problem again with this code. I needed to implement search and reload the grid with searched data (which was a smaller subset of the previous data). The grid showed the searched data partially and appended rest of the data to it. It just didnt make sense. I tried to justify the result data by all means but its was totally nonsense. I even accused the data in the database of being corrupted. Later I realized that "reloadGrid" didn't work as I expected to. It did not refersh the jQgrid with the searched data. For getting this behavior right I had to clear the grid with data and then iterate thru' the array to add rows to the grid. Finally I could see proper data without ant anomalies. The working code is below:


jQuery("#myGrid").jqGrid("clearGridData", false).trigger("reloadGrid");
for ( var i = 0; i < myNewData.length; i++) {
jQuery("# myGrid ").jqGrid('addRowData', i + 1, myNewData [i]);
}
jQuery("#myGrid").jqGrid().trigger("reloadGrid");



....

This code can be added where ever you think its needs to be, ie based on your business logic.

Comments

  1. So many people viewing this page, it would be great if someone let me know if it was useful to them at all?

    ReplyDelete
  2. I'm using JSON object. I don't have data object currently I'm getting data by executing a URL in JSon format. How Can I consider myNewData to referesh the grid as per your code snippet.

    ReplyDelete
    Replies
    1. Can you please elaborate? May be with a code snippet if possible.

      Delete
  3. Thanks for the post. Helped me fix the problem I was facing

    ReplyDelete
  4. I'm trying to figure out how to reload the grid coming out of a modal window. I want it to reload only after someone clicks the x at the top right of the modal window (using jqgrid's native modal popup)

    ReplyDelete
    Replies
    1. As I understand you need to load fresh data in a grid of the parent window when a pop-up window initiated from the parent window is closed. You could add the above discussed code on the action of window close. In that case you could invoke the clear grid code on windon unload. Ex:

      jQuery(window).bind(
      "beforeunload",
      function() {

      //clear data from grid code here

      }
      )

      Hope this helps.

      Delete
  5. You are a LIFESAVER!!!!!!! Honestly I was stuck badly with a deadline, and all the other olutions on google offered the same thing, trigger the reload after assigning new datasource using setgridparam. This worked like magic. Thanks!!!

    ReplyDelete
    Replies
    1. I am so happy that this post helped you. I was in the same shoe and can understand your frustration. :)

      Delete
  6. The grid initialization code is not easy to understand for every person. Gatwick meet and greet parking
    meet and greet gatwick airport

    ReplyDelete

Post a Comment

Popular posts from this blog

Rich Client based UI technologies- A Comparison of Thick Client UI tools

OSS and BSS Systems