Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

  • Databound ListGrid + grouping + setShowRecordComponents creates extra whitespace

    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:
    Code:
    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());
                }
          }	
    }
    Attached Files

  • Isomorphic
    replied
    That particular sample happened to have few enough records that the whole dataset could be rendered at once, so you wouldn't see the open space at the end, so the virtualScrolling:false setting has no visible effect until there are more records.

    But yes, if you are going to disable virtual scrolling with recordComponents, you do need to set recordComponentHeight, and you need to ensure you aren't using any other features that would normally turn on virtual scrolling (as listed in the docs).

    Leave a comment:


  • Blama
    replied
    Hi Isomorphic,

    I tested the default behavior a bit: In the sample (now on v11.0p_2017-05-07),
    Code:
    virtualScrolling:false
    is needed whether you set
    Code:
    recordComponentHeight: 22
    or not.
    Without it, virtualScrolling it always enabled.

    This is in sync with the docs.
    I assume that for a use case like in the sample you suggest setting
    Code:
    virtualScrolling:false,
    recordComponentHeight: 22 // (where 22 is the max height of the possible recordComponents)
    don't you?

    Best regards
    Blama

    Leave a comment:


  • Isomorphic
    replied
    There is a slight clarity advantage to setting recordComponentHeight instead of virtualScrolling:false, since setting virtualScrolling:false would disable virtual scrolling even if it is needed for a purpose *other than* record components.

    Leave a comment:


  • Blama
    replied
    Hi Isomorphic,

    Originally posted by Isomorphic View Post
    If you have fixed height recordComponents - yes we'd recommend you setRecordComponentHeight() so the grid knows how tall rows will render.
    With respect to the source of this sample, where you set virtualScrolling: false, do you suggest using setRecordComponentHeight() or virtualScrolling: false, if I have buttons lower than the normal row height just as in the linked sample?
    I assume virtualScrolling: false, but I'm not sure.

    Best regards
    Blama

    Leave a comment:


  • Blama
    replied
    Hi Isomorphic,

    it's now working in all browsers (tested Win8.1 with IE11 FF26 GC44) with v10.0p_2015-08-18/PowerEdition Deployment.

    Thank you & Best regards
    Blama

    Leave a comment:


  • Isomorphic
    replied
    We've ported additional files for SGWT 5.0p (it should be working for SGWT 5.1d as is). This should be in the nightly builds for 2015-08-18.

    Leave a comment:


  • Blama
    replied
    Hi Isomorphic,

    I retested with the same test case as before (using Simplicity and java code from #21) and v10.0p_2015-08-16/PowerEdition Deployment.

    The result for IE11/Win8.1 did not change. The same bugs are still present ("Scrollbar-knob resizes to minimal size", "Scrollbar-knob is completely gone, as are the up/down arrows at the end of the scrollbar").

    Actually, also for FF26 and GC44 the "Scrollbar-knob resizes to minimal size" is present to when doing fast scrollknob-dragging to the very bottom of the scrollbar.

    Best regards
    Blama

    Leave a comment:


  • Isomorphic
    replied
    We're making a fix for the IE11 issues in SGWT 5.0p and newer that will be in the builds marked 2015-08-11.

    Leave a comment:


  • Blama
    replied
    Hi Isomorphic,

    yes, only IE11 (I did not test other IE versions).

    Best regards
    Blama

    Leave a comment:


  • Isomorphic
    replied
    Originally posted by Blama View Post

    The fix helps me very much, but you might want to look into this nevertheless.

    Best regards
    Blama
    Are the remaining issues only visible in IE11?

    Leave a comment:


  • Blama
    replied
    Hi Isomorphic,

    SNAPSHOT_v10.1d_2015-08-06 behaves the same for me like current 5.0p.

    Best regards
    Blama
    Last edited by Blama; 6th Aug 2015, 07:36. Reason: EDIT: Both bugs present in the same manner in 5.0p, 5.1d.

    Leave a comment:


  • Blama
    replied
    Hi Isomorphic,

    I retested with 5.0p v10.0p_2015-08-06/PowerEdition Deployment (I did not test 5.1d, yet).

    It seems to work in GC44, FF26 (using virtual scrolling, but the "jumping"-bug is gone and if scrolled down totally, the last record is still fully visible, so the "fully empty page"-bug is gone as well).

    This is also true for IE11, but here there is another (new) problem, when scrolling down totally:
    1. I used the same testcase ("Christian Jeansonne" as last visible entry for me)
    2. Select 1st record
    3. Hit "Page down"-button 4x ("Whitney Rogers" as last visible entry for me at the very bottom)
    4. Hit "Page down"-button one more time.
    5. "Whitney Rogers" only visible entry on the very top. Scrollbar-knob resizes to minimal size.

    Alternative: If I scroll to the very bottom with scrollknob-dragging, the Scrollbar-knob is completely gone, as are the up/down arrows at the end of the scrollbar (see screenshot).

    The fix helps me very much, but you might want to look into this nevertheless.

    Best regards
    Blama
    Attached Files

    Leave a comment:


  • Blama
    replied
    Hi Isomorphic,

    thanks, I'll test with the testcase and in my app and let you know.
    Does this fix the "jumping"-bug and the "fully empty page"-bug?
    Or does it circumvent those bugs by not using virtual scrolling because virtual scrolling is not necessary when using setRecordComponentHeight()+ListGrid.showRecordComponents(true)?

    Best regards
    Blama

    Leave a comment:


  • Isomorphic
    replied
    We've made an adjustment to the logic that detects virtual scrolling which should fix the issues you've encountered. The fix will be in SGWT 5.0p and newer in the nightlies dated 08-06-2015.

    Leave a comment:

Working...
X