Databound ListGrid + grouping + setShowRecordComponents creates extra whitespace

Isomorphic replied

30 Jul 2015, 15:55
We see the "jumping" problem you refer to and are looking into it, but the blank space at the bottom is a normal consequence of the fact that the virtual scrolling subsystem has been activated (due to the use of record components). See http://www.smartclient.com/smartgwt/...crolling%28%29.

You should not be able to scroll the last row completely out of view, though. When scrolled to the bottom extrema, the last row should still be visible at the top.
Leave a comment:

Blama replied

30 Jul 2015, 05:58

Hi Isomorphic,

sorry, I meant "Development Console logs" all the time I wrote "Development Mode logs".

But I was able to create an easy BuiltInDS+Simplicity-based testcase, showing all the symptoms mentioned (using SNAPSHOT_v10.1d_2015-07-29):

Not able to scroll down with mousewheel or scrollbar-dragging or Page-Down key (always jumps to old position again)
Able to scroll down with arrow keys
Able to scroll down a bit with mousewheel or scrollbar-dragging after scrolling before with arrow keys
Empty page in the end (see screenshot)
Reproducible in FF26, GC44, IE11

BuiltInDS.java

Code:

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.types.AutoFitWidthApproach;
import com.smartgwt.client.types.GroupStartOpen;
import com.smartgwt.client.types.RecordComponentPoolingMode;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS implements EntryPoint {
	private VLayout vL;
	private TestGrid tG1;
	private HLayout hL;

	public void onModuleLoad() {
		setListGridDefaultApperance();
		KeyIdentifier debugKey = new KeyIdentifier();
		debugKey.setCtrlKey(true);
		debugKey.setKeyName("D");

		Page.registerKey(debugKey, new PageKeyHandler() {
			public void execute(String keyName) {
				SC.showConsole();
			}
		});

		vL = new VLayout(5);
		vL.setPadding(20);
		vL.setWidth100();
		vL.setHeight100();
		tG1 = new TestGrid("employees");

		hL = new HLayout(5);
		hL.setHeight(40);
		IButton reloadBtn = new IButton("Reload");
		reloadBtn.setWidth(150);
		reloadBtn.addClickHandler(new ClickHandler() {
			@Override
			public void onClick(ClickEvent event) {
				vL.removeChild(tG1);
				tG1.markForDestroy();
				tG1 = new TestGrid("employees");
				vL.addMember(tG1, 0);
			}
		});

		hL.addMembers(reloadBtn);
		vL.addMembers(tG1, hL);
		vL.draw();
	}

	private class TestGrid extends ListGrid {
		public TestGrid(String mode) {
			super();
			setShowFilterEditor(true);
			setDataSource(DataSource.get(mode));
			setAutoFetchData(false);
			setAutoFetchData(false);
			setShowFilterEditor(false);
			setShowRecordComponents(true);
			setShowRecordComponentsByCell(true);
			setRecordComponentPoolingMode(RecordComponentPoolingMode.RECYCLE);
			setPoolComponentsPerColumn(true);
			setRecordComponentHeight(22);
			setCanGroupBy(false);
			setCanReorderFields(true);
			setGroupStartOpen(GroupStartOpen.ALL);
			setSortByGroupFirst(true);
			fetchData();
		}
	}
	
	private static void setListGridDefaultApperance() {
		ListGrid lg = new ListGrid() {
			{
				setAutoFitFieldsFillViewport(true);
				setShowClippedValuesOnHover(true);
				setAutoFitWidthApproach(AutoFitWidthApproach.VALUE);
				setCanMultiGroup(false);
				setCanEdit(false);
				setShowFilterEditor(false);
				setCanFreezeFields(false);
				setCanReorderFields(false);
				setCellHeight(30);
				setHeaderHeight(35);
				setFixedRecordHeights(true);
				setGroupIconSize(30);
				setGroupLeadingIndent(0);
				setHoverDelay(500);
			}
		};
		ListGrid.setDefaultProperties(lg);
	}
}

BuiltInDS.html

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>BuiltInDS</title>
<script>
	var isomorphicDir = "builtinds/sc/";
