Bug with setSortByGroupFirst(true) and setGroupByField("")

[pavo123]

Hi Isomorphic,
I have a very strange problem.
When I use invalidateCache() or refreshData() on ListGrid this happen:


Action icons (Hlayout contains three ImgButton) and also every "Button" disappear!

I tried to create a test case but I did not succeed.

This is just happening in the current smartGWT version, not in the last one.
When I comment "setSortByGroupFirst(true)" or setGroupByField("lifeSpan") in ListGrid properties then it is working!
Do you have any idea what can cause this problem?

Best regards
Pavo

[Isomorphic]

From your animation, it looks like the buttons don’t disappear but something partially occludes them. If that element that is occluding them stays on the screen you can identify it with either our Developer Console (Watch Tab) or built-in browser tools.

If that’s not really what the problem is, maybe try again to capture the problem as an animation.

[pavo123]

Hi Isomorphic,

I should have been more precise. Please look at this:

[pavo123]

I think you can now see the problem.
This is just a problem in the current version (v12.0p_2018-08-09), not in (6.1p).
These are the properties of my ListGrid:

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.AdvancedCriteria;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.AutoFitWidthApproach;
import com.smartgwt.client.types.GroupStartOpen;
import com.smartgwt.client.types.OperatorId;
import com.smartgwt.client.types.RecordComponentPoolingMode;
import com.smartgwt.client.types.SortDirection;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Button;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.ImgButton;
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;
    private String fakeLGFName = "FAKE_FIELD";
    private String icon = "ICON";

    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(500);
            setHeight(500);
            setMembersMargin(0);
            setModalMaskOpacity(70);
            setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
            setShowMinimizeButton(false);
            setIsModal(true);
            setShowModalMask(true);
            centerInPage();

            final ListGridCustom withoutSetShowPickerIconOnFocusLG = new ListGridCustom();
            withoutSetShowPickerIconOnFocusLG.setHeight(250);

            Button reloadButton = new Button("Reload");

            reloadButton.addClickHandler(new ClickHandler() {
                @Override
                public void onClick(ClickEvent event) {
                    withoutSetShowPickerIconOnFocusLG.invalidateCache();
                }
            });

            addItem(withoutSetShowPickerIconOnFocusLG);
            addItem(reloadButton);
        }
    }

    private class ListGridCustom extends ListGrid {
        public ListGridCustom() {
            setAutoFitFieldsFillViewport(true);
            setShowClippedValuesOnHover(true);
            setAutoFitWidthApproach(AutoFitWidthApproach.BOTH);
            setDataSource("animals");
            setFetchOperation("sads");

            setAutoFetchData(false);
            setShowRecordComponents(true);
            setShowRecordComponentsByCell(true);
            setRecordComponentPoolingMode(RecordComponentPoolingMode.RECYCLE);
            setPoolComponentsPerColumn(true);
            setRecordComponentHeight(22);
            setCanReorderFields(true);
            setGroupStartOpen(GroupStartOpen.ALL);
            setSortByGroupFirst(true);
            setAllowFilterExpressions(true);
            setHoverWidth(1000);
            setHeight(250);
            setGroupSortDirection(SortDirection.ASCENDING);
            setGroupByField("lifeSpan");

            ListGridField fakeFieldLGF = new ListGridField(fakeLGFName);
            ListGridField iconLGF = new ListGridField(icon);
            ListGridField testLGF = new ListGridField("scientificName");

            ListGridField lifeSpanLGF = new ListGridField("lifeSpan");
            lifeSpanLGF.setHidden(true);
            lifeSpanLGF.setCanHide(true);
            // setFields(fakeFieldLGF, testLGF, lifeSpanLGF);
            setFields(fakeFieldLGF, iconLGF, testLGF, lifeSpanLGF);
            fetchData(new AdvancedCriteria("scientificName", OperatorId.LESS_OR_EQUAL, "M"));
        }

        @Override
        protected Canvas createRecordComponent(final ListGridRecord record, Integer colNum) {
            return updateRecordComponent(record, colNum, null, true);
        }

        @Override
        public Canvas updateRecordComponent(ListGridRecord record, Integer colNum, Canvas component, boolean recordChanged) {
            String fieldName = this.getFieldName(colNum);
            if (fakeLGFName.equals(fieldName)) {
                IButton testIB = new IButton();
                String svgPath = "[SKINIMG]/NavigationBar/";
                testIB.setIcon(svgPath + "miniNav_up.svg");
                testIB.setBackgroundColor("green");
                testIB.setWidth(95);
                testIB.setTitle("Title");
                testIB.setTooltip("Tool tip");
                return testIB;
            } else if (icon.equals(fieldName)) {
                ActionImgButton imgButton = new ActionImgButton("src.png", "button", new ClickHandler() {
                    @Override
                    public void onClick(ClickEvent event) {
                        SC.logWarn("button1 clicked!");
                    }
                });
                ActionImgButton imgButton2 = new ActionImgButton("src.png", "button", new ClickHandler() {
                    @Override
                    public void onClick(ClickEvent event) {
                        SC.logWarn("button2 clicked!");
                    }
                });
                HLayout hLayout = new HLayout();
                hLayout.setWidth(18);
                hLayout.setHeight(18);
                hLayout.setMembers(imgButton, imgButton2);

                return hLayout;
            } else
                return null;
        };

    }

    private class ActionImgButton extends ImgButton {
        public ActionImgButton(String src, String prompt, ClickHandler ClickHandler) {
            setShowDown(true);
            setShowRollOver(true);
            setShowDown(false);
            setShowRollOver(false);
            setCanHover(true);
            setShowFocused(false);
            setShowFocusedAsOver(false);
            setLayoutAlign(Alignment.CENTER);
            setSrc(src);
            setPrompt(prompt);
            setHeight(16);
            setWidth(16);
            addClickHandler(ClickHandler);
        }
    }
}

