Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ag-grid: "How to scroll to last known position"?

Ag-Grid offers the method ensureIndexVisible(index, 'middle'); With that method it is easy to scroll to an choosen index. But how do I get the last known index of the scrolling position from the user?

An example: We have a table with 600 rows. The user is scrolling around - an update happens. The table changed a bit. Now I have the behaviour that the table is scrolling to the top. The user has now to scroll again to his last position.

I would like to redirect the user to hist last scrolling position: ensureIndexVidisble(USERS_LAST_KNOWN_SCROLLING_POSITION, 'middle');

In addition to information: the user does not work in the table. So I cannot save his last click on a row.

How can I achieve this?

like image 226
Paul Avatar asked Apr 17 '19 08:04

Paul


People also ask

What is deltaRowDataMode?

The deltaRowDataMode is designed to allow ag-Grid work with immutable stores such as Redux. In an immutable store, a new list of rowData is created if any row within it is added, removed or updated.

How do I get horizontal scroll position?

You can use $('html, body'). scrollLeft() to get the horizontal scrolling position if you use jQuery.

How do I get rid of the horizontal scroll bar on Ag grid?

gridOptions. api. sizeColumnsToFit(); This will set the columns width and hence remove horizontal scrolling.


1 Answers

In typical AG fashion they hide this vital piece of information in their docs:

Method 3 - Delta Row Data The delta method is using the row data method above but having the property deltaRowDataMode=true.

When deltaRowDataMode is on, the grid will compare the new row data with the current row data and create a transaction object for you. The grid then executes the change as an update transaction, keeping all of the grids selections, filters etc.

Use this if you want to manage the data outside of the grid (eg in a Redux store) and then let the grid work out what changes are needed to keep the grid's version of the data up to date.

https://www.ag-grid.com/javascript-grid-data-update/#bulk-updating

This in my opinion should be a setting you always use if your rows have a unique ID (I hope they do, it's good practice to do it). SetdeltaRowDataMode to true and use getRowNodeId to specify a unique id for the row.

After that your grid will update much more efficiently (only updating what is needed) and it won't jump to the top when it does as it's not re-creating every row and cell in the grid on an update.

For good measure you could also add the suppressScrollOnNewData option, though I'm not sure if it's needed if you do the above.

like image 134
Dominic Avatar answered Sep 23 '22 02:09

Dominic