Announcement

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

    Bug(s) with ListGrid in CanvasItem?

    Environment: SmartGwt 3.0, GWT 2.4, IE9 and FF11

    This is sort of a follow-up of http://forums.smartclient.com/showthread.php?t=19857. Note my three attachments.
    There's a ListGrid in CanvasItem in a DynamicForm. Initially the grid has no data[1]. Why are there chopped off scroll bars i.e. how do I get rid of them?
    Then the button is clicked[2]. Either redraw() doesn't work properly or something else amiss.
    If the button is clicked again[3] everything is fine.

    What also works is setData(), redraw(), setData(). Also, other than in the mentioned thread in my example the grid doesn't use as little space as possible. Why?

    Code:
    import com.google.gwt.core.client.EntryPoint;
    import com.smartgwt.client.types.Alignment;
    import com.smartgwt.client.types.Autofit;
    import com.smartgwt.client.types.ListGridFieldType;
    import com.smartgwt.client.util.SC;
    import com.smartgwt.client.widgets.Canvas;
    import com.smartgwt.client.widgets.ImgButton;
    import com.smartgwt.client.widgets.events.ClickEvent;
    import com.smartgwt.client.widgets.events.ClickHandler;
    import com.smartgwt.client.widgets.form.DynamicForm;
    import com.smartgwt.client.widgets.form.fields.ButtonItem;
    import com.smartgwt.client.widgets.form.fields.CanvasItem;
    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;
    
    public class SmartGwt implements EntryPoint {
    
      @Override
      public void onModuleLoad() {
    
        ListGridField linkField = new ListGridField("url");
        linkField.setType(ListGridFieldType.LINK);
        linkField.setLinkTextProperty("text");
        linkField.setBaseStyle("customerLists");
    
        ListGridField iconField = new ListGridField("deactivate");
        iconField.setAlign(Alignment.RIGHT);
        iconField.setWidth(30);
        iconField.setBaseStyle("customerLists");
    
        final ListGrid grid = new ListGrid() {
    
          @Override
          protected Canvas createRecordComponent(final ListGridRecord record, Integer colNum) {
            final String fieldName = this.getFieldName(colNum);
            if ("deactivate".equals(fieldName)) {
              final ImgButton editImg = new ImgButton();
              editImg.setShowDown(false);
              editImg.setShowRollOver(false);
              editImg.setLayoutAlign(Alignment.CENTER);
              editImg.setSrc("anhang_16.png");
              editImg.setHeight(16);
              editImg.setWidth(16);
              editImg.addClickHandler(new ClickHandler() {
    
                @Override
                public void onClick(ClickEvent event) {
                  SC.say("Deactivate!");
                }
              });
              return editImg;
            } else {
              return null;
            }
          }
        };
    
        grid.setShowHeader(false);
        grid.setAutoFitData(Autofit.BOTH);
        grid.setHeight(10);
        grid.setAutoFitFieldWidths(true);
    
        grid.setShowRecordComponents(true);
        grid.setShowRecordComponentsByCell(true);
        grid.setLeaveScrollbarGap(Boolean.FALSE);
        grid.setShowAllColumns(Boolean.TRUE);
    
        grid.setBorder("0");
        grid.setAlternateRecordStyles(Boolean.FALSE);
    
        grid.setFields(linkField, iconField);
    
        CanvasItem paymentsItem = new CanvasItem("customerLists", "THE grid");
        paymentsItem.setHeight("*");
        paymentsItem.setWidth("*");
        paymentsItem.setCanvas(grid);
    
        ButtonItem button = new ButtonItem("button", "load data");
        button.addClickHandler(new com.smartgwt.client.widgets.form.fields.events.ClickHandler() {
    
          @Override
          public void onClick(com.smartgwt.client.widgets.form.fields.events.ClickEvent event) {
            setDataTo(grid);
            // Without the following two lines, the button needs to be clicked twice...
    //        grid.redraw();
    //        setDataTo(grid);
          }
        });
    
        HLayout layout = new HLayout();
        layout.setAlign(Alignment.CENTER);
        DynamicForm form = new DynamicForm();
        form.setWidth(600);
        form.setFields(paymentsItem, button);
        form.setBackgroundColor("#F6F6F7");
        layout.setMembers(form);
    
        layout.draw();
      }
    
      private void setDataTo(final ListGrid grid) {
        ListGridRecord[] testData = new ListGridRecord[]{new ListGridRecord() {
    
          {
            setAttribute("url", "http://www.frightanic.com");
            setAttribute("text", "frightanic.com");
          }
        }, new ListGridRecord() {
    
          {
            setAttribute("url", "http://forums.smartclient.com/showpost.php?p=77098&postcount=2");
            setAttribute("text", "forums.smartclient.com (grid has default width 250px) but should expand automatically");
          }
        }, new ListGridRecord() {
    
          {
            setAttribute("url", "http://www.smartclient.com");
            setAttribute("text", "www.smartclient.com");
          }
        }
    
        };
        grid.setData(testData);
      }
    }
    Attached Files

    #2
    Please be specific about your version and try the fully patched build from smartclient.com/builds.

    Also make sure you have no external CSS (see FAQ). This would explain scrolling and sizing issues like you show.

    Comment


      #3
      Originally posted by Isomorphic
      Please be specific about your version and try the fully patched build from smartclient.com/builds.
      Well, it /is/ 3.0, the files in the smartgwt JAR are from 2011-12-12.

      Originally posted by Isomorphic
      Also make sure you have no external CSS (see FAQ). This would explain scrolling and sizing issues like you show.
      It's too easy to blame it on the external CSS ;-)
      The culprit is
      Code:
      grid.setHeight(10);
      . When the grid contains no data a white box saying "No items to show." is displayed. However, if the grid is only 10px high there's not enough room for the message -> scroll bars. The fix would be to leave the grid's height untouched while creating it but setting it to 10px after the data is set:
      Code:
      grid.setData(testData);
      grid.setHeight(10);
      After that the setData(), redraw(), setData() hack is no longer required. BUT the question now is how to configure the CanvasItem and/or ListGrid to be invisible (no white box, no no-items message) while the grid contains no data. To be more precise, the CanvasItem's title should be displayed but not the canvas itself.
      Any ideas?

      Comment


        #4
        Just don't create the grid and show a Label instead until data is available.

        Comment

        Working...
        X