Announcement

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

    5.1p RecordComponent height and horizontal scroll problem

    Hi Isomorphic,

    please see this BuiltInDS based testcase (using v10.1p_2017-08-20), similar to this sample, but without constant height for the recordComponents. My problems are:
    1. Row height. As the RecordComponent height can differ, the ListGrid row heigth should also differ. This happens, but does not match the needed height. It just looks strange and somehow shifted.
    2. For me, the sample is showing a short horizontal scrollbar (tested with FF26 Dev mode, see screenshot). I can't scroll to the right, it always jumps back to the left.
    BuiltInDS.java:
    Code:
    package com.smartgwt.sample.client;
    
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.Random;
    import com.smartgwt.client.Version;
    import com.smartgwt.client.core.KeyIdentifier;
    import com.smartgwt.client.data.DataSource;
    import com.smartgwt.client.types.Alignment;
    import com.smartgwt.client.types.Overflow;
    import com.smartgwt.client.types.RecordComponentPoolingMode;
    import com.smartgwt.client.util.Page;
    import com.smartgwt.client.util.PageKeyHandler;
    import com.smartgwt.client.util.SC;
    import com.smartgwt.client.widgets.Canvas;
    import com.smartgwt.client.widgets.IButton;
    import com.smartgwt.client.widgets.Label;
    import com.smartgwt.client.widgets.Window;
    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.grid.ListGridField;
    import com.smartgwt.client.widgets.grid.ListGridRecord;
    import com.smartgwt.client.widgets.layout.HLayout;
    import com.smartgwt.client.widgets.layout.VLayout;
    
    public class BuiltInDS extends VLayout implements EntryPoint {
        private IButton recreateBtn;
    
        public void onModuleLoad() {
            KeyIdentifier debugKey = new KeyIdentifier();
            debugKey.setCtrlKey(true);
            debugKey.setKeyName("D");
    
            Page.registerKey(debugKey, new PageKeyHandler() {
                public void execute(String keyName) {
                    SC.showConsole();
                }
            });
    
            setWidth100();
            setHeight100();
    
            recreateBtn = new IButton("Recreate");
            recreateBtn.addClickHandler(new ClickHandler() {
                @Override
                public void onClick(ClickEvent event) {
                    new MyWindow().show();
                }
            });
            addMember(recreateBtn);
            new MyWindow().show();
            draw();
        }
    
        private class MyWindow extends Window {
            public MyWindow() {
                setWidth("95%");
                setHeight("95%");
                setMembersMargin(0);
                setModalMaskOpacity(70);
                setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
                setTitle("RecordComponent height and horizontal scroll problem" + getTitle());
                setShowMinimizeButton(false);
                setIsModal(true);
                setShowModalMask(true);
                centerInPage();
    
                ListGrid messengerTest = new MessengerTest();
                addItem(messengerTest);
            }
        }
    
        private class MessengerTest extends ListGrid {
            private final String FAKECOLUMNNAME = "FAKECOLUMN";
            protected Label myLabel;
    
            public MessengerTest() {
                super(DataSource.get("animals"));
                setVirtualScrolling(false);
                setShowRecordComponents(true);
                setShowRecordComponentsByCell(true);
                setRecordComponentPoolingMode(RecordComponentPoolingMode.RECYCLE);
                setPoolComponentsPerColumn(true);
    
                setWidth(1000);
                setHeight(500);
    
                ListGridField fakecolumnLGF = new ListGridField(FAKECOLUMNNAME);
                fakecolumnLGF.setShowTitle(false);
                ListGridField commonNameLGF = new ListGridField("commonName");
                commonNameLGF.setWidth(100);
    
                setFields(commonNameLGF, fakecolumnLGF);
                setSortField("commonName");
                fetchData();
            }
    
            @Override
            protected Canvas createRecordComponent(final ListGridRecord record, Integer colNum) {
                return updateRecordComponent(record, colNum, null, true);
            }
    
            public Canvas updateRecordComponent(ListGridRecord record, Integer colNum, Canvas component, boolean recordChanged) {
                String fieldName = this.getFieldName(colNum);
                if (FAKECOLUMNNAME.equals(fieldName)) {
    
                    // String s = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr.";
                    String text = record.getAttributeAsString("information");
    
                    int labelType = Random.nextInt(2);
                    myLabel = new Label(text);
                    myLabel.setWidth(200);
                    myLabel.setHeight(1);
                    myLabel.setOverflow(Overflow.VISIBLE);
                    HLayout myLayout = new HLayout();
    
                    switch (labelType) {
                    case 0:
                        // myLabel.setStyleName("chatterLabelBlue");
                        myLayout.setAlign(Alignment.RIGHT);
                        break;
                    case 1:
                        // myLabel.setStyleName("chatterLabelGray");
                        myLayout.setAlign(Alignment.LEFT);
                        break;
                    }
    
                    myLayout.setWidth(900);
                    myLayout.addMember(myLabel);
                    return myLayout;
                } else
                    return null;
            }
        }
    }
    Best regards
    Blama

    #2
    Added screenshot:
    Click image for larger version