</script>
<script type="text/javascript" src="builtinds/sc/modules/ISC_Core.js"></script>
<script type="text/javascript" src="builtinds/sc/modules/ISC_Foundation.js"></script>
<script type="text/javascript" src="builtinds/sc/modules/ISC_Containers.js"></script>
<script type="text/javascript" src="builtinds/sc/modules/ISC_Grids.js"></script>
<script type="text/javascript" src="builtinds/sc/modules/ISC_Forms.js"></script>
<script type="text/javascript" src="builtinds/sc/modules/ISC_DataBinding.js"></script>
<script type="text/javascript" src="builtinds/sc/skins/Simplicity/load_skin.js"></script>
<script type="text/javascript" src="builtinds/builtinds.nocache.js"></script>
</head>
<body>
	<script src="builtinds/sc/DataSourceLoader?dataSource=supplyItem,animals,employees"></script>
	<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'
		style="position: absolute; width: 0; height: 0; border: 0"></iframe>
</body>
</html>

BuiltInDS.gwt.xml

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.5.1//EN"
   "http://google-web-toolkit.googlecode.com/svn/tags/2.5.1/distro-source/core/src/gwt-module.dtd">
<module rename-to="builtinds">
	<inherits name="com.google.gwt.user.User" />
	<inherits name="com.smartgwt.tools.SmartGwtTools" />
	<inherits name="com.smartgwtee.SmartGwtEENoScript" />
	<inherits name="com.smartgwtee.tools.Tools" />
	<inherits name="com.smartclient.theme.simplicity.SimplicityResources" />
	
    <!-- Uncomment lines below for GWT Super Dev Mode Support:
       - both lines needed for GWT < 2.6, only the first line needed for GWT < 2.7
       - see http://www.smartclient.com/docs/release/a/b/c/go.html#group..debugging -->
    <!-- <add-linker name="xsiframe" />                                             -->
    <!-- <set-configuration-property name="devModeRedirectEnabled" value="true" />  -->

    <!-- Uncomment lines below for GWT "stack emulation" with file/line number info -->
    <!-- <set-property               name="compiler.stackMode"  value="emulated" /> -->
    <!-- <set-configuration-property name="compiler.emulatedStack.recordFileNames"
                                     value="true" />                                -->
    <!-- <set-configuration-property name="compiler.emulatedStack.recordLineNumbers"
                                     value="true" />                                -->

	<entry-point class='com.smartgwt.sample.client.BuiltInDS' />
</module>

Best regards
Blama

Attached Files

Last edited by Blama; 30 Jul 2015, 06:13. Reason: Added SmartGWT version, removed unnecessary groupBy

Leave a comment:

Isomorphic replied

29 Jul 2015, 11:11
Yes, the fix is already in 10.1d.

We don't really follow the description of what's wrong with scrolling. It seems very unlikely that one mode of scrolling would have issues while another would not, so please test at least one other machine.

And we'll definitely need a test case for a weird issue like this - possibly a screenshot as well, unless you can clarify your comments on scrolling.
Leave a comment:
Blama replied

29 Jul 2015, 10:33
Hi Isomorphic,

I have an error in this area again. Most likely the same one. v10.0p_2015-07-15/PowerEdition Deployment is working fine. Today's SNAPSHOT_v10.1d_2015-07-29/PowerEdition Deployment shows the following effect (possibly older versions as well):

The grid seems to have more rows than it actually has (the scrollbar allows approx for one extra page of blank entries).
When I scroll the (grouped) ListGrid with the mousewheel or by dragging the scrollbar, the ListGrid jumps to the top again. It works with scrolling with the arrow keys.
Once I reach the empty area with the arrow keys, scrolling with the mousewheel or by dragging the scrollbar is working again (like the old report!).
It does not happen with v10.0p_2015-07-15 because this does not display the "empty page" in the first place.
I'm using a custom Simplicity based skin. It happens at least in GC44, FF26, IE11.

It would be great if this could be analysed with Development Mode logs only, because I'm pretty sure it will be difficult to reproduce. A quick test with normal Simplicity and a plain ListGrid does not show the effect.
My ListGrid is configured as follows:

Code:

