inconsistent ListGrid column sizing

[dbscott525]

I’m creating a two column ListGrid. My desired effect is:

• First column: auto-fitted to the width of the data. I am doing this by using field1.setAutoFitWidth(true)
• Second column: take up the remaining space of the ListGrid. I am doing this by using field2.setWidth("*")

Here is what I’m experiencing:

• If the ListGrid is drawn after the data in the ListGrid is set I get the desired effect.
• If the data in the ListGrid is set after the ListGrid is populated then the second column does not extend to full length of the ListGrid.

Here is the test code:

public class ListGridRemainingWidthTest extends VStack {
 
    private static final String                  FIELD1 = "One";
    private static final String                  FIELD2 = "Two";
 
    private static final HashMap<String, String> data   = new HashMap<String, String>() {
                                                            private static final long serialVersionUID = 1L;
                                                            {
                                                                put("cowfish",
                                                                        "Authoritatively extend cross-platform \"outside the box\" thinking");
                                                                put("danker", "Continually impact installed base niche markets");
                                                                put("postretirement",
                                                                        "Phosfluorescently synergize user-centric supply chains");
                                                                put("lockkeepers",
                                                                        "Holisticly strategize 24/7 collaboration and idea-sharing");
                                                                put("liquids", "Quickly mesh process-centric intellectual capital");
                                                                put("volvoxes",
                                                                        "Phosfluorescently leverage existing client-focused quality vectors");
                                                                put("nitride", "Conveniently innovate bricks-and-clicks schemas");
                                                                put("operator", "Credibly disintermediate efficient markets");
                                                                put("compliance", "Phosfluorescently network flexible meta-services");
                                                                put("replevin", "Enthusiastically reconceptualize cross-unit fungibility");
                                                            }
 
                                                        };
 
    public ListGridRemainingWidthTest() {
 
        setMembersMargin(10);
        addMember(new TestListGrid(true));
        final TestListGrid bottomListGrid = new TestListGrid(false);
        addMember(getButton(bottomListGrid));
        addMember(bottomListGrid);
    }
 
    private Button getButton(final TestListGrid bottomListGrid) {
        Button button = new Button("Populate Bottom ListGrid");
 
        button.setAutoFit(true);
        button.setLayoutAlign(Alignment.CENTER);
 
        button.addClickHandler(new ClickHandler() {
 
            @Override
            public void onClick(ClickEvent event) {
                bottomListGrid.populate();
            }
        });
        return button;
    }
 
    private static class TestListGrid extends ListGrid {
        public TestListGrid(boolean populate) {
 
            setWidth(1000);
            setHeight(250);
 
            ListGridField field1 = new ListGridField(FIELD1);
            field1.setAutoFitWidth(true);
 
            ListGridField field2 = new ListGridField(FIELD2);
            field2.setWidth("*");
 
            setFields(field1, field2);
 
            if (populate) {
                populate();
            }
        }
 
        public void populate() {
            ArrayList<ListGridRecord> records = new ArrayList<ListGridRecord>();
 
            for (Entry<String, String> entry : data.entrySet()) {
                ListGridRecord record = new ListGridRecord();
                record.setAttribute(FIELD1, entry.getKey());
                record.setAttribute(FIELD2, entry.getValue());
                records.add(record);
            }
 
            setData(records.toArray(new ListGridRecord[0]));
        }
 
    }
 
}

To run the test:

1. new ListGridRemainingWidthTest().draw()
   1. The first ListGrid is populated with data and the second field is extended to the full length of the ListGrid.
2. Click the button
   1. The second ListGrid becomes populated with data be the second field is not extended to the full length of the ListGrid.

[Isomorphic]

Since you are looking for an auto-fitting behavior that actually involves all field (that is, filling remaining space after autofitting), you should set listGrid.autoFitFieldWidths. Then, your second field will be automatically chosen as the autoFitExpandField (although you could make this explicit).

[dbscott525]

Since you are looking for an auto-fitting behavior that actually involves all field (that is, filling remaining space after autofitting), you should set listGrid.autoFitFieldWidths. Then, your second field will be automatically chosen as the autoFitExpandField (although you could make this explicit).

This does result in the automatic expansion. However, the first field is chosen for the expansion.

setAutoFitExpandField(FIELD2) must be called to cause the second/last field to be used for the expansion..

Here is the code

public class ListGridRemainingWidthTest extends VStack {
 
    private static final String                  FIELD1 = "One";
    private static final String                  FIELD2 = "Two";
 
    private static final HashMap<String, String> data   = new HashMap<String, String>() {
                                                            private static final long serialVersionUID = 1L;
                                                            {
                                                                put("cowfish",
                                                                        "Authoritatively extend cross-platform \"outside the box\" thinking");
                                                                put("danker", "Continually impact installed base niche markets");
                                                                put("postretirement",
                                                                        "Phosfluorescently synergize user-centric supply chains");
                                                                put("lockkeepers",
                                                                        "Holisticly strategize 24/7 collaboration and idea-sharing");
                                                                put("liquids", "Quickly mesh process-centric intellectual capital");
                                                                put("volvoxes",
                                                                        "Phosfluorescently leverage existing client-focused quality vectors");
                                                                put("nitride", "Conveniently innovate bricks-and-clicks schemas");
                                                                put("operator", "Credibly disintermediate efficient markets");
                                                                put("compliance", "Phosfluorescently network flexible meta-services");
                                                                put("replevin", "Enthusiastically reconceptualize cross-unit fungibility");
                                                            }
 
                                                        };
 
    public ListGridRemainingWidthTest() {
 
        setMembersMargin(10);
        addMember(new TestListGrid(true));
        final TestListGrid bottomListGrid = new TestListGrid(false);
        addMember(getButton(bottomListGrid));
        addMember(bottomListGrid);
    }
 
    private Button getButton(final TestListGrid bottomListGrid) {
        Button button = new Button("Populate Bottom ListGrid");
 
        button.setAutoFit(true);
        button.setLayoutAlign(Alignment.CENTER);
 
        button.addClickHandler(new ClickHandler() {
 
            @Override
            public void onClick(ClickEvent event) {
                bottomListGrid.populate();
            }
        });
        return button;
    }
 
    private static class TestListGrid extends ListGrid {
        public TestListGrid(boolean populate) {
 
            setWidth(1000);
            setHeight(250);
 
            setAutoFitFieldWidths(true);
 
            /**
             * WITHOUT THIS SETTING FIELD1 IS EXPANDED
             */
            setAutoFitExpandField(FIELD2);
 
            ListGridField field1 = new ListGridField(FIELD1);
 
            ListGridField field2 = new ListGridField(FIELD2);
 
            setFields(field1, field2);
 
            if (populate) {
                populate();
            }
        }
 
        public void populate() {
            ArrayList<ListGridRecord> records = new ArrayList<ListGridRecord>();
 
            for (Entry<String, String> entry : data.entrySet()) {
                ListGridRecord record = new ListGridRecord();
                record.setAttribute(FIELD1, entry.getKey());
                record.setAttribute(FIELD2, entry.getValue());
                records.add(record);
            }
 
            setData(records.toArray(new ListGridRecord[0]));
        }
 
    }
 
}

[Isomorphic]

Did you read the docs for autoFitExpandField? It tells you how the field is chosen.

In your new code, the first field is chosen and that's what the docs say will happen.

In your old code, if you had removed the width:"*" setting, it would work as we described.