Our blazing fast Grid component built with pure JavaScript


Post by hbrizard »

Hello,

Trying to pop the context menu of a row record on the grid (scheduler) with a left cell click instead of right click but for the sake of simplicity, here is a sample taken from https://bryntum.com/examples/grid/basic/

Another support ticket shows to use

    event.id = event.record.id;
    grid.features.cellMenu.showContextMenu(event);

but it does not work.
Support ticket : viewtopic.php?f=51&t=19532&p=96642&hilit=showcontextmenu#p96642

With update to the example with following code :

import { Grid, DataGenerator } from '../../build/grid.module.js?459414';
import shared from '../_shared/shared.module.js?459414';

new Grid({

appendTo : 'container',

features : {
    group : false,
    cellMenu : true
},

// Headers will ripple on tap in Material theme
ripple : {
    delegate : '.b-grid-header'
},

listeners : {
    cellclick : function(event) { 
        event.id = event.record.id;
        event.source.features.cellMenu.showContextMenu(event)
    }
},

columns : [
    {
        text   : 'Name',
        field  : 'name',
        flex   : 2,
        editor : {
            type     : 'textfield',
            required : true
        }
    }, {
        text  : 'Age',
        field : 'age',
        width : 100,
        type  : 'number'
    }, {
        text  : 'City',
        field : 'city',
        flex  : 1
    }, {
        text  : 'Food',
        field : 'food',
        flex  : 1
    }, {
        text     : 'Color (not sortable)',
        field    : 'color',
        flex     : 1,
        sortable : false,
        renderer({ cellElement, value }) {
            // renderer that sets text color = text
            cellElement.style.color = value;
            return value;
        }
    }
],

data : DataGenerator.generateData(50)
});

an error shows :
Uncaught TypeError: Cannot read properties of undefined (reading 'x')

I've also tried ways proposed here :https://github.com/bryntum/support/issues/868 without success.

Any help would be appreciated to simply being able to reuse the same contextMenu (which works on right click) but on a button click, a cell click, an action column, or whichever..

Thanks,
Hugo


Post by hbrizard »

More details about the error from purchased licence (unminified)

schedulerpro.module.js:118418 Uncaught TypeError: Cannot read properties of undefined (reading 'isLocation')
at AccountScheduler.normalizeCellContext (schedulerpro.module.js:118418:1)
at AccountScheduler.focusCell (schedulerpro.module.js:112928:1)
at CellMenu.showContextMenu (schedulerpro.module.js:95146:1)
at AccountScheduler.onEllipsisRecordClick (Main.js:585:1)
at ActionColumn.callback (schedulerpro.module.js:2940:1)
at ActionColumn.onCellClick (schedulerpro.module.js:91131:1)
at AccountScheduler.triggerCellMouseEvent (schedulerpro.module.js:111754:1)
at AccountScheduler.onElementClick (schedulerpro.module.js:111850:1)
at AccountScheduler.onElementClick (schedulerpro.module.js:165540:1)
at functionChainRunner (schedulerpro.module.js:40928:1)


Post by tasnim »

Please check this https://bryntum.com/docs/scheduler-pro/api/Scheduler/feature/EventMenu#config-triggerEvent instead of checking showContextMenu

Here is an example :

features : {
        cellMenu : {
            // show contextMenu on cell click
            triggerEvent : 'click'
        }
    }

Post by hbrizard »

Interesting avenue Tasnim, but that's not quite what I need to accomplish.

I need both the right click and another "manual" way to trigger the menu. For sake of example, I mentioned above on cellClick but the real thing is that I have the 3 dots (see below) in an ActionColumn that should trigger the menu, as well as the right-click if elsewhere.

Screen Shot 2022-06-17 at 8.23.07 AM.png
Screen Shot 2022-06-17 at 8.23.07 AM.png (22.75 KiB) Viewed 866 times

So if I use the triggerEvent with 'click', I am losing the right-click.

How can I have both ?

Thanks,


Post by hbrizard »

Hello Alex,

I need to open the grid's (resources) menu. As each record is unique and I have a processItems function within the cellMenu feature.

I need to call the exact same menu of contextMenu, but also when clicking the 3 dots.

Sometimes, it will be 1 menuItem, sometime 2, sometime 3... all dealt with in processItems.

Using the targetElement or even this approach as I am already doing with the Header won't work, since I need to pass the record :

EventHelper.on({
                    element  : me.element,
                    delegate : '.b-filter-bar-field',
                    click : me.onGroupHeaderAddRessource,
                    capture : true,
                    thisObj : me
                });

All in all, really need to have the exact same contextMenu (coming from the grid's cellMenu feature), for a right click, or from a 3 dots click.

Thanks,

Hugo


Post by hbrizard »

Forgot some screenshots to illustrate :

With 1, 2 or 3 menuItems based on record's nature.

Screen Shot 2022-06-17 at 8.39.55 AM.png
Screen Shot 2022-06-17 at 8.39.55 AM.png (30.84 KiB) Viewed 864 times
Screen Shot 2022-06-17 at 8.40.01 AM.png
Screen Shot 2022-06-17 at 8.40.01 AM.png (29.07 KiB) Viewed 864 times
Screen Shot 2022-06-17 at 8.40.07 AM.png
Screen Shot 2022-06-17 at 8.40.07 AM.png (33.98 KiB) Viewed 864 times

Post by alex.l »

Not possible to manually open cellMenu, you have to create your own menu for your button and use that. https://bryntum.com/docs/scheduler-pro/api/Core/widget/Button#config-menu

You can open eventMenu, but not cellMenu at the moment. https://bryntum.com/docs/scheduler-pro/api/Scheduler/feature/EventMenu#function-showContextMenuFor
I've opened a feature request to make it possible https://github.com/bryntum/support/issues/4827

All the best,
Alex


Post by hbrizard »

Ok since not possible, I'll ask the question in a different angle then to achieve what I need to achieve.

Say I define a Menu class, as you are suggesting, and bind it to a button menu, can I have the cellMenu feature from the grid call that same menu too ?

Otherwise, it feels like I have a definition of a menu within the cellMenu feature and another identical menu duplicated to be called on the button click.

Not sure if my question is clear but in the end, would it be possible to have something like :

MyMenu = new Menu() ....
grid.features = {
    cellMenu : new MyMenu() // to point to same component rather than maintening 2 distinct menus..
}

Thanks,

Hugo


Post by tasnim »

I'm not sure, what exactly you want? But If I'm guessing correctly then you can achieve it like this:

const menu = new Menu({
    autoShow  : false,
    items     : [
        {
            icon: 'b-fw-icon b-icon-add',
            text: 'Add'
        },
        {
            icon: 'b-fw-icon b-icon-trash',
            text: 'Remove'
        },
        {
            icon    : 'b-fw-icon b-icon-lock',
            disabled: true,
            text    : 'I am disabled'
        },
        {
            text: 'Sub menu',
            menu: [{
                icon: 'b-fw-icon b-fa-play',
                text: 'Play'
            }]
        }
    ],
    // Method is called for all ancestor levels
    onItem({ item }) {
        Toast.show('You clicked ' + item.text);
    }
});
cellMenu : {
            items : {
                removeRow : false,
                cut       : false,
                copy      : false,
                ...menu.items
            }
        }

Please also check these :
https://bryntum.com/docs/scheduler-pro/guide/Scheduler/customization/contextmenu
https://bryntum.com/docs/scheduler-pro/api/Core/widget/Menu
https://bryntum.com/docs/scheduler-pro/api/Grid/feature/CellMenu


Post Reply