setAutoFetchData(false); setShowFilterEditor(false); setShowRecordComponents(true); setShowRecordComponentsByCell(true); setRecordComponentPoolingMode(RecordComponentPoolingMode.RECYCLE); setPoolComponentsPerColumn(true); setRecordComponentHeight(22); setCanGroupBy(false); setCanReorderFields(true); setGroupStartOpen(GroupStartOpen.ALL); setSortByGroupFirst(true);

I can provide a screencast video (suggested in this thread) if needed and all Development Mode logs.

Most important question (and easiest possible solution) is:
Did the fix from #14 make it into 5.1d as well (if 5.1d was already started at that time, 24th Jul 2014)?

Best regards
Blama
Leave a comment:
Blama replied

25 Jul 2014, 09:33
Hi Isomorphic,

I just tried to reproduce the case where I had different behaviour in different browsers and was not able to do so. I don't know what happened or what I think I saw :(

One more question regarding the automatic enabling of VirtualScrolling:

Originally posted by the updated docs, http://www.smartclient.com/smartgwtee-latest/javadoc/com/smartgwt/client/widgets/grid/ListGrid.html#getVirtualScrolling%28%29

virtualScrolling is switched on automatically when fixedRecordHeights is false and also when using the recordComponents subsystem, as recordComponents expand the rows that contain them.

Is this still true when I use ListGrid.setRecordComponentHeight()? The size should be known then, shouldn't it?
Or the other way around: Is it somehow possible not to have VirtualScrolling when using showRecordComponents(true)?

My ListGrid configuration is:
setShowRecordComponents(true);

setShowRecordComponentsByCell(true);

setRecordComponentPoolingMode(RecordComponentPoolingMode.RECYCLE);

setPoolComponentsPerColumn(true);

setFixedRecordHeights(true)

setCellHeight(30)

setHeaderHeight(35)

setRecordComponentHeight(22)

setCanGroupBy(true)

setDataSource(...)

setGroupByField("...")

Can (or should) this configuration lead to a ListGrid without VirtualScrolling?

Thank you & Best regards,
Blama
Leave a comment:
beckyo replied

24 Jul 2014, 16:35
That's great, thank you.
Leave a comment:
Isomorphic replied

24 Jul 2014, 15:02
It turned out there actually was a logic bug in the case where a grid was grouped and databound which was causing 'showAllRecords' to be essentially ignored.
We've fixed this issue in both 4.1p (SC 9.1p) and 5.0d (SC 10.0d) branches - you can pick up the change in the next nightly build.

Regards
Isomorphic Software
Leave a comment:
Isomorphic replied

24 Jul 2014, 12:52
Beckyo: we'll double check why the grouping should have an impact here and respond shortly on that.

Blama: We've tweaked the docs (in mainline) to read "and also" rather than just "and" to make this non-ambiguous.

Reusing recordComponents via the recycle/update flags is definitely a good idea. This allows the grid to create only as many components as is actually needed, and simply reuse them for cells as they render.
It'll have a significant performance impact if you're talking about a grid with a large number of rows where otherwise you'd be creating and drawing new components for every row (or every cell) the user ever sees as they scroll through a grid.

If you have fixed height recordComponents - yes we'd recommend you setRecordComponentHeight() so the grid knows how tall rows will render.

We'll take a look at the standalone test case when you have it

Regards
Isomorphic Software
Leave a comment:
beckyo replied

24 Jul 2014, 12:16
This dialog is really great, thanks guys. I'm still tripped up on that first test case, though. The scrolling works beautifully with only record components, and with only grouping, but when the two are combined that's when I see the extra whitespace. Is virtual scrolling behaving differently for that specific combination?
Leave a comment:
Blama replied

24 Jul 2014, 12:04
Hi Isomorphic,

I read the "and when using..." as logical and - too much time in front of a computer I guess.

I'm using Simple Buttons as my RecordComponent's, which always have the same height. So far I did not use setRecordComponentHeight().
Two questions:
Is it generally speaking good if I can provide a situation where VirtualScrolling is not needed (use setRecordComponentHeight() in my case)?

So far I'm only using createRecordComponent(). From the docs I get that I definitely should use updateRecordComponent() and RecordComponentPoolingMode=recycle as well. Correct?

