Question

When scrolling down on a DataGrid page using the keyboard, the last visible item on the visible range, if it’s partially obscured, does not become fully visible when it gets selected. The same seems to happen when selecting the row with the mouse. The row becomes visible enough to fully show the Number column value as can be seen in the screenshot, but the image stays partially obscured. The same thing happens without any footer being visible, so the footer obscuring the row does not seem to be the issue here. Also, the behaviour is identical when selecting the first visible item – only the Number value becomes fully visible.

This is kind of a minor issue but since the DataGrid in my case is mostly browsed using the keyboard, it really has quite a big impact on usability. So – Any ideas what could be done to ensure full row visibility when it is selected?

Many thanks in advance.

Answer 1

Extending DataGrid and overriding setKeyboardSelected(int, boolean, boolean) as follows seems to do the trick, but is of course a hack and not an optimal solution at all.

@Override
protected void setKeyboardSelected(int index, boolean selected, boolean stealFocus) {
    if (KeyboardSelectionPolicy.DISABLED == getKeyboardSelectionPolicy() || !isRowWithinBounds(index) || getColumnCount() == 0) {
        return;
    }
    super.setKeyboardSelected(index, selected, stealFocus);
    TableRowElement tr = getRowElement(index);
    tr.scrollIntoView();
}