Having difficulty refreshing the JGrid with updated content

Question

Having difficulty refreshing the JGrid with updated content

I am currently utilizing JQuery and JGrid in conjunction with Java. I have a grid set up

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

Additionally, I have another grid

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

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

Within the second grid, I am passing the selected id value from the first grid as part of the URL. Whenever I choose a row from the first grid and then click on the "show details" button, the function abc() will be executed. The id should be passed along for display of corresponding rows (with id information) in the second grid.

Though I can access the id of the selected row and trigger a reload of the second grid successfully, the query pertaining to the second grid is still using the initially selected id. However, my requirement is to use the presently selected id.

Your assistance would be greatly appreciated.......

java javascript jqgrid

Answer 1

Answer №1

In the code of the abc function, there are at least two significant issues that can be identified.

The first problem arises from the improper usage of setGridParam before initializing the grid with JQuery("#table2").jqGrid({...});. This sequence results in an attempt to apply setGridParam on the empty <table>, which is not valid. The correct approach is to first create the grid (convert the empty <table> into a functional grid) and then proceed to use setGridParam or .trigger("reloadGrid") for updating the grid content.

The second issue stems from calling JQuery("#table2").jqGrid({...}); multiple times within the abc function. As mentioned earlier, this call converts the empty <table> into a grid. Hence, it should only be made once. Subsequent updates to the grid should be handled by using setGridParam and .trigger("reloadGrid") instead.

UPDATED: For implementing a master/details scenario, you can follow these steps:

// 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}]);
        }
    },
    ... // other 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 () {
            
            return $("#table1").jqGrid("getGridParam", "selrow");
        }
    },
    ... // other options
});

This setup creates a master grid "#table1" and an empty detail grid "#table2". When a row is selected in the master grid, the detail grid will be reloaded. Additional parameters sent to the server include a static parameter action=abc and the value of the rowid from the master grid.

If navGrid is used in the master grid, a beforeRefresh callback can be added to clear the data in the detail grid. This ensures that the detail grid remains empty until a row is selected in the master grid.

Answer 2

In the code of the abc function, there are at least two significant issues that can be identified.

The first problem arises from the improper usage of setGridParam before initializing the grid with JQuery("#table2").jqGrid({...});. This sequence results in an attempt to apply setGridParam on the empty <table>, which is not valid. The correct approach is to first create the grid (convert the empty <table> into a functional grid) and then proceed to use setGridParam or .trigger("reloadGrid") for updating the grid content.

The second issue stems from calling JQuery("#table2").jqGrid({...}); multiple times within the abc function. As mentioned earlier, this call converts the empty <table> into a grid. Hence, it should only be made once. Subsequent updates to the grid should be handled by using setGridParam and .trigger("reloadGrid") instead.

UPDATED: For implementing a master/details scenario, you can follow these steps:

// 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}]);
        }
    },
    ... // other 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 () {
            
            return $("#table1").jqGrid("getGridParam", "selrow");
        }
    },
    ... // other options
});

This setup creates a master grid "#table1" and an empty detail grid "#table2". When a row is selected in the master grid, the detail grid will be reloaded. Additional parameters sent to the server include a static parameter action=abc and the value of the rowid from the master grid.

If navGrid is used in the master grid, a beforeRefresh callback can be added to clear the data in the detail grid. This ensures that the detail grid remains empty until a row is selected in the master grid.

Having difficulty refreshing the JGrid with updated content

Answer №1

Similar questions

Issue with undefined bindingContext.$data in IE9 on knockout binding handler

An effective way to prevent right-clicking on iframes across all websites

Exception: The method or property 'activePackage' does not exist in the given context

The issue I'm facing is that the Bootstrap 4 modal is not visible when I

Creating an Angular form that adapts to changing input values

How to automatically close a Bootstrap modal after submitting a form

Identify and emphasize fields that contain identical, non-empty values

"Exploring the possibilities of Ajax in conjunction with Sol

Guide to integrating promises into the HTML5 Geolocation API

Tips for assigning a Custom Formik Component's value to the Formik value

What is the reason behind taps in TypeScript only registering the first tap event?

Using the datepicker class in an input field causes issues with the functionality of the bootstrap datepicker, specifically the autoclose, endDate, and startDate properties do not function as

Investigating Jquery Flip Card Issues

The value of This.state is found to be zero while being used inside the

An Illustrative Example of Inheritance in Javascript?

Attempting to successfully integrate the Prerender SPA Plugin with Vue.js CLI 3

What's the issue with reducers receiving a Function instead of an Object in Redux?

Java code for Quicksort with Random Pivot not producing expected results

updating a div with URL redirection instead of global redirect

Preventing Duplicate Entries in Angular Data Posting