BatchUploader grid body height too low / calculation unclear

[Blama]

Hi Isomorphic,

I'm using v10.1p_2016-10-09 and it's not clear to me how Batch Uploader calculates it's inner grid body height.
As you can see in the screenshot of my app, the grid does not use all of the available space. The dotted red line is the one created by the Developer Console when clicking the BatchUploader under the "Watch" tab.




The height number itself seems to be arbitrary (773 for the whole BatchUploader, 463 for the grid).

I get the same feeling (arbitrary height) when looking at your BatchUploader-sample.

Important notes:

• For my BU, I use batchUploader.setHeight100(); and batchUploader.setWidth100();
• If setting
  

  ListGrid propertiesGrid = new ListGrid();
  	propertiesGrid.setAutoFitWidthApproach(AutoFitWidthApproach.BOTH);
  	propertiesGrid.setHeight100();
  	batchUploader.setAutoChildProperties("grid", propertiesGrid);

  the grid is way to high and introduces scrolling in the containing window.

Thank you & Best regards
Blama

[Isomorphic]

We were not able to reproduce this issue, and according to our tests, the grid is taking up the remaining space assigned to the BatchUploader as expected, and there is no additional space under the control buttons. But if you continue seeing this issue, please post your testing code, so that we can test it.

Regards
Isomorphic Software

[Blama]

Hi Isomorphic,

please see this BuiltInDS-based testcase using v10.1p_2016-10-19/PowerEdition:

BuiltInDS.java (+add batchUpload.ds.xml to ds directory and load it in BuiltInDS.html):

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.Version;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.BatchUploader;
import com.smartgwt.client.widgets.IButton;
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.form.fields.TextItem;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS implements EntryPoint {
    private VLayout mainLayout;
    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();
            }
        });

        mainLayout = new VLayout(20);
        mainLayout.setWidth100();
        mainLayout.setHeight100();

        recreateBtn = new IButton("Recreate");
        recreateBtn.setWidth(200);
        recreateBtn.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                recreate(true);
            }
        });

        mainLayout.addMember(recreateBtn);
        mainLayout.draw();
    }

    private void recreate(boolean withProgressiveLoading) {
        Window w = new Window();
        w.setWidth("95%");
        w.setHeight("95%");
        w.setMembersMargin(0);
        w.setModalMaskOpacity(70);
        w.setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
        w.setTitle("BatchUploader ListGrid vertical sizing" + w.getTitle());
        w.setShowMinimizeButton(false);
        w.setIsModal(true);
        w.setShowModalMask(true);
        w.centerInPage();

        BatchUploader bu = new BatchUploader();
        bu.setUploadDataSource(DataSource.get("employees"));
        TextItem ti1 = new TextItem("TI1", "TextItem 1");
        TextItem ti2 = new TextItem("TI2", "TextItem 2");
        bu.setUploadFormItems(ti1, ti2);

        w.addItem(bu);
        w.show();
    }
}

For me, this results in this output for the attached csv (any should be fine).
See again the red dotted border that shows that the BatchUploader itself is way higher than the inner ListGrid and therefore wasting space.
Here, the inner ListGrid is now 500px high, so there might be some explicit setting for height or maxHeight?



Best regards
Blama

[Isomorphic]

We've tested your test case, and were not able to reproduce the issue. According to our results, in the Developer Console ('Watch' tab), we see that the BatchUploader measures 635px of height, where 500px corresponds to the ListGrid, and the DynamicForm with the TextItem fields and buttons takes up the remaining space. So, could you please clarify what you are seeing?, or perhaps, you are doing additional steps that produce this issue.

Regards
Isomorphic Software

[Blama]

Hi Isomorphic,

I'm sorry, I must have made a copy&paste error. The code misses these two lines:

        bu.setWidth100();
        bu.setHeight100();

In total it is:

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.Version;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.BatchUploader;
import com.smartgwt.client.widgets.IButton;
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.form.fields.TextItem;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS implements EntryPoint {
    private VLayout mainLayout;
    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();
            }
        });

        mainLayout = new VLayout(20);
        mainLayout.setWidth100();
        mainLayout.setHeight100();

        recreateBtn = new IButton("Recreate");
        recreateBtn.setWidth(200);
        recreateBtn.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                recreate(true);
            }
        });

        mainLayout.addMember(recreateBtn);
        mainLayout.draw();
    }

    private void recreate(boolean withProgressiveLoading) {
        Window w = new Window();
        w.setWidth("95%");
        w.setHeight("95%");
        w.setMembersMargin(0);
        w.setModalMaskOpacity(70);
        w.setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
        w.setTitle("BatchUploader ListGrid vertical sizing" + w.getTitle());
        w.setShowMinimizeButton(false);
        w.setIsModal(true);
        w.setShowModalMask(true);
        w.centerInPage();

        BatchUploader bu = new BatchUploader();
        bu.setUploadDataSource(DataSource.get("employees"));
        TextItem ti1 = new TextItem("TI1", "TextItem 1");
        TextItem ti2 = new TextItem("TI2", "TextItem 2");
        bu.setWidth100();
        bu.setHeight100();
        bu.setUploadFormItems(ti1, ti2);

        w.addItem(bu);
        w.show();
    }
}

Here is a current screenshot (FF26 Dev mode). The ListGrid height is 500px, the GridBody height is 473px.


Best regards
Blama

[Blama]

Hi Isomorphic,

