Announcement

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

    PickTreeItem as grid's criteria editor width out of sync

    1. SmartClient Version: v9.0p_2013-10-17/LGPL Development Only (built 2013-10-17) - latest patched 4.0p

    2. Firefox 3.6.17

    3.

    4.

    5.

    6. sample code

    Hi,
    PickTreeItem used in grid's criteria row does not follow column widths - means width of criteria editor is out of sync with grid column width.
    The first screen shot shows initial situation, and the second one the situation after column resize.
    Code:
    package pl.com.tech4.client;
    
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.DOM;
    import com.smartgwt.client.data.DataSource;
    import com.smartgwt.client.data.DataSourceField;
    import com.smartgwt.client.data.fields.DataSourceTextField;
    import com.smartgwt.client.util.SC;
    import com.smartgwt.client.widgets.form.DynamicForm;
    import com.smartgwt.client.widgets.form.fields.PickTreeItem;
    import com.smartgwt.client.widgets.form.fields.PickerIcon;
    import com.smartgwt.client.widgets.form.fields.events.FormItemClickHandler;
    import com.smartgwt.client.widgets.form.fields.events.FormItemIconClickEvent;
    import com.smartgwt.client.widgets.grid.ListGrid;
    import com.smartgwt.client.widgets.grid.ListGridField;
    import com.smartgwt.client.widgets.layout.VLayout;
    
    public class MainEntryPoint implements EntryPoint {
       
        public void onModuleLoad() {
    
            DOM.getElementById("loadingPicture").removeFromParent();
            layout();
            SC.showConsole();
        }
       
        private void layout() {
    
            DataSource ds = new DataSource();
            DataSourceField fieldId = new DataSourceField();
            fieldId.setName("id");
            fieldId.setPrimaryKey(true);
            DataSourceTextField field1 = new DataSourceTextField();
            field1.setName("field1");
            DataSourceField fieldParentId = new DataSourceField();
            fieldParentId.setName("parentId");
            fieldParentId.setForeignKey("id");
            DataSourceTextField field2 = new DataSourceTextField();
            field2.setName("field2");
            ds.setFields(fieldId, field1, fieldParentId, field2);
           
            PickTreeItem parentIdItem = new PickTreeItem("parentId");
            parentIdItem.setEmptyDisplayValue("");
            PickerIcon clearPickerIcon = new PickerIcon(PickerIcon.CLEAR);
            clearPickerIcon.addFormItemClickHandler(new FormItemClickHandler() {
    
                public void onFormItemClick(FormItemIconClickEvent event) {
                    event.getItem().clearValue();
                }
            });
            parentIdItem.setIcons(clearPickerIcon);
           
            ListGrid lg = new ListGrid();
            lg.setShowFilterEditor(true);
            lg.setWidth(500);
            lg.setUseAllDataSourceFields(true);
            ListGridField lgf1 = new ListGridField("field1");
            lgf1.setWidth(200);
            ListGridField lgf = new ListGridField("parentId");
            lgf.setFilterEditorProperties(parentIdItem);
            ListGridField lgf2 = new ListGridField("field2");
            lgf2.setWidth(400);
            lg.setFields(lgf1, lgf, lgf2);
           
            lg.setDataSource(ds);
           
            lg.draw();
        }
       
    }
    MichalG
    Attached Files

    #2
    We've made changes to address this resize issue, generally.

    More specifically, PickTreeItem is overflow: true by default, which means it assumes a minimum width (possibly wider than its column). To address this, you'll need to use setAutoChildProperties("button", FormItem Properties) to set overflow to "hidden" on the item.

    Please retest with a nightly build dated December 31 or later.

    Comment


      #3
      Tested against SmartClient Version: v9.0p_2013-12-31/LGPL Development Only (built 2013-12-31) shows that user resize now works correctly - the width of pickTree as query editor is following user's column size changes.
      Still initial width of pickTree is larger than grid's column, though - see attachment.
      I am not sure about setting overflow for button child. Trying to modify code this way:
      Code:
              PickTreeItem parentIdItem = new PickTreeItem("parentId");
              parentIdItem.setEmptyDisplayValue("");
              FormItem buttonProperties = new FormItem();
      //        buttonProperties.setOverFow(Overflow.HIDDEN);
              parentIdItem.setAutoChildProperties("button", buttonProperties);
      but FormItem has no overflow setter?
      MichalG
      Attached Files

      Comment


        #4
        Sorry, if you look at the doc for PickTreeItem.button, you can see that it should be Canvas Properties, not FormItem properties.

        Comment


          #5
          Ok, thanks.
          But it does not help for initial out-of-sync situation as shown on the attached picture.
          Code:
          import com.google.gwt.core.client.EntryPoint;
          import com.google.gwt.user.client.DOM;
          import com.smartgwt.client.data.DataSource;
          import com.smartgwt.client.data.DataSourceField;
          import com.smartgwt.client.data.fields.DataSourceTextField;
          import com.smartgwt.client.types.Overflow;
          import com.smartgwt.client.util.SC;
          import com.smartgwt.client.widgets.Canvas;
          import com.smartgwt.client.widgets.form.fields.PickTreeItem;
          import com.smartgwt.client.widgets.form.fields.PickerIcon;
          import com.smartgwt.client.widgets.form.fields.events.FormItemClickHandler;
          import com.smartgwt.client.widgets.form.fields.events.FormItemIconClickEvent;
          import com.smartgwt.client.widgets.grid.ListGrid;
          import com.smartgwt.client.widgets.grid.ListGridField;
          
          public class MainEntryPoint implements EntryPoint {
              
              public void onModuleLoad() {
          
                  DOM.getElementById("loadingPicture").removeFromParent();
                  layout();
                  SC.showConsole();
              }
              
              private void layout() {
          
                  DataSource ds = new DataSource();
                  DataSourceField fieldId = new DataSourceField();
                  fieldId.setName("id");
                  fieldId.setPrimaryKey(true);
                  DataSourceTextField field1 = new DataSourceTextField();
                  field1.setName("field1");
                  DataSourceField fieldParentId = new DataSourceField();
                  fieldParentId.setName("parentId");
                  fieldParentId.setForeignKey("id");
                  DataSourceTextField field2 = new DataSourceTextField();
                  field2.setName("field2");
                  ds.setFields(fieldId, field1, fieldParentId, field2);
                  
                  PickTreeItem parentIdItem = new PickTreeItem("parentId");
                  parentIdItem.setEmptyDisplayValue("");
                  Canvas buttonProperties = new Canvas();
                  buttonProperties.setOverflow(Overflow.HIDDEN);
                  parentIdItem.setAutoChildProperties("button", buttonProperties);
                  PickerIcon clearPickerIcon = new PickerIcon(PickerIcon.CLEAR);
                  clearPickerIcon.addFormItemClickHandler(new FormItemClickHandler() {
          
                      public void onFormItemClick(FormItemIconClickEvent event) {
                          event.getItem().clearValue();
                      }
                  });
                  parentIdItem.setIcons(clearPickerIcon);
                  
                  ListGrid lg = new ListGrid();
                  lg.setShowFilterEditor(true);
                  lg.setWidth(500);
                  lg.setUseAllDataSourceFields(true);
                  ListGridField lgf1 = new ListGridField("field1");
                  lgf1.setWidth(200);
                  ListGridField lgf = new ListGridField("parentId");
                  lgf.setFilterEditorProperties(parentIdItem);
                  ListGridField lgf2 = new ListGridField("field2");
                  lgf2.setWidth(400);
                  lg.setFields(lgf1, lgf, lgf2);
                  
                  lg.setDataSource(ds);
                  
                  lg.draw();
              }
              
          }
          Attached Files

          Comment


            #6
            We'll take another look - in the meantime, please try specifically creating TreeMenuButton properties, rather than Canvas properties.

            Comment


              #7
              Creating TreeMenuButton properties doesn't change anything.
              I don't know if this is related, but the following warning can be seen twice on the Dev Console:
              Code:
              14:16:17.399:WARN:TreeMenuButton:isc_PickTreeItem_1_button:ignoring bad or negative width: -6
                  [a]MathFunction.getStackTrace(_1=>undef, _2=>undef, _3=>undef, _4=>undef, _5=>undef)
                  Canvas.getDelta(_1=>"width", _2=>-6, _3=>-6)
                  Canvas.resizeTo(_1=>-6, _2=>21, _3=>undef, _4=>undef, _5=>"init")
                  Canvas.init(_1=>undef, _2=>undef, _3=>undef, _4=>undef, _5=>undef, _6=>undef, _7=>undef, _8=>undef, _9=>undef, _10=>undef, _11=>undef, _12=>undef, _13=>undef)
                  [a]MathFunction.createAutoChild(_1=>"button", _2=>Obj, _3=>"TreeMenuButton", _4=>true)
                  [a]MathFunction.addAutoChild(_1=>"button", _2=>Obj, _3=>"TreeMenuButton", _4=>undef, _5=>undef)
                  PickTreeItem.$18y([DynamicForm ID:isc_DynamicForm_0], [PickTreeItem ID:isc_PickTreeItem_1 name:parentId])
                  CanvasItem.init(Obj{name:parentId}, undef, undef, undef, undef, undef, undef, undef, undef, undef, undef, undef, undef)
                  [a]MathFunction.invokeSuper(_1=>null, _2=>"init", _3=>undef, _4=>undef, _5=>undef, _6=>undef, _7=>undef, _8=>undef, _9=>undef, _10=>undef)
                  [a]MathFunction.Super(_1=>"init", _2=>[object Arguments], _3=>undef)
                  PickTreeItem.init(Obj{name:parentId}, undef, undef, undef, undef, undef, undef, undef, undef, undef, undef, undef, undef)
                  [a]MathFunction.completeCreation(_1=>Obj{name:parentId}, _2=>undef, _3=>undef, _4=>undef, _5=>undef, _6=>undef, _7=>undef, _8=>undef, _9=>undef, _10=>undef, _11=>undef, _12=>undef, _13=>undef)
                  DynamicForm.createItem(_1=>[PickTreeItem ID:isc_PickTreeItem_1 name:parentId], _2=>"PickTreeItem")
                  DynamicForm.$10l(_1=>Array[4], _2=>null, _3=>true, _4=>undef)
                  DynamicForm.setItems(_1=>Array[4], _2=>undef)
                  GridBody.draw(_1=>undef, _2=>undef, _3=>undef, _4=>undef)
                  Layout.layoutChildren(_1=>"initial draw", _2=>undef, _3=>undef)
                  ListGrid.layoutChildren(_1=>"initial draw", _2=>undef, _3=>undef)
                  ** recursed on [a]MathFunction.invokeSuper

              Comment


                #8
                On the ListGridField, call field.setFilterEditorType() as well as setFilterEditorProperties() - that should fix it.

                Comment


                  #9
                  Code:
                          PickTreeItem parentIdItem = new PickTreeItem("parentId");
                          parentIdItem.setEmptyDisplayValue("");
                          TreeMenuButton buttonProperties = new TreeMenuButton();
                          buttonProperties.setOverflow(Overflow.HIDDEN);
                          parentIdItem.setAutoChildProperties("button", buttonProperties);
                  
                  ...
                  
                          ListGridField lgf = new ListGridField("parentId");
                          lgf.setFilterEditorType(parentIdItem);
                          lgf.setFilterEditorProperties(parentIdItem);
                  Unfortunately no change on init draw.
                  MichalG

                  Comment


                    #10
                    What's happening here is that the field is being autoSized to a width smaller than the PickerIcon you're adding, which has a fixed width.

                    You can fix it with a minimum field width, say, lg.setMinFieldWidth(30) - or by not adding a PickerIcon.

                    Comment


                      #11
                      Setting lg.setMinFieldWidth(60) indeed helps for initial draw as as shown on the first attached screen.
                      Note though, that SelectItem or ComboBoxItem with the same PickerIcon does not have any problems in very same autoSized situation.

                      Now back to PickTreeItem:
                      Unfortunately, after user resize of ListGrid column, the PickerIcon disappears from search editor (see the second screen attached). Column width and editor width are synchronized (that was fixed), but picker is missing (which I haven't noticed before).
                      MichalG
                      Attached Files

                      Comment


                        #12
                        SelectItem and ComboBoxItem are not CanvasItems - they don't house a separate, non-FormItem canvas. We'll take a look at the combination of PickerIcons and autoSizing buttons in CanvasItems.

                        For clarity - in fact, only one of your previous screenshots actually DOES show the PickerIcon :) Indeed, that's how we missed what was causing the problem. So its not a new issue - but we'll take a look in the coming days.

                        Comment


                          #13
                          I have been so focused on out-of-sync problem and missed PickerIcon, sorry.
                          Thanks for looking into this.
                          MichalG

                          Comment


                            #14
                            Ok, this is fixed for builds dated January 4 and later - and you can remove the call to setMinFieldWidth(), if you added it.
                            Last edited by Isomorphic; 3 Jan 2014, 07:18.

                            Comment


                              #15
                              Thereby, confirmed as fixed in SmartClient Version: v9.0p_2014-01-05/LGPL Development Only (built 2014-01-05)
                              Thank you,
                              MichalG

                              Comment

                              Working...
                              X