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. Nitu SaksenaSeptember 17, 2012 at 11:41 PM

    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. Rakhi is KekaJanuary 19, 2013 at 5:54 AM

    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. Nitu SaksenaApril 11, 2013 at 4:42 AM

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

      Delete
  3. INterCoderMarch 8, 2013 at 11:02 AM

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

    ReplyDelete
  4. UnknownApril 5, 2013 at 2:14 PM

    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. Nitu SaksenaApril 11, 2013 at 2:31 AM

      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. meeyamzOctober 24, 2013 at 12:09 AM

    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. Nitu SaksenaOctober 24, 2013 at 1:27 AM

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

      Delete
  6. UnknownJanuary 27, 2017 at 4:20 AM

    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

Introduction to jQgrid

Introduction Why waste time in developing lists /customizing Liferay OOB search container to display data in tabular format. On top of that more often then not we end up coding for sorting of columns, pagination and formatting some data depending on their values. Trirand has come up with a jQuery plugin called jQgrid. jQgrid supports all of such ease. It provides a nice-looking grid with built-in features such as sorting, editing, search, drill-down, tree lists, and more. It is based upon jQuery and integrates well with Liferay.  The grid is dual-licensed under both the GPL and MIT licenses  (just like
Read more

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

Rich Client v/s Thin Client Software developers face many difficult decisions when building new applications, not the least of which is graphical user interface. There are various graphical user interface technologies used, but broadly they can be classified as Rich Client User interfaces and the thin client or web based user interfaces. To understand them better let us look at the history of rich and thin clients. While the Rich client GUI applications would support high quality end-user experience with features such a drag-and-drop, perspectives, customization, high speed local processing; it has had a traditional disadvantage of high deployment and upgrade costs. It was becoming highly difficult and costly to deploy and upgrade these applications. Then came the thin clients or the Web based applications. Thin clients solved many of the deployment and upgrade problems, but that was not without a cost, the cost was in terms of functionality and capability. Thin clients, based on...
Read more