Unable to reload the JGrid with the new value

Question

I am using JQuery and JGrid with java. I have a grid

     <script>
     jQuery("#table1").jqGrid({
     .............. 
     ............ 
     });

I have another grid

      function abc {
      var id = firstgridid;
      if(number>0) {
      // working but with the old value
      $("#table2").jqGrid('setGridParam', { url: 'JGridA?action=abc&hidden='+id,page:1}).trigger("reloadGrid");

      JQuery("#table2").jqGrid({
      url:'JGridServlet?action=comm&hidden='+id,
      .............
      });
      }
      </script>

In the second grid, I am passing the value of the id selected in the first grid as the url. Each time I select a row from the first grid, after i click on the button "show details", function abc() will execute, the id should be passed and the corresponding rows(id information) should be displayed in the second grid.

I am able to get the id of the selected row, and able to reload the second grid, but the query related to second grid is taking the id that is first selected. But i need the id that is currently selected.

Please help.......

http://stackoverflow.com/questions/9014922/jqgrid-reload-doesnt-work http://stackoverflow.com/questions/2901587/jquery-jqgrid-trigger-reloadgrid — , Mar 05 '13 at 07:29

score 1 · Accepted Answer · edited May 23 '17 at 12:33

One can see at least two important problem in the code of abc function.

The first one is the usage of setGridParam before JQuery("#table2").jqGrid({...}); which creates the grid. You can't use setGridParam on the <table>. The call like JQuery("#table2").jqGrid({...}); converts empty <table id="table2"></table> element in relatively complex structure of dives and tables which will be used to display the grid. So you should first create the grid (covert empty <table> to the grid) and only after it you can use setGridParam or .trigger("reloadGrid") to refresh grid content.

The second problem is the usage of JQuery("#table2").jqGrid({...}); inside of function abc which you call multiple times. As I described before the call JQuery("#table2").jqGrid({...}); coverts empty <table> to the grid. So one can make such call only once. For the second loading of the grid you should just use setGridParam and .trigger("reloadGrid") to refresh grid content.

UPDATED: If you want implement master/details scenario you can do following:

// create master grid
$("#table1").jqGrid({
    datatype: "json",
    url: "masterGridUrl",
    onSelectRow: function (rowid, state) {
        if (state) { // if not the same row was previously selected
            // refresh detail grid
            $("#table2").jqGrid("setGridParam", { datatype: "json"})
                .trigger("reloadGrid", [{page: 1}]);
        }
    },
    ... // another options
});

// create details grid without filling the data initially
$("#table2").jqGrid({
    datatype: "json", // we use "local" instead of "json" to have to request to the server
    url: "JGridA",
    postData: {
        action: "abc",
        hidden: function () {
            // id of currently selected row
            return $("#table1").jqGrid("getGridParam", "selrow");
        }
    },
    ... // other options
});

It will create master grid "#table1" and empty detail grid "#table2". After selection of row in the master grid the body of detail grid will be reloaded. Detail grid send to the server two additional parameters: one static parameter action=abc and another parameter hidden which value is the rowid of the master grid.

If you use navGrid in the master grid you can add beforeRefresh callback (see the answer for the code example). In the beforeRefresh callback of master grid you can call clearGridData for the detail grid. So if you would refresh the master grid the detail grid will be empty till the row in the master grid will be selected.

ok...thank you for the response....I will use setGridParam inside the grid. But how do I check for the second loading of the grid. — vani, Mar 06 '13 at 05:36
@vani: You are welcome! I don't understand what you want to do at the *second* loading. If you need cont the number of loads you can just use variable defined in outer scope. You can increment it inside of `loadComplete` callback. — Oleg, Mar 06 '13 at 06:24
Actually based on the value selected in the first grid, i have to populate the second grid. So in the url of Second grid, i am passing the id of the first grid. The second grid is populated for the first time. But second time, when a record is selected in the first grid, the second grid gets refreshed only when I click on the "reload grid". So once a record is selected in the first grid, I want to programatically load the second grid with the current value selected in the first grid. — vani, Mar 06 '13 at 06:33
@vani: The scenario is far from the original question which you asked. I don't see any problem in the scenario which you describes. See **UPDATED** part of my answer. — Oleg, Mar 06 '13 at 08:27

Unable to reload the JGrid with the new value

1 Answers1