But unfortunately, as I have already said, I have not been able to reproduce the problem in test case.
I hope you can help me with this.
Thanks in advance!


Best regards
Pavo

[Isomorphic]

The usage of updateRecordComponent is slightly off here - the expectation with recordComponents is that createRecordComponent will initially create the component to display in the record/cell, and then updateRecordComponent may be used to customize that same component for display in a different cell. As such that method will typically return the component passed in rather than creating a new component each time it is called.
This is useful to reuse already-created components, rather than always creating new components and potentially leaking the older ones as different parts of a grid are rendered, etc. The documentation for listGrid.recordComponentPoolingMode covers this.

Having said that, it's not entirely clear just from eyeballing the code you've shared here why the code you'd be seeing the effect you are seeing (or why this would have anything to do with the grouping properties you've mentioned).

You mention:

But unfortunately, as I have already said, I have not been able to reproduce the problem in test case.

As such, we're assuming that if we run the above snippet of code we will not be seeing the problem in action.

We'd recommend the following steps:
- Obviously if you can make a standalone test case we can run which demonstrates the problem, that'd be ideal

- Failing that, we'd recommend you try simplifying your createRecordComponent / updateRecordComponent methods to simply create a visible Canvas with a background color (say) in createRecordComponent, and to have updateRecordComponent simply return the component passed in and see if the problem goes away. If so, you can probably get this working by reworking your code to take the same pattern with the meaningful components you actually want to use

- Alternatively, if changing the createRecordComponent pattern has no impact, it'd be worth identifying why the widgets are disappearing in your actual app. From your screencast, we can't see a few details in the watch tab - it would be worth looking at the "drawn" and "visible" columns in that table to see if the framework believes widgets are drawn/visible.
If not, you can also use the Observe / Time Methods section at the bottom of that tab to see what's causing them to get hidden (or cleared) if not. While they are still visible, enter the ID of the widget in the Object field, and "clear" in the Method field, and hit Trace method. Do the same with "hide". Now back on the Results tab you should see a stack trace when the thing gets cleared or hidden - that may reveal some more insight about what's going on

Hopefully some of this helps you get to the bottom of your issue!

Regards
Isomorphic Software

[pavo123]

Hi Isomorphic,

