Databound ListGrid + grouping + setShowRecordComponents creates extra whitespace

[Blama]

Well, you wrote it happens with Chrome and IE for you as well. Could you retest? Could you also try if there is a difference between mouse- and keyboard-scrolling for you?
That might valuable information for Isomorphic.

Best regards,
Blama

[beckyo]

Thank you so much for the additional info. I use FF almost exclusively and it's good to know this doesn't happen with other browsers.

[Blama]

Hello,

I can confirm that behaviour as well in my app (v9.1p_2014-07-23, using modified Simplicity skin), but only in FF26 (dev and compiled mode). Chrome 36 and IE10 work as expected.

From the DS Console I know the framework knows it has all data:

[
    {
        affectedRows:0, 
        data:[
            {
               ...
            }
       ], 
        endRow:23, 
        invalidateCache:false, 
        isDSResponse:true, 
        operationType:"fetch", 
        queueStatus:0, 
        startRow:0, 
        status:0, 
        totalRows:23
    }
]

In FF, the scrollbar starts at the same size as Chrome's, when scrolling down, at some point (when it "sees" that end of the list??) it becomes smaller (=framework thinks it has more data to show).
When you scroll more then you can scroll to exactly to far that the last pixelrow of the ListGrid's data becomes hidden.
When you scroll up again, at some point (when you start seeing the topmost row??), the scrollbar goes back to the size it was in the beginning.

Important: This does only happen when you scroll with the mouse. Scrolling with the keyboard does not trigger the effect. Once I reached the end of the ListGrid with the keyboard, I can also use the mouse without triggering the error.
Calling invalidateCache() resets the ListGrid, so that I can trigger the error again with the mouse.

Does this help?

Best regards,
Blama

[beckyo]

Any luck with this one?

[beckyo]

SmartGWT 4.1p - 2014-06-19
FireFox 26, Chrome 35, IE 11

A ListGrid backed by a DataSource that combines grouping with show record components = true produces extra whitespace at the bottom of the list when the list is longer than its container.

The example below creates four list grids.

The first grid does not use a DS and combines both grouping and setShowRecordComponents = true. It renders fine (scroll to the bottom).

The second is a DS backed grid with just grouping - it looks fine.

The third is a DS backed grid with just show record components set to true - it's also OK.

The fourth is a DB backed grid with both grouping and show record components - scroll down and you'll see the extra whitespace.

Also note that if setShowAllRecords is not set to true only the second grid (the DS bound grid with grouping) renders without the extra whitespace.

Screenshots attached.

Standalone test case:

package standalone.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.widgets.grid.HeaderSpan;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.grid.ListGridRecord;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.fields.DataSourceTextField;
import com.smartgwt.client.types.GroupStartOpen;


public class TestCase implements EntryPoint 
{
	private static final String DSFIELD_GROUP = "group";
	private static final String DSFIELD_NAME = "name";
	
	public void onModuleLoad() 
	{
		ListGrid gridNonDSBoth = getNonDSGrid();
		ListGrid gridDSGroup = getDSGridGroupingOnly();
		ListGrid gridDSRecordComp = getDSGridRecordCompOnly();
		ListGrid gridDSBoth = getDSGridBoth();
		HLayout container = new HLayout();
		
		container.setMargin(20);
		container.setWidth(1200);
		container.setHeight(400);
		container.setMembersMargin(40);
		
		container.setMembers(gridNonDSBoth, gridDSGroup, gridDSRecordComp, gridDSBoth);
		
		container.draw();
	}
	
	
	private ListGrid getNonDSGrid()
	{
	    ListGrid grid = new ListGrid();
		
	    grid.setHeaderHeight(40);
	    grid.setShowAllRecords(true);
	    grid.setGroupByField(DSFIELD_GROUP);
	    grid.setGroupStartOpen(GroupStartOpen.ALL);
	    grid.setShowRecordComponents(true);
	    grid.setHeaderSpans(new HeaderSpan("Non DS + Group + Record Comp", new String[] { DSFIELD_GROUP, DSFIELD_NAME } ));
	    
	    grid.setFields(new ListGridField(DSFIELD_GROUP), new ListGridField(DSFIELD_NAME));
	    grid.setRecords(getRecords());
		
	     return grid;
	  }
	
	
	private ListGrid getDSGridGroupingOnly()
	{
	    ListGrid grid = new ListGrid();
		
	    grid.setHeaderHeight(40);
	    grid.setShowAllRecords(true);
	    grid.setGroupByField(DSFIELD_GROUP);
	    grid.setGroupStartOpen(GroupStartOpen.ALL);
	     grid.setHeaderSpans(new HeaderSpan("DS + Group", new String[] { DSFIELD_GROUP, DSFIELD_NAME } ));
		
	    grid.setAutoFetchData(true);
	    grid.setDataSource(TestDS.getInstance());
	    	
	    return grid;
	}
	
	
	private ListGrid getDSGridRecordCompOnly()
	{
	    ListGrid grid = new ListGrid();
	    	
	    grid.setHeaderHeight(40);
	    grid.setShowAllRecords(true);
	    grid.setShowRecordComponents(true);
	    grid.setHeaderSpans(new HeaderSpan("DS + Record Comp", new String[] { DSFIELD_GROUP, DSFIELD_NAME } ));
	    	
	    grid.setAutoFetchData(true);
	    grid.setDataSource(TestDS.getInstance());
	    	
	    return grid;
	}
	
	
	private ListGrid getDSGridBoth()
	{
		 ListGrid grid = new ListGrid();
		
		 grid.setHeaderHeight(40);
		grid.setShowAllRecords(true);
		 grid.setGroupByField(DSFIELD_GROUP);
		grid.setGroupStartOpen(GroupStartOpen.ALL);
		grid.setShowRecordComponents(true);
	        grid.setHeaderSpans(new HeaderSpan("DS + Group + Record Comp", new String[] { DSFIELD_GROUP, DSFIELD_NAME } ));
		
		grid.setAutoFetchData(true);
		grid.setDataSource(TestDS.getInstance());
		
	        return grid;
	}
	
	
	
	 protected static ListGridRecord[] getRecords()
	{
		ListGridRecord[] records = new ListGridRecord[44];
		 int recordCounter = 0;
		
		for (int groupCounter = 0; groupCounter < 4; groupCounter++)
		{
			 for (int nameCounter = 0; nameCounter < 11; nameCounter++)
			{
			    ListGridRecord record = new ListGridRecord();  
			     record.setAttribute(DSFIELD_GROUP, "Group " + groupCounter);
			     record.setAttribute(DSFIELD_NAME, "Name " + nameCounter);
			    
			     records[recordCounter] = record;
			     recordCounter++;
			 }
		 }
		
		return records;
 	}
	
	
	
 	private static class TestDS extends DataSource 
	{
            private static TestDS instance = null;  
        
            public static TestDS getInstance() 
            {  
	          if (instance == null) 
	          {  
	              instance = new TestDS("localTestDataSource");  
	          }  
	          return instance;  
            }  
  
            private TestDS(String id) 
            {
                setID(id);
                setClientOnly(true);
            
                DataSourceTextField group = new DataSourceTextField(DSFIELD_GROUP);
                DataSourceTextField name = new DataSourceTextField(DSFIELD_NAME);
          
                group.setPrimaryKey(true);
                name.setPrimaryKey(true);
          
                group.setCanEdit(false);
                name.setCanEdit(false);
            
                setFields(group, name);
            
                setTestData(getRecords());
            }
      }	
}