0

I am using jqGrid in my ASP.NET MVC application. The jqGrid is in partial page and loaded from View page using jQuery Ajax. The grid is loaded fine during initial load. Now I would like to refresh the data in the jqGrid from database every 20 seconds i.e. new or updated data in the database should be shown in the jqGrid every 20 seconds. I have used JavaScript setInterval to set the 20 seconds interval which calls the JavaScript function to refresh the new data in jqGrid. I am able to fetch the new data from database in the controller from jQuery Ajax and using the below code in success function to refresh the data in jqGrid.

var grid = jQuery('#JQGridName'); grid.jqGrid('setGridParam', { datatype: 'json', data: jsonData, rowNum: 100 });

How would I get the new data from controller to View Page which will be used in above code snippet to reload the jqGrid ? Please note my jqGrid is in Partial Page and above code snippet is called from main View Page.

Melvin
  • 925
  • 1
  • 10
  • 22
Ranjan Kaw
  • 1
  • 4
  • I was able to get the JSON data from the partial page html using JavaScript substring and index of function. Now the data in the jqgrid is refreshed fine but now the jqGrid events like onSelectRow, loadComplete are not working as expected after $('#JQGridName').trigger("reloadGrid"). These events are working fine as expected during initial load. Kindly help me with the solutions ? Thanks. – Ranjan Kaw Dec 21 '21 at 18:29
  • In order to help, please publish your code related to jqGrid. It is good to know which version of jqGrid is used. – Tony Tomov Dec 22 '21 at 08:50
  • // Below ajax call will reload the jqGrid. The jqGrid is in the partial page. The Multiselect option of jqGrid is true. $.ajax({url: "/ControllerName/ActionMethod",datatype: " ",data: $.param({ param1: array, param2: ids}, true),contentType: "application/html; charset=utf-8",type: "GET", success: function (result) { //The result parameter contains the partial page HTML. var index1 = result.indexOf("data:"); var index2 = result.indexOf("}]"); result = result.substring(index1 + 6, index2 + 2); //This will return the JSON array from the partial page HTML var jsonData = JSON.parse(result); – Ranjan Kaw Dec 22 '21 at 13:25
  • var grid = jQuery('#JQGrid'); grid.jqGrid('clearGridData'); grid.jqGrid('setGridParam',{datatype: 'local',data: jsonData, //jsonData is the new data to be reloaded in jqGrid.rowNum:3500});grid.trigger("reloadGrid");},}); // Get the rows details of selected checkbox. var selectedRows = $("#JQGrid2").jqGrid('getGridParam', 'selarrrow'); – Ranjan Kaw Dec 22 '21 at 13:26
  • I am using the above code to reload the jqGrid and then I would like to get the details of the selected rows. The issue I am facing is that after grid is reloaded with new data, I am not able to get the details of selected rows. Only during initial load I am able to get the selected rows but not after reload. Also the code inside jqGrid event onSelectRow is not called after grid reload. Could you please help with the solution ? Thanks – Ranjan Kaw Dec 22 '21 at 13:27
  • Below is the jqGrid events in partial page onSelectRow: function () { var totalAmount = 0; selectedRows = jQuery('#JQGrid').jqGrid('getGridParam', 'selarrrow'); var $grid = $('#JQGrid'); $.each(selectedRows, function () { var rowData = $("#JQGrid").getRowData(this); totalAmount += rowData["amount"] * 1; }); $grid.jqGrid('footerData', 'set', { amount: totalAmount }); }, – Ranjan Kaw Dec 22 '21 at 13:29
  • @TonyTomov : I have provided the code components. The issue I am facing is that after jqGrid reload with new data the onSelectRow event is not firing and also $("#JQGrid2").jqGrid('getGridParam', 'selarrrow') is not returning any rows. These events work fine on initial grid load. – Ranjan Kaw Dec 22 '21 at 13:39
  • I am using 4.4.4 version of jqGrid @TonyTomov – Ranjan Kaw Dec 22 '21 at 13:58
  • Please provide enough code so others can better understand or reproduce the problem. – Community Dec 29 '21 at 04:34

0 Answers0