Dojo grid refresh and scroll position

Question

I have a Grid in Dojo,

var myGrid = new (declare([Grid, DijitRegistry]))({
    store: myStore, // this is a Observable(Memory())
    columns:[
        {field: "field1", label: "A", sortable: false},
        {field: "field2", label: "B", sortable: false},
        {field: "field3", label: "C", sortable: false},
        {field: "field4", label: "D", sortable: false},
        {field: "field5", label: "E", sortable: false}
    ],
    selectionMode: "single",
    cellNavigation: true,
    queryOptions: {
        sort:[{attribute: "field1", descending: true}]
    }
},
    myDomRef
);

At times I need to refresh the grid

myGrid.refresh();

This grid has a scrollbar at the right and I would like to retain the position of the scrollbar. But when I do a refresh, it scrolls back to the top.

How could I retain the scroll position?

score 4 · Accepted Answer · answered May 29 '15 at 01:18

4

If you're using OnDemandGrid, it supports a keepScrollPosition property, which you can either define on the grid instance to influence all refresh calls, or pass specifically when calling refresh (e.g. grid.refresh({ keepScrollPosition: true })).

answered May 29 '15 at 01:18

Ken Franqueiro

10,559
2
23
40

Thank you so much, where did you find this? I've been looking and couldn't find anything like this. – SoluableNonagon May 29 '15 at 14:04
It's listed in https://github.com/SitePen/dgrid/blob/v0.4.0/doc/components/core-components/OnDemandList-and-OnDemandGrid.md#property-summary (though admittedly that's apparently out of alphabetical order at the moment). – Ken Franqueiro May 29 '15 at 16:08

GoinOff · Answer 2 · 2015-05-28T18:09:45.997

Try grabbing the <div> object containing the grid and get the current scroll position:

var elmnt = document.getElementById("myDIV");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;

Save the position and then refresh the grid. After the refresh completes, restore the scroll positions:

var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft = x;
elmnt.scrollTop = y;

I think the scroll values will be on the <div> object in this case. If not, use inspect element in your web browser while holding the mouse pointer over the scroll bar you want. This should allow you to find the element that needs to have it's scroll saved and restored.

If the entire pages is refreshed in a CGI type environment, you could pass these values as URL parms to accomplish the same thing.

score 0 · Answer 3 · answered Mar 10 '20 at 16:02

As mentioned above, keepScrollPosition is the solution in case you are using OnDemandGrid.

In case you are using dgrid/Grid, keepScrollPosition is not supported.

This is how I solved the problem with the jumping scrollbars (this applies for both horizontal and vertical scrollbars): Grid has a method getScrollPosition(). By calling this method right before refresh(), you can save the positions of both scrollbars and jump back to them after refresh is done. Code should look something like this:

var scrollpos = myGrid.getScrollPosition();
myGrid.refresh();
myGrid.scrollTo(scrollpos);

One limitation in this solution is by old IE browsers, there is a noticeable back and forth jump.

Dojo grid refresh and scroll position

3 Answers3