LIstGrid.rollOverCanvas as MenuButton

[erikfisch]

v12.0p_2020-02-02/LGPL Deployment

Chrome Version 81.0.4044.92 (Official Build) (64-bit)

Hello, we are trying to have a MenuButton as the rollOverCanvas of a ListGrid. We can get the button up and working, but the issue seems to be that when you click the menu button, and the menu drops down, once you hover the dropped-down menu the actual menu button disappears. If you go slow enough the menu will also disappear and the hover will trigger the rollOverCanvas of the next roll. Is this a reasonable thing that we want to do? And if so how would you recommend we do so without this strange feeling behavior?

We have also tried record components instead of a rollOver where they are just hidden at first, and on rowOver we show them and rowOut we hide them, but that had very similar implications as well. Any advice would be greatly appreciated! Thanks in advance.

Here is a working example:

        isc.ListGrid.create({
            height: 500,
            width: 600,
            showRollOverCanvas: true,
            useCellRollOvers: false,
            showRollUnderCanvas:false,
            defaultFields: [
                { name: "someValue", type: "text" },
                { name: "otherValue" },
            ],
            initWidget: function () {
                this.Super("initWidget", arguments);

                this.setData([
                    { someValue: "first" },
                    { someValue: "second" },
                    { someValue: "third" },
                ]);
            },
            rollOverCanvasConstructor: isc.HLayout,
            rollOverCanvasProperties: {
                width: 288,
                snapTo: "R",
                initWidget: function () {
                    this.Super("initWidget", arguments);

                    this.addAutoChild("testButton");
                },
                testButtonDefaults: {
                    _constructor: isc.MenuButton,
                    title: "some nice menu button", 
                    initWidget: function () {
                        this.Super("initWidget", arguments);

                        this.menu = isc.Menu.create({
                            autoDraw: false,
                            showShadow: true,
                            shadowDepth: 10,
                            data: [
                                {title: "New", keyTitle: "Ctrl+N" },
                                {title: "Open", keyTitle: "Ctrl+O" },
                                {isSeparator: true},
                                {title: "Save", keyTitle: "Ctrl+S" },
                            ]
                        });
                    }
                }
            }
        })

[Blama]

Hi erikfisch,

we are doing a similar thing with recordComponents and IconMenuButton + setMenu(). This is working fine.
We do display the button the whole time, though, and do no display-on-over stuff. Don't know if this helps.

Best regards
Blama

[Isomorphic]

The MenuButton disappears because your mouse has left the row, so the rolloverCanvas should be hidden.

This interaction is kind of ambiguous just from a UE perspective. If the menu is open, what should happen if the user goes to another row? Obviously not two MenuButtons, so then, presumably while the menu is open, you don't want rollover to occur at all (no styling changes for rolling over other rows, for example), and you'd want to block other interactivity, like mousewheel scrolling.

To achieve that, what you could do is that when the MenuButton is clicked, you just create another MenuButton exactly on top of it, as a top-level component (not part of the grid), and make it modal via showClickMask(). This will block other interactivity until the user either clicks on the menu or clicks outside of it, at which point you just get rid of the duplicate menu and proceed.

[erikfisch]

Thanks for the feedback - I suppose we will have to try the duplicated button on click. I understand why the behavior is happening, I was just hoping that with a menu button specifically there was a way to "freeze" the rowOut/rowOver from happening if the user is still also hovering over the menu from a different row. I will attempt the approach you have suggested and see how that goes - thank you.

Blama - I appreciate the feedback and we do know that works, it is just a matter of requirements for our project that they only show on a rowOver. Thanks for the response though.

[Isomorphic]

There *is* a mechanism to freeze the rollover - a clickmask - which is what we suggested. This also freezes all other interactions which must be frozen, such as scrolling (as we mentioned).

You might be able to just call showClickMask() on the existing MenuButton, but we haven't tried that. The extra MenuButton will definitely work.

[erikfisch]

I am sorry I did not comprehend what you had said completely. After re-reading what you initially suggested, you are correct - you did suggest to use showClickMask(), but you were suggesting to use in conjunction with the duplicated menu button - which I was not ready to go that far yet, so I did not think it was relevant.

However, after having you clarify what the click mask could provide, I tried that - without the duplicated menu button and the desired user interaction is achieved. I appreciate the clarification. The following code is what worked:

        isc.ListGrid.create({
            height: 500,
            width: 600,
            showRollOverCanvas: true,
            useCellRollOvers: false,
            showRollUnderCanvas: false,
            defaultFields: [
                { name: "someValue", type: "text" },
                { name: "otherValue" },
            ],
            initWidget: function () {
                this.Super("initWidget", arguments);

                this.setData([
                    { someValue: "first" },
                    { someValue: "second" },
                    { someValue: "third" },
                ]);
            },
            rollOverCanvasConstructor: isc.HLayout,
            rollOverCanvasProperties: {
                width: 288,
                snapTo: "R",
                initWidget: function () {
                    this.Super("initWidget", arguments);

                    this.addAutoChild("testButton");
                },
                testButtonDefaults: {
                    _constructor: isc.MenuButton,
                    title: "some nice menu button",
                    click: function () {
                        var menuButton = this;

                        this.showClickMask(function () {
                            menuButton.hideClickMask();
                        });
                    },
                    initWidget: function () {
                        this.Super("initWidget", arguments);

                        this.menu = isc.Menu.create({
                            autoDraw: false,
                            showShadow: true,
                            shadowDepth: 10,
                            menuButton: this,
                            itemClick: function (item, colNum) {
                                this.menuButton.hideClickMask();

                                // do something else based on the item
                            },
                            data: [
                                { title: "New", keyTitle: "Ctrl+N" },
                                { title: "Open", keyTitle: "Ctrl+O" },
                                { isSeparator: true },
                                { title: "Save", keyTitle: "Ctrl+S" },
                            ]
                        });
                    }
                }
            }
        })

[Blama]

Hi erikfisch,

that is looking great, thanks for sharing!

Best regards
Blama