Search code examples
javascriptjqueryjqgrid

How to add row to a jqGrid in next page without reloading the grid?


Currently, I have tried like below:

var rows=$("#mygrid").getGridParam("records"); ('#myggrid').addRowData(rows+1, mydata, 'last');

The grid's default row count is set to 5. Also, it has server-side pagination implemented. Now, I have a use case to add the rows when the user posts a request to the server. I have added the row using the above code. But the problem is that the rows get added indefinitely to the grid in the SAME page. So, the page becomes very long with all the rows. I need to add the row to the next page WITHOUT reloading the grid since reloading would make ajax call every time which would, in turn, make a database read operation.


Solution

  • To be exact, it's impossible to do what you request. The reason is very easy to understand if you take in consideration, that the displayed page contains rows (5 rows in your case) based on the current sort order. So the added row could be not displayed at all on the page or other rows could be displayed after inserting a new row (one row will be not displayed and another one will be displayed instead - the row will be inserted before the rows displayed on the current page). Alternatively the inserted row could be displayed on the page, but somewhere in the middle of the page. Only the server has access to full set of rows and so you have to reload the page from the server if you need to display the exact content of the selected page.