Maintaining scroll state in jqgrid

Question

How do I maintain the scroll state each time jqgrid is refreshed? I tried the following:

var scrollPosition = $("#"+grid_id).closest('.ui-jqgrid-bdiv').scrollTop();
$("#"+grid_id).trigger("reloadGrid", [{current:true}]);
$("#"+grid_id).closest('.ui-jqgrid-bdiv').scrollTop(scrollPosition);

But it doesn't work and the scroll bar moves back to the top after the grid is refreshed.

Also, $("#"+grid_id).closest('.ui-jqgrid-bdiv').scrollTop(); outputs 0 each time, though the grid has a scroll bar. Is the selector argument ($("#"+grid_id)) incorrect? What should be in there?

score 2 · Accepted Answer · answered Nov 06 '15 at 12:04

2

I suppose that you try to set scrollTop before the data are loaded in the grid. I would recommend you to save scrollTop to the custom option of the grid and to reset the position inside of loadComplete callback or jqGridAfterLoadComplete event.

To save the scroll top position you can use

var $grid = $("#"+grid_id),
    p = $grid.jqGrid("getGridParam");
p.scrollTopPosition = $grid.closest(".ui-jqgrid-bdiv").scrollTop();

To restore the position you can use

$("#"+grid_id).bind("jqGridAfterLoadComplete", function () {
    var $self = $(this), p = $self.jqGrid("getGridParam");

    if (p.scrollTopPosition !== undefined) {
        $self.closest(".ui-jqgrid-bdiv").scrollTop(p.scrollTopPosition);
        p.scrollTopPosition = undefined;
    }
});

answered Nov 06 '15 at 12:04

Oleg

220,925
34
403
798

I don't know why, but the function for `jqGridAfterLoadComplete` isn't being called. However grid is refreshing. – Suhail Gupta Nov 06 '15 at 12:51
1

Please include in **every your question**: What version of jqGrid you use and which fork of jqGrid you use (free jqGrid, Guriddo jqGrid JS or some old jqGrid in version <=4.7). In any way you can use `loadComplete` instead of `jqGridAfterLoadComplete` in case of usage old version of jqGrid. – Oleg Nov 06 '15 at 12:56
@SuhailGupta: Is the problem is solved or there are still some problems? If some problem exist, please provide the demo which can be used to reproduce the problems. – Oleg Nov 08 '15 at 11:58
It is still there, as `loadComplete` is not getting called. Here is the snippet snapshot: http://i.stack.imgur.com/VVdOE.png. Though, `gridComplete` is getting called. Is there something wrong with the code? – Suhail Gupta Nov 08 '15 at 12:46
I am using version `4.6.0` – Suhail Gupta Nov 08 '15 at 13:08
@SuhailGupta: Sorry, but I ask you two things: 1) which version of jqGrid and which fork you use? 2) provide the demo, which reproduces the problem. I don't understand now what kind of grid you use (TreeGrid, Grouping, grid with local data, grid with remote data abd so on). The `loadComplete` should be always called. If if will be not colled that your code should have some common serious problem. For example you could use `datatype` as function where you implemented the function in the wrong way. I can't just guess what the problem could be. I need the demo or more full code at least. – Oleg Nov 08 '15 at 13:08
@SuhailGupta: I see, that you really use `datatype` as function and you implemented it in the wrong way. Till now 100% of the code of implementation of `datatype` as function was wrong. [The old answer](http://stackoverflow.com/a/7455157/315935) contains an example of the correct implementation for very old version of jqGrid. After that one implemented many new features and the correct implementation should ne much loger. It's important to stress that the `datatype` function must trigger `jqGridLoadComplete` call `loadComplete` trigger `jqGridAfterLoadComplete` and do some other things. – Oleg Nov 08 '15 at 13:23
@SuhailGupta: I would strictly recommend you to replace the usage of `datatype` as function to simple `datatype: "json"`. You need just add some more options like `ajaxGridOptions: { contentType: "application/json" }` and to use `jsonReader` which corresponds the format of returned data. I don't see the test data, but I suppose that you need use something like `jsonReader: { total: "responseJSON.total", records: "responseJSON.records", page: "responseJSON.page", root: "responseJSON.rows"}` – Oleg Nov 08 '15 at 13:26
So I have replaced `datatype : function` with http://pastebin.com/zktVT0qe Have I done this correct? – Suhail Gupta Nov 08 '15 at 16:29
@SuhailGupta: The code have **two** `datatype`: once as `datatype: "json"` and one as function. It's wrong. The other part looks correct, but some options (like the usage of `JSON.stringify` inside of `serializeGridData`) depends on the server code. You don't used `JSON.stringify` before thus the usage of `serializeGridData` could be unneeded or wrong. You should remove `datatype` as function and test your code. – Oleg Nov 08 '15 at 16:59
Thank you for the amazing support. I will soon move over to new version of `jqGrid`. – Suhail Gupta Nov 09 '15 at 03:58
Often when the grid gets refreshed, rows along with its group gets duplicated. I have verified, that the data returned each time from the database contains distinct entries. What could be the reason for this? – Suhail Gupta Nov 09 '15 at 05:02
Do I need to simply set a unique value in `idPrefix` for each `jqGrid`? – Suhail Gupta Nov 09 '15 at 05:27
1

@SuhailGupta: You are welcome! I hope you knows [free jqGrid](https://github.com/free-jqgrid/jqGrid) - the fork of jqGrid which I develop. The features are described in [many wiki articles](https://github.com/free-jqgrid/jqGrid/wiki) and in readmes. About usage of `idPrefix`: it's really strictly required in your scenario. – Oleg Nov 09 '15 at 05:49
`delete p.scrollTopPosition;` instead of `p.scrollTopPosition = undefined;`? – Igor Nov 26 '15 at 21:34
@Igor: If one test for `if (p.scrollTopPosition !== undefined) {...}` then one can use `p.scrollTopPosition = undefined;` instead of `delete p.scrollTopPosition;` because assigning of `undefined` to a property works more quickly as deleting the property, but the results are almost the same. – Oleg Nov 27 '15 at 05:28

Maintaining scroll state in jqgrid

1 Answers1