GWT 2.4 Automatically scrolling DataGrid when selecting an item

Question

I am using GWT 2.4 new DataGrid in a project. I configured a DataGrid with a page size of 50.
The available screen is not large enough to display all the elements, and thus the vertical scroll bar is displayed (in fact, this is the main purpose of using the DataGrid in the first place).
I bound SingleSelectionModel to the DataGrid to be able to select elements.
So far this is wonderful.

However, I also have another widget that the user can interact with. Based on this user action, you should select an item from the DataGrid .
Sometimes the selected item is not in the visible area of ​​the screen, and the user must scroll down in the DataGrid to see it.
Is there a way to automatically or manually scroll down so that the selected item is visible?
I checked JavaDocs in a DataGrid and did not find a suitable method or function for this.

Answer 1

I don't know if this works, but you can try to get the row item to select and use the scrollIntoView method.

Code example:

dataGrid.getRowElement(INDEX_OF_SELECTED_ITEM).scrollIntoView(); 

Answer 2

The answer above works very well, although if the grid is wider than your window and has a horizontal scrollbar, it also scrolls to the right, which is very annoying. I was able to make it scroll down and stay scrolled left, getting the first cell in the selected row, and then scrolling it in the view.

 dataGrid.getRowElement(dataGrid.getVisibleItems().indexOf(object)).getCells().getItem(0).scrollIntoView(); 

Answer 3

You don’t have time to try, but the DataGrid implements the HasRows interface, and HasRows, among other things, has a setVisibleRange method. You just need to find out the line number of the element you want to focus on, and then set the visible range from this number n to n + 50. Thus, the DataGrid will reset to put this element at the top (or near the top, if it is in the last 50 elements list supporting DataGrid). Remember to redraw your DataGrid.

Have you already looked at this? If so, I would be surprised that this did not work.

Oh, and since this is one widget talking to another, you probably have some messaging setup and some message handlers, so when a user interacts with this second widget and selects an item, the message fires on the EventBus and the handler for This message captures the DataGrid in the lines described above. I think you will have to do this wiring yourself.

Answer 4

My solution is a little better:

 dataGrid.getRow(model).scrollIntoView(); 

Answer 5

I got an Out of bounds exception which does the above.

I decided that I was getting a ScrollPanel in a DataGrid and used .scrollToTop (), etc. on the ScrollPanel. However, to access the ScrollPanel in the DataGrid I had to use this comment: http://code.google.com/p/google-web-toolkit/issues/detail?id=6865

Answer 6

As noted by Kem, this annoys the effect of "scrollToRight" after scrollIntoView. After me, the decision by Who gives better behavior than the basic one, since, as a rule, the first columns in the table are more significant. I slightly improved his approach, which scrolls horizontally to the first column of the row that we want to see, by calculating the first visible column on the left before applying the scroll, and then scroll to it.

Last note: absolute left columns are checked against "51". This is the value that I found "experimentally" by looking at the JS values ​​in the browser developer tool, I think it depends on the style of the table, you may need to modify / calculate it.

Below code:

 public void scrollIntoView(T next) { int index = datagrid.getVisibleItems().indexOf(next); NodeList<TableCellElement> cells = datagrid.getRowElement(index).getCells(); int firstVisibleIndex = -1; for(int i=0; i<cells.getLength() && firstVisibleIndex<0;i++) if(UIObject.isVisible(cells.getItem(i)) && (cells.getItem(i).getAbsoluteLeft() > 51) && (cells.getItem(i).getAbsoluteTop() > 0)) firstVisibleIndex = i; cells.getItem(firstVisibleIndex>=0? firstVisibleIndex : 0).scrollIntoView(); }