Remove a row in a GWT Datagrid without scrolling to the top of the grid

Question

I have a datagrid that may display many rows per page. Let's say I am displayed 25 rows per page. The viewable area of the grid, however, is only 10 rows. ie There is only 400px for the entire grid and each row is 40px. So there is a scroll bar on the grid.

When I remove a single row in the grid, the grid automatically moves to the first row in the grid. If I have scrolled the bottom and deleted the last row, I am once again moved to the 1st row.

I have attempted several ways of combatting this, but I can't find a solution that works the way I want it to.

I've tried scrolling the row directly before or after the deleted row into view using the scrollIntoView() method.

I've tried figuring out how to determine which rows were in the visible range before the deletion, but the getVisibleRange() method is relevant to the page range, not the actual displayed range.

I've searched the web for this and seems like I'm the only one having this problem. What am I missing?

Answer 1

我有同样的问题，我发现如果dataGrid有keyboardSelectionPolicy =“BOUND_TO_SELECTION”，则会发生错误

Answer 2

If you use ListDataProvider to manage the DataGrid's data, then the DataGrid will not scroll when removing/adding items.

Here is a minimal example of removing grid rows without any scrolling (all contained within the entry point class):

Class for DataGrid Rows:

    private class Item{
        public String text;
        public int value;
        public Item(String text, int value){
            this.text = text;
            this.value = value;
        }
    }

Filling the DataGrid:

Here I use a private variable, data , to hold the items for the DataGrid. Note, that we must attach the dataGrid to data via the addDataDisplay method.

    ListDataProvider data;
    public void onModuleLoad() {
        // build grid:
        DataGrid dataGrid = new DataGrid();
        BuildColumns(dataGrid);
        dataGrid.setWidth("300px");
        dataGrid.setHeight("300px");
        // add items:
        data = new ListDataProvider();
        for(int i = 1; i < 25; i++){
            data.getList().add(new Item("Item " + i, i));
        }
        data.addDataDisplay(dataGrid);
        // display:
        RootPanel.get().add(dataGrid);
    }

Building the DataGrid:

This private method is used to build the columns for the DataGrid. Inside of the FieldUpdater for delCol , which is used to listen for click events for button columns, we remove the respective item from data , and call data.refresh() to update the DataGrid display.

    private void BuildColumns(DataGrid dataGrid){
       Column textCol = new Column(new SafeHtmlCell()) {
            @Override
            public SafeHtml getValue(Item object) {
                    SafeHtmlBuilder sb = new SafeHtmlBuilder();
                sb.appendEscaped(object.text);
                    return sb.toSafeHtml();
            }
        };
        dataGrid.addColumn(textCol);
        dataGrid.setColumnWidth(textCol, 75, Unit.PCT);

        Column deleteCol = new Column(new ButtonCell()) {
            @Override
            public String getValue(Item object) {
                return "Delete " + object.value;
            }
        };
        deleteCol.setFieldUpdater(new FieldUpdater() {

            @Override
            public void update(int index, Item object, String value) {
                data.getList().remove(index);
                data.refresh();
            }
        });
        dataGrid.addColumn(deleteCol);
    }

I put this code in a new GWT project and tested it. The DataGrid does not scroll when removing rows.