6.1p: ListGrid: interacting with hoverComponent

[Blama]

Hi Isomorphic,

please see this modified sample (v11.1p_2018-11-13).

How can I achieve the following things?

• Set hoverWidth dynamically. In the sample it does not work at all. In my application it works, but only for the next hoverComponent after the current one, making the width setting wrong most of the time (reason for this requirement: Depending on some type field I do display a different DataSource with a different column count and therefore need a different width)
• Interact with the hoverComponent:
  Here, if I scroll down to a Category="General office product" entry, the hoverComponent for those entries has a scrollbar.
  I can only scroll it via the mouse wheel and only if the hoverComponent happens to get generated under the cursor, which is only the case if I'm over very right of the normal "Category" column on the normal ListGrid.
  I'd need the hoverComponent to be some kind of "window" I can interact with. Perhaps an invisible clickMask around the hoverComponent, that removes the hoverComponent on click outside of it and otherwise allows interaction? Currently any mouse movement away from the normal ListGrid's cell removes the hoverComponent.
  
  (Additional report here: The hoverComponent-ListGrid itself is too high, so that after scrolling a certain amount, the scrollbar current scrollbar position is not visible. So it is not possible to scroll all data into view.)

isc.ListGrid.create({
    ID: "itemList",
    width: 500,
    height: 300,
    alternateRecordStyles: true,

    dataSource: supplyItemWithOps,
    fetchOperation: "outputsLimitedFetch",
    autoFetchData: true,
    fields: [{
            name: "itemName"
        },
        {
            name: "SKU"
        },
        {
            name: "category"
        }
    ],
    canHover: true,
    showHover: true,
    showHoverComponents: true,
    hoverWidth: 1200,
    getCellHoverComponent: function (record, rowNum, colNum) {
        if (record.category == "Pastes and Gum") {
            itemList.hoverWidth = 500;
            isc.logWarn("Width set to 500");
        } else {
            itemList.hoverWidth = 1000;
            isc.logWarn("Width set to 1000");
        }
        this.rowHoverComponent = isc.ListGrid.create({
            autoFetchData: false,
            autoFitData: "vertical",
            dataSource: "supplyItemWithOps"
        });
        this.rowHoverComponent.fetchData({
            category: record.category
        }, null, {
            showPrompt: false
        });
        return this.rowHoverComponent;
    }
});

Thank you & Best regards
Blama

[Isomorphic]

You can achieve both goals by instead reacting to the hover events and displaying your own hover.

Note that if you set field.hoverWidth you should be able to achieve per-field hoverWidths, and we will check on why the ListGrid-wide setting isn't being picked up when changed as expected, however, there is no way to have an interactive hover with the built-in hover system, so you still need to take the approach above.

[Blama]

Hi Isomorphic,

thanks for the hint on how to solve this.

W.r.t. the potential bug: I do show the hover for only one field, but depending on the field-value I do show a different hover.

Best regards
Blama

[Isomorphic]

We've fixed the hoverWidth problem you noted - your sample will behave as you expect in builds dated November 15 and later

[Blama]

Hi Isomorphic,

I can see the issue is fixed in the sample using v11.1p_2018-11-15. I'll test it in my application, where the effect was a bit different, as well.

Nevertheless I'll have to switch to your suggested own-hover-after-event-suggestion eventually.

Thank you & Best regards
Blama

[Blama]

Hi Isomorphic,

out of interest I looked into the hover-handling you are suggesting.
I think, in SmartGWT it is something related to:

        addHoverHandler(new HoverHandler() {
            @Override
            public void onHover(HoverEvent event) {
            }
        });

but how do I get the hovered ListGrid, column, and row here from event?

Also, in SmartClient, the hover here works as before, which is unexpected. I'd expect it to be broken and only show a Developer Console log entry.

isc.ListGrid.create({
    ID: "itemList",
    width: 500,
    height: 300,
    alternateRecordStyles: true,
    dataSource: supplyItemWithOps,
    fetchOperation: "outputsLimitedFetch",
    autoFetchData: true,
    fields: [{
            name: "itemName"
        },
        {
            name: "SKU"
        },
        {
            name: "category"
        }
    ],
    canHover: true,
    showHover: true,
    showHoverComponents: true,
    hoverWidth: 1200,
[B]    handleHover: function () {
        isc.logWarn("Hovered");
    },[/B]
    getCellHoverComponent: function (record, rowNum, colNum) {
        if (record.category == "Pastes and Gum") {
            itemList.hoverWidth = 500;
            isc.logWarn("Width set to 500");
        } else {
            itemList.hoverWidth = 1000;
            isc.logWarn("Width set to 1000");
        }
        this.rowHoverComponent = isc.ListGrid.create({
            autoFetchData: false,
            autoFitData: "vertical",
            dataSource: "supplyItemWithOps"
        });
        this.rowHoverComponent.fetchData({
            category: record.category
        }, null, {
            showPrompt: false
        });
        return this.rowHoverComponent;
    }
});

What am I doing wrong?

Thank you & Best regards
Blama

[Isomorphic]

The current grid row and column of the event are always available via getEventRow() and getEventColumn().

