[Blama]

Hi Isomorphic,

this is what the code from #14 looks like for me in GC70:


Best regards
Blama

[Isomorphic]

Ah - this did not reproduce with another DataSource, but now we see you are setting this up to ensure an empty result.

The problem is that minHeight does nothing in this context (see docs), so you are seeing the default height of 100. Use height and the problem goes away.

[Blama]

Hi Isomorphic,

with respect to the use case, this is looking good now, thanks.
Is there anything you would do different? I'm asking in order to understand best practices with SmartClient.

isc.ListGrid.create({
    ID: "itemList",
    width: 600,
    height: 600,
    alternateRecordStyles: true,
    dataSource: supplyItemWithOps,
    fetchOperation: "outputsLimitedFetch",
    autoFetchData: true,
    canHover: true,
    showHover: false,
    fields: [{
            name: "itemName"
        },
        {
            name: "SKU"
        },
        {
            name: "category"
        }
    ],
    hoverWidth: 500,
    cellHover: function(record, rowNum, colNum) {
        x = EventHandler.getX();
        y = EventHandler.getY();
        isc.logWarn("Hovered: " + rowNum + "/" + colNum);
        isc.logWarn("Coordinates: " + x + "/" + y);
        if (record.category != "Pastes and Gum") {
            w = isc.Window.create({
                width: 800,
                showHeader: false,
                autoSize: true,
                autoDraw: false,
                isModal: true,
                showModalMask: true,
                modalMaskOpacity: 60,
                dismissOnOutsideClick: true,
                closeClick: function() {
                    this.Super("closeClick", arguments)
                },
                items: [
                    lg = isc.ListGrid.create({
                        width: "100%",
                        minHeight: 150,
                        autoDraw: false,
                        showFilterEditor: true,
                        autoFitMaxHeight: 500,
                        autoFetchData: false,
                        autoFitData: "vertical",
                        dataSource: "supplyItemWithOps"
                    })
                ]
            });
            lg.fetchData({
                category: record.category
            }, function(dsResponse, data, dsRequest) {
                w.draw();
                w.placeNear(x, y);
                lg.draw();
            });
        }
    }
});

Best regards
Blama

[Blama]

The problem is that minHeight does nothing in this context (see docs), so you are seeing the default height of 100. Use height and the problem goes away.

Hi Isomorphic,

thank you, setting heighti does work, but the docs of minHeight IMHO explicitly state that they are for this use case?