Besides this, from my side only the different behaviour between the browsers is open. I'll try to create a standalone testcase for this.

Thanks for the insight in the inner workings of ListGrid-scrolling and the explanation on fast mouse- vs. slow keyboard-scrolling. I'm happy to have a framework that encapsulates me from all this.

Best regards,
Blama
Leave a comment:
Isomorphic replied

24 Jul 2014, 11:42
It's enabled when fixedRecordHeights is false or recordComponents are enabled (snip from the JSDoc you linked to):

...virtualScrolling is switched on automatically when fixedRecordHeights is false and when using the recordComponents subsystem, as recordComponents expand the rows that contain them.

In our testing, using the test case attached at the top of this thread, we didn't see a difference between browsers, so we're not sure what the explanation for that could be.
The difference between mouse scrolling and keyboard scrolling is to do with how the draw-ahead is calculated. When drag-scrolling the scrollbar thumb, you are "quick scrolling", so we suppress redrawing the rows you skate over and use the "quick-draw-ahead-ratio".
When keyboard scrolling the normal drawAheadRatio is used as you're essentially stepping through every record, so it makes sense for us to draw a larger number of records below the viewport when we render out the slice of records. This is all to minimize user-impact of incremental rendering, but could cause minor differences in the appearance of things like the scrollbar thumb size.
However you should still be seeing the whitespace below the last record, regardless of how you scrolled there.

If you think we're missing something which you're seeing, please show us a way to reproduce your particular case and we'll take a look

Regards
Isomorphic Software
Leave a comment:
Blama replied

24 Jul 2014, 11:31
Hello Isomorphic,

thanks for the explanation.
In my case I use setShowRecordComponents(true). But I do not set setFixedRecordHeights, which then should default to true. According to getVirtualScrolling() VirtualScrolling is disabled then, isn't it?

Also, this does not explain differences between Firefox and Chrome/IE (or scrolling with the mouse vs scrolling with the keyboard).

If you think I might be correct here, I can try to build a sample for my configuration as well.

Best regards,
Blama
Leave a comment:
beckyo replied

24 Jul 2014, 11:09
But in the first set of examples (first image attachment) I have showAllRecords(true) for each grid, so it shouldn't have to do that guesswork - the record count is known before rendering. Is there something I can do to turn off virtual scrolling? In this case I know ahead of time exactly how many rows there are.

Last edited by beckyo; 24 Jul 2014, 11:13.
Leave a comment:
Isomorphic replied

24 Jul 2014, 11:04
This is actually a standard behavior which happens whenever listGrid.virtualScrolling is enabled.

For performance reasons, ListGrids support rendering only a subset of the rows actually loaded in the grid (see listGrid.showAllRecords and listGrid.drawAheadRatio / listGrid.quickDrawAheadRatio).
ListGrids also support having variable height rows -- rows which render at different heights to fit their content.

When both of these features are active at the same time, we have to go into 'virtual scrolling' mode.

What this means is that we don't actually know exactly what the scroll-height of the listGrid would be if all rows were rendered (since we don't know the rendered height of undrawn rows), so we have logic which estimates the required space to render out every row based on the number of rows and the average row heights and uses this to size the scrollbar thumb, and determine what "slice" of data to draw in the viewport.
As the user scrolls, they can bring more rows into view so we have to re-render. At this point there's some tricky logic to account for the fact that rows may actually render taller or shorter than we guessed *but* the user expects to see the subsequent rows - we can't have the content of the grid suddenly appear to jump around. Without going into details of exactly how this is achieved the "page of whitespace" below the last row is expected - it's required to allow us to handle things consistently.

Having recordComponents visible, plus incremental rendering (showAllRecords:false) gets us into this state as the recordComponents mean that row heights are unpredictable.

Regards
Isomorphic Software

Last edited by Isomorphic; 24 Jul 2014, 11:05. Reason: fixed typo
Leave a comment:
beckyo replied

24 Jul 2014, 08:43
Most definitely. I'll follow up by the end of the day.
Leave a comment:

Previous 1 2 3 template Next

Announcement

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment: