GWT filler rows in a CellTable

Question

I currently have a CellTable which I expanded with a filter/paging/sorting. I am working on adding more features too.

One things that bugs me though, is when you set the limit for a page to be for example 10. If an object doesn't have 10 rows and only has 5 and you switch between them then the table will jump up and down if positioned in the center.

Is there an elegant way, that when the pageSize is set to 10, then if there are less than 10 rows in a table, empty rows will be added?

The ways I have tried so far effect my filtering/sorting/paging, which I do not want.

EDIT 1:

final AsyncDataProvider<Row> provider = new AsyncDataProvider<Row>() {

      @Override
      protected void onRangeChanged(HasData<Row> display) {

        int start = display.getVisibleRange().getStart();
        int end = start + display.getVisibleRange().getLength();
        end = end >= rows.getFilterList().size() ? rows.getFilterList().size() : end;
        List<Row> sub = rows.getFilterList().subList(start, end);
        System.out.println("Checking if extra rows needed: " +
                                           table.getVisibleItems().size());

               for(int i = table.getVisibleItems().size(); i<10; i++){
                     System.out.println("ADDED EMPTY ROW");
                     sub.add(new Row());
               }

         updateRowData(start, sub);
     }
};

enrybo · Accepted Answer · 2013-07-12T16:15:38.063

I had the same problem. I solved it by adding null rows. Basically, you need to override onRangeChange(HasData<T> display) in your DataProvider to add null to the list representing the range asked for. You add enough null to fill the range you want.

@Override
protected void onRangeChanged(HasData<T> display){

    Range range = display.getVisibleRange();

    List<T> listOfObjects = getRange(range);

    for(int i=listOfObject.size(); i<range.getLength(); i++){
        listOfObjects.add(null);
    }

    updateRowData(range.getStart(), listofObjects);

}

In the above code getRange() returns a list containing the objects that are requested (within the range)

You'll also have to add some CSS to give a height to rows. If you don't specify the height then the rows will be very small so they won't pad the whole table.

It's disappointing that GWT doesn't have support for this type of padding. This way was the best one that I found but unfortunately when your row heights differ within a table it makes everything harder.

Paging

With the solution above you'll need to have a custom Pager if you want paging. You can extend your AsyncDataProvider with method like getVisibleRowCount() this will return how many objects in the current sublist are actually real data (not null). Then you can give a reference of the AsyncDataProvider to the Pager and override the createText() method:

@Override
protected String createText(){

    return getPageStart() + " - " + dataProvider.getVisibileRowCount() + " of "
                 + dataProvider.getTotalRowCount(); 

}

hey I added some code that shows the way I have it done currently. But this effects the paging, showing 1-10 also it effects my filter class. I was thinking maybe there was some way to go around it without effecting the data within the table? — Sheogora, Apr 22 '13 at 15:56
The way I suggested will not affect paging. All you do is add nulls when the range isn't "fulfilled. You'll need to make sure your columns know what to do with nulls (display empty cell). — enrybo, Apr 22 '13 at 16:00
i tried your way and the pager will still say 1-10 even though there are 5 rows with actual data. Simple pager is hooked up to the cell table, so how ever many rows there are it will count them? — Sheogora, Apr 23 '13 at 08:26
Sorry, you're right about that. I forgot that I extended `AsynDataProvider` as well as `SimplePager` to make it work. I added the paging part in the answer. — enrybo, Apr 23 '13 at 11:37
Thank you! This helped me immensely. Its a pity GWT is so limited that any extra small change requires Custom classes :) — Sheogora, Apr 23 '13 at 13:29

GWT filler rows in a CellTable

1 Answers1