how to keep current page in jqgrid on clicking edit button

Question

I have a jqgrid with five columns along with edit column, there is an Edit button in each row of Edit column.

Suppose I have some records in jqgrid, and I am on page 4 of jqgrid. On clicking edit button for some row on page 4, an action method is called which performs some function and reloads the page.

The jqgrid is also reloaded and comes to page 1 from page 4, how to persist that same page even after reload.

I am not able to find answer for this exact scenario on internet.

Please Help !!

Thanks in advance.

$("#productvariationListGrid").jqgrid(
   {

       url: '../Product/GetAllProductType',
       sortname: 'Name',
       sortorder: 'asc',
       colNames: ['Id', 'Product Name', 'Product Type Name', 'Description', 'Edit'],
       colModel: [
           { name: 'Id', key: true, hidden: true },
           {
               name: 'ProductName',  index: 'ProductName', searchoptions: { sopt: ['cn'] }, resizable: false
           },
           {
               name: 'productTypeName',  index: 'productTypeName', searchoptions: { sopt: ['cn'] }, resizable: false
           },
            {
                name: 'Description',  index: 'Description', searchoptions: { sopt: ['cn'] }, resizable: false
            },
            {
                name: 'Edit',  index: 'Edit',  sortable: false, search: false,
                formatter: actionFormatterEdit

            }
       ],
       rowNum: 5,
       autowidth: true,
       width: '100%'
   });


    function actionFormatterEdit(cellvalue, options, rowObject) {
        return '<a href="../Product/EditProductType?ProductTypeId=' + options.rowId + '" class="editIcon"></a>';

Consider posting the form using ajax so you stay on the same page, otherwise pass a value indicating the current page to the controller POST method — , Sep 01 '15 at 11:01

score 1 · Accepted Answer · edited May 23 '17 at 12:29

Your current implementation of editing opens just new HTML page. In the way you loss all information about the state of the grid. You should consider to use Ajax to communicate with the server. It's the way of the standard editing implemented in jqGrid.

Alternatively you can save the current page inside of localStorage of the web browser or in the cookie. To get the current page of the grid you can use $("#productvariationListGrid").jqgrid("getGridParam", "page"). In the code executed before the grid is created you should try to get the page number from the localStorage (or from the cookie). One can use page: oldPage option of jqGrid to create the grid and to load oldPage instead of the first page.

The answer, this one and the oldest one shows how to persist the page number and many other information about the state of the grid. You can try the demo for example, to change the page, to select a row, change the width of columns or the order of columns and so on. After that you can reload the page by pressing F5. You will see that the reloaded page looks exactly like before reloading, because it saves and then restore the state inside of localStorage. You can implement simplified implementation based on the same idea.

how to keep current page in jqgrid on clicking edit button

1 Answers1