0

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 .

Bhupendra
  • 1,196
  • 16
  • 39

1 Answers1

1

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.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • thanks for your update . I have followed second approach , as it would be efficient rather than creating grid each time . I wrote below code in my reloadGrid function : grid.jqGrid("clearGridData", true); grid.jqGrid('setGridParam',{data:data}).trigger("reloadGrid", [{current: true}] ); But selection does not remain , if i select second row before reload of Grid , it clears all selection , also is it possible to be on same page as well as before refresh , in that case what attribute to be given for page value – Bhupendra Aug 26 '15 at 08:57
  • @Bhupendra: You are welcome! You should verify whether you fill the grid correctly. Especially it's important to know whether you fill correctly `id` property of every item of `data` or whether you use `key: true` in the column of the grid which contains unique data. You should write which fork of jqGrid and in which version you use. You should remove the second `height: "auto",` from the options and to add some additional options `gridview: true, autoencode: true`. You don't need to use `.trigger("reloadGrid")` in `loadGrid`, only in your `reloadGrid` function. – Oleg Aug 26 '15 at 09:04
  • thanks for answer , when I select row by default it selects entire row , I need to select a particular cell of row and on click of that cell get the value, cell selection possible ? – Bhupendra Aug 26 '15 at 09:39
  • @Bhupendra: You are welcome! jqGrid have only selection of rows. Selection of cells is the part of cell editing only. So I'm not sure what you mean. You didn't post `colModel` and I don't know even which version of jqGrid you use. – Oleg Aug 26 '15 at 09:42
  • when I click a cell , entire row gets highlighted to yellow , but can I do only cell selection , that is only that particular cell gets highlighted and retrieve its value on click – Bhupendra Aug 26 '15 at 09:44
  • @Bhupendra: What you mean under "retrieve its value on click"? There are exist `getCell` method which you can use to get the value from any cell of the grid. Moreover you can implement `onCellSelect` callback or `jqGridCellSelect` jQuery event which can be used to do some action if the user clicks on a cell of the grid. I don't full understand which scenario you mean. Moreover you can use `cellEdit: true` option to implement cell selection, but you should use it only if you don't make other editing. The option `cellEdit: true` make other changes in jqGrid behaviors. – Oleg Aug 26 '15 at 09:52
  • actually I have implemented oncellSelect, I am able to retrieve value , but entire row gets highlighted , when I select a particular cell . So if I select two cells on same row , entire row is highlighted , I only want to highlight one cell at a time instead of entire row – Bhupendra Aug 26 '15 at 09:59
  • @Bhupendra: Do you tried to add `cellEdit: true` option like I suggested you before? Alternatively you can use `e.target` of `e` parameter of `onCellSelect` callback to access to the DOM of `` which the user clicked. You can add `ui-state-highlight` class for example to the cell to simulate cell selection. You should of cause deselect previously selected cell so you should save the information about previously selection cell in separate variable/property/option. I see many possibilities. – Oleg Aug 26 '15 at 10:01