Name:	RecordComponent height and horizontal scroll problem.PNG
Views:	289
Size:	37.5 KB
ID:	249490

    Comment


      #3
      OK, there seems to be a problem at my side - or the issue is fixed in newer versions - this code seems to work here (using v10.1p_2017-10-05):

      Code:
      isc.ListGrid.create({
          width: 550,
          height: 1000,
          canResizeFields: true,
          virtualScrolling: false,
          showRecordComponents: true,
          showRecordComponentsByCell: true,
          canRemoveRecords: false,  
          recordComponentPoolingMode: "recycle",
          data: countryData,
      
          fields: [
              { name: "countryCode", type: "image", title: "Flag", width: 40, align: "center",
                  imageURLPrefix: "flags/16/", imageURLSuffix: ".png" 
              },
              { name: "countryName", title: "Country", width: 100  },
              { name: "iconField", title: "Comments/Stats", width: 550 }
          ],
          createRecordComponent : function (record, colNum) {  
              var fieldName = this.getFieldName(colNum);  
              if (fieldName == "iconField") {  
                  var recordCanvas = isc.HLayout.create({
                      width: "100%",
                      align: "center"
                  });
      
                  var editImg = isc.Label.create({
                      contents: record["background"],
                      width: "100%"
                  });
      
                  recordCanvas.addMember(editImg);  
                  return recordCanvas;  
              } else {  
                  return null;  
              }  
          },
      
          updateRecordComponent: function (record, colNum, component, recordChanged) {
              var fieldName = this.getFieldName(colNum);  
              if (fieldName == "iconField") {  
                  var recordCanvas = isc.HLayout.create({
                      width: "100%",
                      align: "center"
                  });
      
                  var editImg = isc.Label.create({
                      contents: record["background"],
                      width: "100%"
                  });
      
                  recordCanvas.addMember(editImg);  
                  return recordCanvas;  
              } else {  
                  return null;  
              }  
          }
      });
      I'll investigate.

      Best regards
      Blama

      Comment


        #4
        There is an small issue visible in the modified online sample from #3 (with v10.1p_2017-10-05):
        There are scroll bars for the sample and for the ListGrid. Just using the mousewheel when over the ListGrid scrolls both the sample scrollbar and the ListGrid-scrollbar.
        IMHO it should only scroll the ListGrid.

        Best regards
        Blama

        Comment


          #5
          Hi Isomorphic,

          I retested my testcase from #1 with v10.1p_2017-10-05 and the error (=screenshot from #2) occurs in the same way. Also the scrolling problem from #1 is present.
          I'm using Simplicity with FF26.

          Can you have a look?

          Best regards
          Blama

          Comment


            #6
            Originally posted by Blama View Post
            There is an small issue visible in the modified online sample from #3 (with v10.1p_2017-10-05):
            There are scroll bars for the sample and for the ListGrid. Just using the mousewheel when over the ListGrid scrolls both the sample scrollbar and the ListGrid-scrollbar.
            IMHO it should only scroll the ListGrid.
            This is not happening in 11.1 (v11.1p_2017-10-05) with the code from #3, so this has no priority for me as I'm going to switch to 6.1p soon.

            Best regards
            Blama

            Comment


              #7
              Hi Isomorphic,

              the original issues also occur with v11.1p_2017-10-05 and Enterprise skin.

              Best regards
              Blama

              Comment


                #8
                Screenshot for #7:

                Click image for larger version

