CODEWITHSUNDEEP
javascriptjqueryjqgrid
Bhupendra
Bhupendra

Reputation: 1286

jqgrid not updating local data

I have jqgrid , which I call everytime whenever dropdown changes . But issue is that jqGrid only shows data loaded for first time , after that When I call same function with new data set { array of objects } , it does not updates itself. Below is the code :

  function loadGrid(colModel, data1) {
  var grid = $("#gridJQ");
  grid.jqGrid({
      datatype: "local",
      viewrecords: true,
      data: data1,
      height: "auto",
      rowNum: 5,
      autowidth: false, // set 'true' here
      rownumbers: true, // show row numbers
      rownumWidth: 25,
      colModel: colModel,
      pager: "#jqGridPager",
      height: "auto",
      caption: "Load jqGrid through Javascript Array",
  }).trigger("reloadGrid");  }

I checked values of col model and data1 , it changes everytime , but grid does not reflect changes .

Upvotes: 0

Views: 2063

Answers (1)

Oleg
Oleg

Reputation: 221997

You wrote "I call everytime whenever dropdown changes". I think there are exist common understanding problem what the code do. You have placed empty table <table id="gridJQ"></table> initially on the HTML page. The first call of loadGrid converts the empty table in relatively complex structure of dives and tables. You can examine the grid using Developer Tools to see how the grid looks like. After initial creating the grid one can sort the data, change the current page, change the width of columns and so on. All the actions changes mostly the body of the grid and not the outer parts with column headers.

Thus you have at least two main options (alternatives) to fix the problem:

  1. You have to destroy jqGrid and recreate it. You should include $("#gridJQ").jqGrid("GridUnload"); before the line var grid = $("#gridJQ"); in loadGrid.
  2. You can continue to use loadGrid function only for initial creating the grid. If you need to reload the data of the grid with updated data1 then you should call clearGridData fisrt, then use setGridParam to set new value of data parameter and finally use $("#gridJQ").trigger("reloadGrid") which refill the body (without changing the outer parts of the grid) of the grid based on new data. You can consider to use additional current: true option of reloadGrid which will allow too hold the current selection in the grid. See the answer for more information about the options of reloadGrid.

The first way will provide you the most easy way to fix the problem. The second way allows to create the mostly comfortable grid from the users point of view.

Upvotes: 1

Related Questions