Second question: the API is hover(), not handleHover(), see docs. There is an internal method handleHover() that you are happening to hit, so you get your log statement plus the standard functionality, but this is not a supported approach and will break other functionality.

[Blama]

Hi Isomorphic,

thanks for #1.

For #2, I tried this:

isc.ListGrid.create({
    ID: "itemList",
    width: 500,
    height: 300,
    alternateRecordStyles: true,
    dataSource: supplyItemWithOps,
    fetchOperation: "outputsLimitedFetch",
    autoFetchData: true,
    fields: [{
            name: "itemName"
        },
        {
            name: "SKU"
        },
        {
            name: "category"
        }
    ],
    hoverWidth: 500,
    hover: function () { // Method
        isc.logWarn("Hovered");
        this.stopHover(); [B]// Test because otherwise the next log entry is only generated if I move away from the ListGrid with the mouse before, not for a cell change[/B]
        return false; [B]// Test because original hover() is Boolean. Is this necessary[/B]
    }
    // hover: "isc.logWarn('Hovered')", // Test as string function, just to try it.
});

It shows the log entry, but in order to see a 2nd log entry I need to move away from the ListGrid with the mouse before. It does not display it for a cell change.

Best regards
Blama

[Isomorphic]

Correct. You are using canvas.hover, which has that exact documented behavior. There are also cellHover and rowHover events on ListGrid.

[Blama]

Hi Isomorphic,

thanks, getting nearer and nearer to the solution.

Following code is working as expected for records in the top of the ListGrid.
For records in the lower half I have the hover is placed too high in the page.
I assume that I somehow have to get the ListGrid height in after the fetch in a callback and then apply some top-setting to the window?
Is there a method for Windows like Menu.showContextMenu(), that does the necessary computations? If not, is my code correct so far?

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();
        windowX = Math.min(x, Page.getWidth() - 800);
        windowY = Math.min(y, Page.getHeight() - 500);
        isc.logWarn("Hovered: " + rowNum + "/" + colNum);
        isc.logWarn("Coordinates: " + x + "/" + y);
        if (record.category != "Pastes and Gum") {
            isc.Window.create({
                width: 800,
                left: windowX,
                top: windowY,
                showHeader: false,
                autoSize: true,
                isModal: true,
                showModalMask: true,
                modalMaskOpacity: 60,
                dismissOnOutsideClick: true,
                closeClick: function() {
                    this.Super("closeClick", arguments)
                },
                items: [
                    isc.ListGrid.create({
                        width: "100%",
                        showFilterEditor: true,
                        autoFitMaxHeight: 500,
                        autoFetchData: true,
                        autoFitData: "vertical",
                        dataSource: "supplyItemWithOps",
                        initialCriteria: {
                            "category": record.category
                        }
                    })
                ]
            });
        }
    }
});

Thank you & Best regards
Blama

[Isomorphic]

Seems like you are not aware of Canvas.placeNear().

[Blama]

Hi Isomorphic,

thanks, again a step further.

Problems I see:

• If there are records to that the Window reaches the lower end of the screen. the Window is placed a too low, so that not everything is visible. With FullHD, this happens for records on the lower end for me for categories "Rollfix glue", "Account books". Latter one has MANY records and you can see that you can the scrollbar-knob out of view.
• During ListGrid data load, only the top half of the ListGrid's "[WHEEL] Loading data" loading message is visible.

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();
        windowX = Math.min(x, Page.getWidth() - 800);
        windowY = Math.min(y, Page.getHeight() - 500);
        isc.logWarn("Hovered: " + rowNum + "/" + colNum);
        isc.logWarn("Coordinates: " + x + "/" + y);
        if (record.category != "Pastes and Gum") {
            w = isc.Window.create({
                width: 800,
                left: windowX,
                top: windowY,
                showHeader: false,
                autoSize: true,
                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"
                    })
                ]
            });
            w.placeNear(x, y);
            lg.fetchData({
                category: record.category
            }, function(dsResponse, data, dsRequest) {
                lg.draw();
            });
        }
    }
});

Best regards
Blama

[Blama]

Hi Isomorphic,

the 2nd issue is most likely a bug and also visible with this code. I assume it's related to autoFitData.

lg = isc.ListGrid.create({
    width: "100%",
    minHeight: 150,
    showFilterEditor: true,
    autoFitMaxHeight: 500,
    autoFetchData: true,
    autoFitData: "vertical",
    dataSource: "supplyItemWithOps",
    initialCriteria: {
        category: "NOT FOUND"
    }
});

Best regards
Blama

[Blama]

Hi Isomorphic,

more detail: It's related to showFilterEditor in combination with autoFitData.

lg = isc.ListGrid.create({
    width: "100%",
    minHeight: 450,
    showFilterEditor: true, // No issue, if you comment this line
    autoFitMaxHeight: 500,
    autoFetchData: true,
    autoFitData: "vertical",
    dataSource: "supplyItemWithOps",
    initialCriteria: {
        category: "NOT FOUND"
    }
});

Best regards
Blama

[Isomorphic]

The first problem is that you are attempting placeNear before records have been fetched, so the Window size changes after placement.

We're not sure what situation you're saying reproduces the second claimed problem. The code you provided in isolation doesn't.