I experimented with these lines, that clearly are correct w.r.t. the autoChild mechanism, as some do have an affect on the generated widget.

        ListGrid propertiesGrid = new ListGrid();
        // propertiesGrid.setMaxHeight(10000); // Has NO visible effect (with or without setHeight)
        // propertiesGrid.setHeight("*"); // Has NO effect
        // propertiesGrid.setHeight(250); // Has an effect!
        // propertiesGrid.setAutoFitWidthApproach(AutoFitWidthApproach.BOTH); // Has an effect!
        bu.setAutoChildProperties("grid", propertiesGrid);

Something really seems to be fixed with the height here. Perhaps GridBody (not ListGrid) does have a value set?

Best regards
Blama

[Isomorphic]

Hi,

fisrt, the "grid" property of the BatchUploader is an autochild, that has some default values. One of those defaults is the height, initially set to 500px.
Then, as you pointed out, the correct way to modify this default value is to use the autoChild mechanism:

 ListGrid propertiesGrid = new ListGrid();
  propertiesGrid.setHeight(250);
  bu.setAutoChildProperties("grid", propertiesGrid);

You said in your previous post that "propertiesGrid.setHeight(250);" is not working for you, but it is working for us, could you please confirm that this is still not working for you?

[Blama]

Hi Isomorphic,

in #6 I say, that setHeight(250) indeed does have an effect. setHeight("*") does not have an effect.

This and the working setAutoFitWidthApproach() means the autoChild mechanism is working, but there is a problem with the setHeight("*").

As I don't know the exact size of the window (it also can be maximized) I can't work with a fixed heigth - normally (e.g. a ListGrid in a Layout) this is no problem, but here something seems to be different.

Best regards
Blama

[Isomorphic]

Hi again,

sorry, I missunderstood that setHeight(250) was not working for you. If you need to set relative height you can always use percentage, that is a percentage of the BatchUploader total height.

The reason why "*" is not working is that BatchUploader is not a VLayout, but a VStack, that simply stacks members on the vertical axis without trying to manage their height.

[Blama]

Hi Isomorphic,

I think that setting a relative height should work for me (because my uploadFormFields are constant and therefore the height of the rest of the BU is constant) and will test this - but this is a manual step that only I will benefit from.
Shouldn't the outermost element of the BatchUploader be a VLayout instead of a VStack?

Best regards
Blama

[Isomorphic]

You can get the same "height control" behavior from a VStack by just setting the vPolicy to "fill".
Having said that, we have discovered that the java class BatchUploader (SGWT) is not extending VStack by mistake, as the SC version does. We have fixed it right now, so if you want to try to use the java BatchUploader.setVPolicy() method you'll have to get the next nightly build dated Octuber 28th.

[Blama]

Hi Isomorphic,

thanks for changing the inheritance here and the hint on vPolicy. Using v10.1p_2016-10-28 and this code I now get the space usage I want:

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.Version;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.types.LayoutPolicy;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.BatchUploader;
import com.smartgwt.client.widgets.IButton;
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.form.fields.TextItem;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS implements EntryPoint {
    private VLayout mainLayout;
    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();
            }
        });

        mainLayout = new VLayout(20);
        mainLayout.setWidth100();
        mainLayout.setHeight100();

        recreateBtn = new IButton("Recreate");
        recreateBtn.setWidth(200);
        recreateBtn.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                recreate(true);
            }
        });

        mainLayout.addMember(recreateBtn);
        mainLayout.draw();
    }

    private void recreate(boolean withProgressiveLoading) {
        Window w = new Window();
        w.setWidth("95%");
        w.setHeight("95%");
        w.setMembersMargin(0);
        w.setModalMaskOpacity(70);
        w.setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
        w.setTitle("BatchUploader ListGrid vertical sizing" + w.getTitle());
        w.setShowMinimizeButton(false);
        w.setIsModal(true);
        w.setShowModalMask(true);
        w.centerInPage();

        BatchUploader bu = new BatchUploader();
        bu.setUploadDataSource(DataSource.get("employees"));
        TextItem ti1 = new TextItem("TI1", "TextItem 1");
        TextItem ti2 = new TextItem("TI2", "TextItem 2");
        bu.setWidth100();
        bu.setHeight100();
        bu.setVPolicy(LayoutPolicy.FILL);
        bu.setUploadFormItems(ti1, ti2);

        w.addItem(bu);
        w.show();
    }
}

Screenshot:




Thank you & Best regards
Blama

[Blama]

Hi Isomorphic,

You can get the same "height control" behavior from a VStack by just setting the vPolicy to "fill".
Having said that, we have discovered that the java class BatchUploader (SGWT) is not extending VStack by mistake, as the SC version does. We have fixed it right now, so if you want to try to use the java BatchUploader.setVPolicy() method you'll have to get the next nightly build dated Octuber 28th.

it seems that this change is not present in current 6.1d (SNAPSHOT_v11.1d_2017-03-13).

Best regards
Blama

[Blama]

Also

setUploadQuoteString(uploadQuoteString);
setUploadDelimiter(uploadDelimiter);
setUploadEncoding(uploadCharset);

are not present in Eclipse.

[Blama]

Hi Isomorphic,

please disregard the last two posts. After seeing the methods in the Javadocs I got suspicious. It seems I did not change my Build Path Variables from an old 6.0p to current 6.1d directory after starting to test my application with 6.1d.

Best regards
Blama