Thank you for your tips, they helped me a lot. I was on the wrong track all the time, I just focused on grouping.
Now you can see the problem in action:

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.AdvancedCriteria;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.AutoFitWidthApproach;
import com.smartgwt.client.types.GroupStartOpen;
import com.smartgwt.client.types.OperatorId;
import com.smartgwt.client.types.RecordComponentPoolingMode;
import com.smartgwt.client.types.SortDirection;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Button;
import com.smartgwt.client.widgets.Canvas;
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.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.grid.ListGridRecord;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS extends VLayout implements EntryPoint {
    private IButton recreateBtn;
    private String fakeLGFName = "FAKE_FIELD";
    private String icon = "ICON";

    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(500);
            setHeight(500);
            setMembersMargin(0);
            setModalMaskOpacity(70);
            setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
            setShowMinimizeButton(false);
            setIsModal(true);
            setShowModalMask(true);
            centerInPage();

            final ListGridCustom testLGC = new ListGridCustom();
            testLGC.setHeight(250);

            Button reloadButton = new Button("Reload");

            reloadButton.addClickHandler(new ClickHandler() {
                @Override
                public void onClick(ClickEvent event) {
                    testLGC.invalidateCache();
                }
            });

            addItem(testLGC);
            addItem(reloadButton);
        }
    }

    private class ListGridCustom extends ListGrid {
        public ListGridCustom() {
            setAutoFitFieldsFillViewport(true);
            setShowClippedValuesOnHover(true);
            setAutoFitWidthApproach(AutoFitWidthApproach.BOTH);
            setDataSource("animals");
            setFetchOperation("wwwwwwwww");

            setAutoFetchData(false);
            setShowRecordComponents(true);
            setShowRecordComponentsByCell(true);
            setRecordComponentPoolingMode(RecordComponentPoolingMode.RECYCLE);
            setPoolComponentsPerColumn(true);
            setRecordComponentHeight(22);
            setCanReorderFields(true);
            setGroupStartOpen(GroupStartOpen.ALL);
            setSortByGroupFirst(true);
            setAllowFilterExpressions(true);
            setHoverWidth(1000);
            setHeight(250);
            setGroupSortDirection(SortDirection.ASCENDING);
            setGroupByField("lifeSpan");

            ListGridField fakeFieldLGF = new ListGridField(fakeLGFName);
            ListGridField iconLGF = new ListGridField(icon);
            ListGridField testLGF = new ListGridField("scientificName");

            ListGridField lifeSpanLGF = new ListGridField("lifeSpan");
            lifeSpanLGF.setHidden(true);
            lifeSpanLGF.setCanHide(true);
            setFields(fakeFieldLGF, iconLGF, testLGF, lifeSpanLGF);
            fetchData(new AdvancedCriteria("scientificName", OperatorId.LESS_OR_EQUAL, "M"));
        }

        @Override
        protected Canvas createRecordComponent(final ListGridRecord record, Integer colNum) {
            return updateRecordComponent(record, colNum, null, true);
        }

        @Override
        public Canvas updateRecordComponent(ListGridRecord record, Integer colNum, Canvas component, boolean recordChanged) {
            String fieldName = this.getFieldName(colNum);
            if (fakeLGFName.equals(fieldName)) {
                if (component != null) {
                    TestIButton mtplb = (TestIButton) component;
                    mtplb.setData(record);
                    return mtplb;
                } else {
                    return new TestIButton(record);
                }

            } else
                return null;
        };

    }

    private class TestIButton extends IButton {
        protected ListGridRecord record;

        public TestIButton(ListGridRecord record) {
            setData(record);
            setHeight(22);
            setWidth(115);
            setIconSize(18);
            setAlign(Alignment.LEFT);
            setIcon("src.png");
        }

        public void setData(ListGridRecord record) {
            this.record = record;
        }
    }
}

But still if I delete e.g. the line of code 109(setGroupByField("lifeSpan")) then it works as expected.

Best regards
Pavo

[Isomorphic]

Thanks for the test case. We've made a change to address this issue.
Please try the next nightly build, dated Aug 23 or above
Regards
Isomorphic Software

[pavo123]

Hi Isomorphic,

you're welcome. It's working now, thanks! This one was very important to me.

Best regards
Pavo