Name:	RecordComponent height and horizontal scroll problem_6.1_Enterprise.PNG
Views:	270
Size:	39.6 KB
ID:	249500

                Comment


                  #9
                  Firstly, you want setFixedRecordHeights(false) on your ListGrid - then, you want to use setLayoutAlign(left/right) rather than setAlign() on your HLayouts.

                  If you still see issues with those changes, can you note them again, or be specific about which post #s are still problems? It seems like at least one bug was being reported against an old build of 10.1, but it isn't clear whether you were saying that one is fixed in a newer build...

                  Comment


                    #10
                    Actually, you don't need to change to use setLayoutAlign() - setAlign() is the correct API.

                    However, you *do* need to setHeight(1) on both your myLabel and your myLayout, so they don't default to 100px height.

                    As regards the horizontal scrollbar - that's because you've assigned a width of 900 to the HLayout - just call setWidth100() instead.

                    Comment


                      #11
                      Hi Isomorphic,

                      thanks a lot, your setFixedRecordHeights(false) and the height settings fixed the issue for me.
                      W.r.t. to the horizontal scrollbar, there is still an issue in v10.1p_2017-10-05 and Simplicity skin, see this revised testcase. The issue is not the scrollbar itself, but that it is not possible to scroll the scrollbar to the right.
                      It keeps jumping back (Tested in FF26 Dev Mode).

                      BuiltInDS.java:
                      Code:
                      package com.smartgwt.sample.client;
                      
                      import com.google.gwt.core.client.EntryPoint;
                      import com.google.gwt.user.client.Random;
                      import com.smartgwt.client.Version;
                      import com.smartgwt.client.core.KeyIdentifier;
                      import com.smartgwt.client.data.DataSource;
                      import com.smartgwt.client.types.Alignment;
                      import com.smartgwt.client.types.Overflow;
                      import com.smartgwt.client.types.RecordComponentPoolingMode;
                      import com.smartgwt.client.util.Page;
                      import com.smartgwt.client.util.PageKeyHandler;
                      import com.smartgwt.client.util.SC;
                      import com.smartgwt.client.widgets.Canvas;
                      import com.smartgwt.client.widgets.IButton;
                      import com.smartgwt.client.widgets.Label;
                      import com.smartgwt.client.widgets.Window;
                      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.grid.ListGridField;
                      import com.smartgwt.client.widgets.grid.ListGridRecord;
                      import com.smartgwt.client.widgets.layout.HLayout;
                      import com.smartgwt.client.widgets.layout.VLayout;
                      
                      public class BuiltInDS extends VLayout implements EntryPoint {
                          public void onModuleLoad() {
                              KeyIdentifier debugKey = new KeyIdentifier();
                              debugKey.setCtrlKey(true);
                              debugKey.setKeyName("D");
                      
                              Page.registerKey(debugKey, new PageKeyHandler() {
                                  public void execute(String keyName) {
                                      SC.showConsole();
                                  }
                              });
                              setWidth100();
                              setHeight100();
                      
                              final IButton recreateBtn = new IButton("Recreate");
                              recreateBtn.addClickHandler(new ClickHandler() {
                                  @Override
                                  public void onClick(ClickEvent event) {
                                      new MyWindow().show();
                                  }
                              });
                              addMember(recreateBtn);
                              new MyWindow().show();
                              draw();
                          }
                      
                          private class MyWindow extends Window {
                              public MyWindow() {
                                  setWidth("95%");
                                  setHeight("95%");
                                  setMembersMargin(0);
                                  setModalMaskOpacity(70);
                                  setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
                                  setTitle("RecordComponent horizontal scroll problem" + getTitle());
                                  setShowMinimizeButton(false);
                                  setIsModal(true);
                                  setShowModalMask(true);
                                  centerInPage();
                      
                                  ListGrid messengerTest = new MessengerTest();
                                  addItem(messengerTest);
                              }
                          }
                      
                          private class MessengerTest extends ListGrid {
                              private final String FAKECOLUMNNAME = "FAKECOLUMN";
                      
                              public MessengerTest() {
                                  super(DataSource.get("animals"));
                                  setVirtualScrolling(false);
                                  setShowRecordComponents(true);
                                  setShowRecordComponentsByCell(true);
                                  setRecordComponentPoolingMode(RecordComponentPoolingMode.RECYCLE);
                                  setPoolComponentsPerColumn(true);
                                  setFixedRecordHeights(false);
                      
                                  setWidth(1000);
                                  setHeight(500);
                      
                                  ListGridField commonNameLGF = new ListGridField("commonName");
                                  commonNameLGF.setWidth(100);
                                  ListGridField fakecolumnLGF = new ListGridField(FAKECOLUMNNAME);
                                  fakecolumnLGF.setShowTitle(false);
                      
                                  setFields(commonNameLGF, fakecolumnLGF);
                                  setSortField("commonName");
                                  fetchData();
                              }
                      
                              @Override
                              protected Canvas createRecordComponent(final ListGridRecord record, Integer colNum) {
                                  return updateRecordComponent(record, colNum, null, true);
                              }
                      
                              public Canvas updateRecordComponent(ListGridRecord record, Integer colNum, Canvas component, boolean recordChanged) {
                                  String fieldName = this.getFieldName(colNum);
                                  if (FAKECOLUMNNAME.equals(fieldName)) {
                      
                                      String text = record.getAttributeAsString("information");
                      
                                      int labelType = Random.nextInt(2);
                                      Label myLabel = new Label(text);
                                      myLabel.setWidth(200);
                                      myLabel.setHeight(1);
                                      myLabel.setOverflow(Overflow.VISIBLE);
                                      HLayout myLayout = new HLayout();
                                      myLayout.setHeight(1);
                      
                                      switch (labelType) {
                                      case 0:
                                          myLayout.setAlign(Alignment.RIGHT);
                                          break;
                                      case 1:
                                          myLayout.setAlign(Alignment.LEFT);
                                          break;
                                      }
                      
                                      myLayout.setWidth(900);
                                      myLayout.addMember(myLabel);
                                      return myLayout;
                                  } else
                                      return null;
                              }
                          }
                      }
                      Video:
                      Click image for larger version

