Refresh Grid with new data

[mikep]

I'm trying to refresh data in grid based on search criteria, but don't have correct syntax. Can you provide the correct syntax based on this jsfiddle example? Also, can you point me to any code examples where this type of refresh done?

https://jsfiddle.net/mikepmcg/vz2a6dc7/6/



        function refresh() {
            var data = [
                            { rank: 4, company: 'BP', revenues: '267600.0', profits: '22341.0' },
                            { rank: 5, company: 'General Motors', revenues: '192604.0', profits: '-10567.0' },
                            { rank: 6, company: 'Chevron', revenues: '189481.0', profits: '14099.0' },
            ];

            objPrj.dataModel = {
                data: data,
            };
            gridPrj.refreshDataAndView()

        }

[paramvir]

Correct syntax is

Code: [Select]

  $gridPrj.pqGrid('option', 'dataModel.data', data).pqGrid('refreshDataAndView')

where $gridPrj is jquery reference to the grid.

https://jsfiddle.net/Lct8hnzs/

[mikep]

Great, thank you. How does that code line change if the colModel has changed as well?

https://jsfiddle.net/wjzte21b/

[paramvir]

Code: [Select]

$gridPrj.pqGrid('refreshCM', columns).pqGrid('option', 'dataModel.data', data).pqGrid('refreshDataAndView')


[mikep]

Thank you.
To add additional data to the grid, I am appending the current data model with the additional data, and then calling refreshDataAndView  as you show below. How can I reapply the SortModel so my appended data is sorted properly?

[paramvir]

refreshDataAndView is to be used when whole data is changed.

Please use addRow() method to append or insert new rows to existing rows.

https://paramquery.com/pro/api#method-addRow

and call sort() method wihout any parameters to refresh sorting.

https://paramquery.com/pro/api#method-sort

[mikep]

Thank you.

Can you tell me why this example isn't adding row to grid and sorting? Also, is using data.push(newRow) an acceptable way to add to grid? It worked in this example, but not in my actual project.

https://jsfiddle.net/mikepmcg/4gnjqhma/11/

[paramvir]

yours' parameters of addRow method call and selector of grid is incorrect.

correct one:

Code: [Select]

$("#grid_json").pqGrid("addRow", {newRow: newrow});

         
$("#grid_json").pqGrid("sort", {
          sorter: [{
              dataIndx: 'rank',
              dir: "up"
          }]
});

https://jsfiddle.net/0k2jhw6n/

[mikep]

Thank you.

In your previous example you used $gridPrj, to do the"refreshDataAndView". Many examples I've seen and used don't use the "$" (jquery reference), and some do.

For example, in this link: https://jsfiddle.net/uqrb7oy6/5/
 
$gridPrj = $("#grid_json").pqGrid(objPrj) -- is used to do the "refreshDataAndView"
gridPrj = pq.grid("#grid_json", objPrj) -- is used to do the "getChanges"

-Can the same grid be reference both ways? I need to do different actions with the grid, but can't seem to use both references on the same grid.
-What's the best way to reference the grid when doing this two actions?

[paramvir]

Grid can be referenced in multiple ways, please check Special variables topic in the tutorial section.

https://paramquery.com/pro/tutorial#topic-special-vars

Any way can be used depending upon preference or convenience.

[mikep]

Thank you that's good news. Can you tell me, then, why don't the two actions (using the two buttons in my example) work at the same time in my example? https://jsfiddle.net/uqrb7oy6/5/
I have to comment out the one grid declaration so that the other grid will work, and vice-versa. Can you update this so both work?

[paramvir]

Please check this: https://jsfiddle.net/w3cL1jdf/ for using grid refrerence

and let me know if still have doubts.

[mikep]

Thank you. Why did you no longer use the jQuery grid object? Can both objects be used? Is there a benefit of one vs the other, or can they both do the exact same functions, just with different syntax.

[paramvir]

Both have same end result. "Any way can be used depending upon preference or convenience" as mentioned earlier.

Methods calls via jQuery grid object are usually preferred by jQuery developers.

Direct calls via grid instance are library / framework agnostic and can be used in jQuery, plain js or frameworks like Angular, Reactjs and Vuejs.

Difference between them is mentioned here: https://paramquery.com/pro/tutorial#topic-methods