CODEWITHSUNDEEP
javascriptjqgridreload
AbtPst
AbtPst

Reputation: 8008

How to periodically reload jQGrid

I am trying to reload my grid periodically. I came across the solution:

var grid = $("#list"),
    intervalId = setInterval(
    function() {
        grid.trigger("reloadGrid",[{current:true}]);
    },
    300000); // 300 sec === 5 min

but i'm not sure where to put this piece of code. does it go inside loadComplete ? I am already using 

jQuery("#list").trigger("reloadGrid", [{current:true}]);

like this 

jQuery("#list").jqGrid({...

    jQuery("#list").trigger("reloadGrid", [{current:true}]);

...});

i dont understand where to access the 

intervalId

please help,. thanks

Oleg, this is what i tried as per your answer:

    // above this line is the grid code including nav grid

    jQuery("#refresh_list").click(function(){
        jQuery("#list").setGridParam({datatype: 'json'});
      //  jQuery("#list").trigger("reloadGrid");
      setInterval(function() {
            $('#list').trigger("reloadGrid", [{current:true}]);
        alert("hello");}, 2000);
            });
    });   //This is the end of the document.ready function

am I placing the setinterval function correctly ? is it supposed to be inside the grid or outside ? is it supposed to be inside the document.ready or outside ? surprisingly, the alert pops up as you would expect ! but the grid does not reload. i know because i am making changes to the database and they are not reflected in the grid. when i click the refresh button then it displays current data as expected. I want it to reload periodically and always have the most recent data from the database.

by the way these are the gridoptions i am using 

    pager: "#pager",        //Identifying the navigation bar
  rowNum: 500,          // how many rows to display on page 1
  rowList: [500,1000, 2000, 3000,4000], //values for the dropdown which specifies how many rows to show 
  sortorder: "desc", //the order of sorting by default
  viewrecords: true, // displays total number of rows
  gridview: true,   // the full grid body will be placed on the page as one operation
  autoencode: true,
  height:400, //height of the grid
  ignoreCase:true,// case insensitive search
  multiselect:true, // checkboxes before each row
  multiboxonly: true,
  loadonce:true, //for client side sorting, searching and pagination
  caption:"This is me", // caption for the grid header

please help

Upvotes: 0

Views: 3773

Answers (2)

AbtPst
AbtPst

Reputation: 8008

I figured it out this way :

  window.setTimeout( refreshGrid, 8000);
 function refreshGrid()
 {
    jQuery("#refresh_list").click();
    window.setTimeout(refreshGrid, 8000);

  }

Upvotes: 0

Oleg
Oleg

Reputation: 221997

I think it's just small misunderstanding. If you want reload the grid every 5 min you should execute the code

grid.trigger("reloadGrid",[{current:true}]);

every 5 min. The standard JavaScipt function setInterval help to do this. If you execute

setInterval(function() {
    grid.trigger("reloadGrid",[{current:true}]);
}, 300000); // 300 sec === 5 min

then the callback function with grid.trigger("reloadGrid",[{current:true}]); will be already executed every 5 min. So the grid will be reloaded like you want.

Saving the result of setInterval in a variable like in your original code

var grid = $("#list"),
    intervalId = setInterval(function() {
        grid.trigger("reloadGrid",[{current:true}]);
    }, 300000); // 300 sec === 5 min

is helpful if you need to stop automatic reloading of the grid. For example if the user start editing of one row you can stop reloading by

clearInterval(intervalId);

after the user submit the changes of discard it you can execute the same setInterval one more time to start automatic reloading. So the variable intervalId is required only if you want to stop the periodical execution of the callback function used in setInterval.

Upvotes: 1

Related Questions