Problem scrolling in a listGrid with paging (empty area at bottom)

[G-leonardi]

Hi all, I have a problem with scrollbar of the ListGrid when I bind it with a DataSource (client-only, but the problem appears also with a RestDataSource) and I enable paging and fixedRecordHeights(false).

I see that, in this case, the scrollbar scrolls much more that actual records in the listGrid leaving unused white space at the grid bottom.
If i disable paging or I set fixedRecordHeights the scrollbar scrolls right (no white space).

final ListGrid listGrid = new ListGrid();
listGrid.setDataSource(dataSource);
// avoid drawing all rows at startup triggers the problem
listGrid.setDrawAllMaxCells(20);
listGrid.setAutoFetchData(true);

Attach my testcase of the problem using a ClientOnly DataSource and use setDrawAllMaxCells(20) to apply the paging in my case.

Attach also an image that shows the problem.

I use:
- SmartGwt 3.1
[SmartClient Version: v8.3_2012-11-20/LGPL Development Only (built 2012-11-20)]
- Firefox ESR 10.0.11

[Isomorphic]

This is by design. When using incremental rendering with variable height records, there is no way to know how many records would appear in the last viewport, so this blank space must exist at the end.

To avoid, either set fixed heights for all records, or turn off incremental rendering; the latter only works for small datasets.

[nqutteineh]

Any workaround?

We have a similar issue here with a gap appearing at the bottom of the ListGrid.

However, this happens only when the browser window is resized. When loading for the first time in a maximized browser window, the records fit exactly in the grid with no issues.

We are using a datasource bound ListGrid that loads data lazily. This ListGrid has an additional column containing a custom widget with some buttons.

We've tried fixing the height of the custom widget to 22px. At the same time, we've setted the height of the grid's cells to 22px using setCellHeight(), but unfortunately no success in solving our gap issue!

The only thing that works is getting all the data at once using setShowAllRecords(true) instead of lazy loading. However, this is not a option for us as we have a considerable amount of data and loading all data at once would take very long time.

We'd be very grateful for any support on this issue!

Here's a snippet of the code used:

ListGrid attributes:

listGrid.setHeight("80%");
listGrid.setWidth100();
listGrid.setCanEdit(false);
listGrid.setAutoFetchData(true);
listGrid.setDrawAheadRatio(2.5f);
listGrid.setShowFilterEditor(true);
listGrid.setWrapCells(false);
listGrid.setShowRecordComponents(true);
listGrid.setShowRecordComponentsByCell(true);
listGrid.setRecordComponentPoolingMode(RecordComponentPoolingMode.RECYCLE);
listGrid.setEnforceVClipping(true);
listGrid.setCellHeight(22);

Additional field that will contain the custom widget:

ListGridField runProcField = new ListGridField("buttonsCol", "Buttons", 100);
runProcField.setAlign(Alignment.CENTER);
runProcField.setCellAlign(Alignment.CENTER);
runProcField.setCanFilter(false);

Overriden createRecordComponent method ofthe ListGrid:

@Override
protected Canvas createRecordComponent(final ListGridRecord record, Integer colNum)
{
	if (getFieldName(colNum).equals("buttonsCol"))
	{
		return new CustomWidget();
	}
	return super.createRecordComponent(record, colNum);
}

Custom Widget:

private final class CustomWidget extends HLayout
{
	private Button button1;
	private Button button2;

	public CustomWidget()
	{
		setHeight(22);
		setWidth100();
		setPadding(1);
		setAlign(Alignment.CENTER);

		button1 = new Button("Button 1");
		button1.setWidth(22);
		button1.setHeight(18);
		button1.setMargin(1);
		button1.setShowRollOver(true);
		button1.setLayoutAlign(Alignment.CENTER);  
		button1.addClickHandler(new ClickHandler ()
		{
			@Override
			public void onClick(ClickEvent event)
			{
				// some code
			}
		});
		
		button2 = new Button("Button 2");
		button2.setWidth(22);
		button2.setHeight(18);
		button2.setMargin(1);
		button2.setShowRollOver(true);
		button2.setLayoutAlign(Alignment.CENTER);  
		button2.addClickHandler(new ClickHandler ()
		{
			@Override
			public void onClick(ClickEvent event)
			{
				// some code
			}
		});			

		addMember(button1);
		addMember(button2);
	}
}

Browser: Chrome Version 25.0.1364.152 m
SmartGwt 3.1p Pro Version, Nightly built 2013-03-01

[Isomorphic]

See ListGrid.showRecordComponents (which is basically an overview of the recordComponents subsystem) - note the mention of virtual scrolling at the end and the indication to set recordComponentHeight if all recordComponents are fixed height and you want to avoid virtual scrolling.