Name:	Scrollbar jumps back.gif
Views:	274
Size:	96.6 KB
ID:	249524


                      Best regards
                      Blama

                      Comment


                        #12
                        It seems like your HLayout still specifies a width of 900 - just set it to 100% (of the cell) instead

                        Comment


                          #13
                          Hi Isomorphic,

                          thanks, that solved the issue in the testcase. I'm having a problem in my application, though.
                          I want the label to expand to a certain width, if needed and then wrap, but this does not work.
                          My workaround also runs in this issue with the non-responding scrollbars.

                          This is the testcase:
                          Code:
                          package com.smartgwt.sample.client;
                          
                          import com.google.gwt.core.client.EntryPoint;
                          import com.google.gwt.user.client.Random;
                          import com.smartgwt.client.Version;
                          import com.smartgwt.client.core.KeyIdentifier;
                          import com.smartgwt.client.data.DataSource;
                          import com.smartgwt.client.types.Alignment;
                          import com.smartgwt.client.types.AutoFitWidthApproach;
                          import com.smartgwt.client.types.RecordComponentPoolingMode;
                          import com.smartgwt.client.util.Page;
                          import com.smartgwt.client.util.PageKeyHandler;
                          import com.smartgwt.client.util.SC;
                          import com.smartgwt.client.widgets.Canvas;
                          import com.smartgwt.client.widgets.IButton;
                          import com.smartgwt.client.widgets.Label;
                          import com.smartgwt.client.widgets.Window;
                          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.grid.ListGridField;
                          import com.smartgwt.client.widgets.grid.ListGridRecord;
                          import com.smartgwt.client.widgets.layout.HLayout;
                          import com.smartgwt.client.widgets.layout.VLayout;
                          
                          public class BuiltInDS extends VLayout implements EntryPoint {
                              public void onModuleLoad() {
                                  KeyIdentifier debugKey = new KeyIdentifier();
                                  debugKey.setCtrlKey(true);
                                  debugKey.setKeyName("D");
                          
                                  Page.registerKey(debugKey, new PageKeyHandler() {
                                      public void execute(String keyName) {
                                          SC.showConsole();
                                      }
                                  });
                                  setWidth100();
                                  setHeight100();
                          
                                  final IButton recreateBtn = new IButton("Recreate");
                                  recreateBtn.addClickHandler(new ClickHandler() {
                                      @Override
                                      public void onClick(ClickEvent event) {
                                          new MyWindow().show();
                                      }
                                  });
                                  addMember(recreateBtn);
                                  new MyWindow().show();
                                  draw();
                              }
                          
                              private class MyWindow extends Window {
                                  public MyWindow() {
                                      setBackgroundColor("#F5F5F5");
                                      setBodyColor("#F5F5F5");
                                      setCanFocus(true);
                                      setWidth(600);
                                      setHeight(600);
                                      setMembersMargin(0);
                                      setModalMaskOpacity(70);
                                      setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
                                      setTitle("RecordComponent horizontal scroll problem" + getTitle());
                                      setShowMinimizeButton(false);
                                      setIsModal(true);
                                      setShowModalMask(true);
                                      centerInPage();
                          
                                      ListGrid messengerTest = new MessengerTest();
                                      VLayout messagesVLayout = new VLayout();
                                      messagesVLayout.setWidth(380);
                                      messagesVLayout.addMembers(messengerTest);
                          
                                      addItem(messagesVLayout);
                                  }
                              }
                          
                              private class MessengerTest extends ListGrid {
                                  private final String FAKECOLUMNNAME = "FAKECOLUMN";
                                  private Label messageLabel;
                                  private String styleName = "myCSSClass";
                          
                                  public MessengerTest() {
                                      super(DataSource.get("animals"));
                                      setAutoFitFieldsFillViewport(true);
                                      setShowClippedValuesOnHover(true);
                                      setAutoFitWidthApproach(AutoFitWidthApproach.BOTH);
                                      setCanMultiGroup(false);
                                      setCanEdit(false);
                                      setShowFilterEditor(false);
                                      setCanFreezeFields(false);
                                      setCanReorderFields(false);
                                      setCellHeight(30);
                                      setHeaderHeight(40);
                                      setFixedRecordHeights(true);
                          
                                      setWidth100();
                                      setVirtualScrolling(false);
                                      setShowRecordComponents(true);
                                      setShowRecordComponentsByCell(true);
                                      setRecordComponentPoolingMode(RecordComponentPoolingMode.RECYCLE);
                                      setPoolComponentsPerColumn(true);
                                      setFixedRecordHeights(false);
                          
                                      ListGridField fakecolumnLGF = new ListGridField(FAKECOLUMNNAME, "FAKECOLUMNNAME");
                                      fakecolumnLGF.setShowTitle(false);
                          
                                      setFields(fakecolumnLGF);
                                      setSortField("commonName");
                                      fetchData();
                                  }
                          
                                  @Override
                                  protected Canvas createRecordComponent(final ListGridRecord record, Integer colNum) {
                                      return updateRecordComponent(record, colNum, null, true);
                                  }
                          
                                  public Canvas updateRecordComponent(ListGridRecord record, Integer colNum, Canvas component, boolean recordChanged) {
                                      String fieldName = this.getFieldName(colNum);
                                      if (FAKECOLUMNNAME.equals(fieldName)) {
                          
                                          String text = record.getAttributeAsString("information").replace(".", ".<br/>").replace(" ", "&nbsp;");
                                          HLayout messageLayout = new HLayout();
                                          messageLayout.setHeight(1);
                                          int labelType = Random.nextInt(2);
                                          switch (labelType) {
                                          case 0:
                                              messageLayout.setAlign(Alignment.RIGHT);
                                              break;
                                          case 1:
                                              messageLayout.setAlign(Alignment.LEFT);
                                              break;
                                          }
                          
                                          messageLabel = new Label();
                                          messageLabel.setContents(text);
                                          messageLabel.setHeight(1);
                          
                                          messageLabel.setStyleName(styleName);
                          
                                          messageLayout.setWidth100();
                                          messageLayout.addMember(messageLabel);
                          
                                          VLayout messageVLayout = new VLayout(6);
                                          messageVLayout.setPadding(4);
                                          messageVLayout.setBackgroundColor("white");
                                          messageVLayout.setHeight(1);
                                          messageVLayout.setWidth100();
                          
                                          messageVLayout.addMember(messageLayout);
                          
                                          return messageVLayout;
                                      } else
                                          return null;
                                  }
                              }
                          }
                          As you can see, the label expands the width if needed because of the &nbsp; I inject.
                          The problem I'm having is that if the label gets too wide, the horizontal (non-working, see above) ListGrid scrollbar is introduced.

                          What I want to archive:
                          • Linebreaks if data contains \r\n (I did this via text-replace with <br/>, this works)
                          • Label extending to the maximum of a certain width, then auto-wrap
                          The 2nd point is where I'm stuck. Here in the testcase the label does not get wider at all. For me it does.
                          But it should stop and auto-wrap at some point. IMHO setWrap(true) (default anyway) and setMaxWidth(400) should do it, so that I don't need the "&nbsp;"-hack, but it does not.
                          Also different overflow settings did not help.

                          Is this possible?
                          A more general question:
                          With Overflow.VISIBLE and setWrap(true), and possibly setMaxHeigth()/setMaxWidth(), how does the framework decide what to do?
                          In which direction does it expand 1st? length or breath-axis? I assume width-then-height?

                          Best regards
                          Blama

                          Comment


                            #14
                            One way to do it would be by switching to using a Canvas and applying the width you want the text to wrap at as min and max width - like this:

                            Code:
                                            Canvas mLabel = new Canvas();
                                            mLabel.setStyleName(styleName);
                                            mLabel.setHeight(1);
                                            mLabel.setMinWidth(150);
                                            mLabel.setMaxWidth(150);
                                            mLabel.setOverflow(Overflow.VISIBLE);
                                            mLabel.setContents(text);
                            You wouldn't need your &nbsp; stuff in this case, of course
                            Last edited by Isomorphic; 18 Oct 2017, 05:14.

                            Comment


                              #15
                              Hi Isomorphic,

                              that's not it. I want the width to vary from e.g. 50-500, depending on the widest row (row meaning "content between two <br/>").
                              If a row is wider than 500, that row should wrap and the width will be 500.
                              If the widest row is 50, then the Canvas/Label should be 50 wide.
                              If the widest row is 400, then the Canvas/Label should be 400 wide.
                              Height should depend on data only, so it can increase here as needed.

                              To me it seems that in your example, setMaxWidth() is just ignored. The row does not get wider.
                              If I replace "space" with "&nbsp;", it gets too wide again.

                              Best regards
                              Blama

                              Comment

                              Working...
                              X