Minimum height for the entire list (smaller than this doesn't tend to work very well). If not set, this value will be defaulted when draw is called to something reasonable based on whether we're showing the filter editor, header, summary rows, and/or the empty message.

Best regards
Blama

[Isomorphic]

We would not recommend using a Window for a hover. It looks like you're doing that to get a modal mask, which we think looks bad. Aside from this, the Window seems a waste of a component, since you are removing all of the visual pieces of it anyway.

See canvas.minHeight for the behavior of minHeight. ListGrid is the same, the docs simply say it has a dynamic default.

[Blama]

Hi Isomorphic,

thanks for the hint on clickMask basically everywhere.
I now have this code, which does not use Window. I changed it to draw directly (so that the user can see there is something happening in the application while it loads).
But then it seems placeNear() does not work at all. You can see this best for if you scroll that the 1st "Account books" entry is visible and then hover it. The popup-ListGrid is drawn as tall as expected but then not moved on screen.

isc.ListGrid.create({
    ID: "itemList",
    width: 600,
    height: 600,
    dataSource: supplyItemWithOps,
    fetchOperation: "outputsLimitedFetch",
    autoFetchData: true,
    canHover: true,
    showHover: false,
    fields: [{
            name: "itemName"
        },
        {
            name: "SKU"
        },
        {
            name: "category"
        }
    ],
    cellHover: function(record, rowNum, colNum) {
        x = EventHandler.getX();
        y = EventHandler.getY();
        isc.logWarn("Hovered: " + rowNum + "/" + colNum);
        isc.logWarn("Coordinates: " + x + "/" + y);
        if (record.category != "Pastes and Gum") {
            lg = isc.ListGrid.create({
                width: 800,
                height: 150,
                left: x,
                top: y,
                minHeight: 150,
                // autoDraw: false,
                showFilterEditor: true,
                autoFitMaxHeight: 500,
                autoFetchData: false,
                autoFitData: "vertical",
                dataSource: "supplyItemWithOps",
                implicitCriteria: {
                    category: record.category
                },
            });
            lg.fetchData(null, function(dsResponse, data, dsRequest) {
                // lg.draw();
                lg.placeNear(x, y);
                lg.showClickMask("lg.markForDestroy()", "hard", lg);
            });
        }
    }
});

Best regards
Blama

[Isomorphic]

The ListGrid will only have its autoFitData-derived size once data has been fetched *and* it has redrawn to show the data.

[Blama]

Hi Isomorphic,

thanks. But how do I wait for this event or react to it? I don't think there is a handler/callback for it.
So some timer in the fetch-callback?

Best regards
Blama

[Isomorphic]

Not sure what you mean. We just double-checked and a call to redraw() before placeNear() works as expected.

[Blama]

Hi Isomorphic,

sorry, I did not understand that you meant I have to call redraw() and that this is executed automatically after the data arrives.
With a manual redraw() call it is working like expected, thank you.

With this code I have a working hover that is clickable:

isc.ListGrid.create({
    ID: "itemList",
    width: 600,
    height: 600,
    dataSource: supplyItemWithOps,
    fetchOperation: "outputsLimitedFetch",
    autoFetchData: true,
    canHover: true,
    showHover: false,
    fields: [{
            name: "itemName"
        },
        {
            name: "SKU"
        },
        {
            name: "category"
        }
    ],
    cellHover: function(record, rowNum, colNum) {
        x = EventHandler.getX();
        y = EventHandler.getY();
        isc.logWarn("Hovered: " + rowNum + "/" + colNum);
        isc.logWarn("Coordinates: " + x + "/" + y);
        if (record.category != "Pastes and Gum") {
            lg = isc.ListGrid.create({
                width: 800,
                height: 150,
                left: x,
                top: y,
                minHeight: 150,
                // autoDraw: false,
                showFilterEditor: true,
                autoFitMaxHeight: 500,
                autoFetchData: false,
                autoFitData: "vertical",
                dataSource: "supplyItemWithOps",
                implicitCriteria: {
                    category: record.category
                },
            });
            lg.fetchData(null, function(dsResponse, data, dsRequest) {
                lg.redraw();
                lg.placeNear(x, y);
                lg.showClickMask("lg.markForDestroy()", "hard", lg);
            });
        }
    }
});

Best regards
Blama

[Blama]

Hi Isomorphic,

how would I configure opacity settings for the clickMask to this without using a window, like you suggest in #20? Window has modalMask and opacity settings for it, all other components only have the clickMask inherited from Canvas.
Canvas.componentMask seems to be something different.

Or did you mean in #20 that you don't like the click mask in general for a non-Window?
IMHO it is difficult to block the UI and NOT show a mask, like I do currently. So in that case, I'd need to show a clickMask with mode: soft.

But this has another problem: I could get multiple hovers and if so, only the last hover is destroyed by a click.
I came up with this mutex (see below) to show only one hover.

Is this the correct way of doing so and if not, how would you show a mask with opacity?

[B]topLG[/B] = isc.ListGrid.create({
[B]//ID: "itemList",[/B]
[B]popupShown: false,[/B]
    width: 600,
    height: 600,
    dataSource: supplyItemWithOps,
    fetchOperation: "outputsLimitedFetch",
    autoFetchData: true,
    canHover: true,
    showHover: false,
    fields: [{
            name: "itemName"
        },
        {
            name: "SKU"
        },
        {
            name: "category"
        }
    ],
    cellHover: function(record, rowNum, colNum) {
        x = EventHandler.getX();
        y = EventHandler.getY();
        isc.logWarn("Hovered: " + rowNum + "/" + colNum);
        isc.logWarn("Coordinates: " + x + "/" + y);
        if (record.category != "Pastes and Gum" [B]&& !topLG.popupShown[/B]) {
            this.popupShown = true;
            lg = isc.ListGrid.create({
                width: 800,
                height: 150,
                left: x,
                top: y,
                minHeight: 150,
                // autoDraw: false,
                showFilterEditor: true,
                autoFitMaxHeight: 500,
                autoFetchData: false,
                autoFitData: "vertical",
                dataSource: "supplyItemWithOps",
                implicitCriteria: {
                    category: record.category
                },
                // not applicable: componentMaskDefaults: {opacity:10, backgroundColor:"black"}
            });
            lg.fetchData(null, function(dsResponse, data, dsRequest) {
[B]lg.popupShown = true;[/B]
                lg.redraw();
                lg.placeNear(x, y);
                lg.showClickMask(
                    function() {
                        lg.markForDestroy();
[B]topLG.popupShown = false;[/B]
                    }, [B]"soft"[/B], lg);
            });
        }
    }
});

Best regards
Blama

[Isomorphic]

Yes, we definitely would not recommend showing something like an auto-dismissing hover with a translucent background mask. The purpose of that translucent mask is to show that the rest of the UI is not reachable until you are done with the dialog. Here exactly the opposite is true. For the same reason, menus, drop-downs such as selects and comboboxes, and other non-blocking controls do not show a mask.

[Blama]

Hi Isomorphic,

OK, that means you'll always use a clickMask with mode: soft. I'll do so as well then and could see this also in the showcase.

W.r.t my usage of the mutex, is this how you'd do this as well? Or any corrections to #26 compared to #25?
Purpose of the question here is still to learn how basic use cases are solved in JS, like the reference here. I got that using explicit IDs like in the showcase is not a good idea for components, but only for final widgets where I can gurantee that they are always shown a maximum of once at a time.

Thank you & Best regards
Blama

[Isomorphic]

This is a basic programming practice and not an area where we offer "best practices".

[Blama]

@all,

if you find this thread via search, this coming feature of v13.0 might be interesting as well.

Best regards
Blama