CellMenu

Right click to display context menu for cells. To invoke the cell menu in a keyboard-accessible manner, use the SPACE key when the cell is focused.

Default cell menu items

The Cell menu feature provides only one item by default:

And all the other items are populated by the other features:

>

first level of submenu

Customizing the menu items

The menu items in the Cell menu can be customized, existing items can be changed or removed, and new items can be added. This is handled using the items config of the feature.

Add extra items for all columns:

const grid = new Grid({
    features : {
        cellMenu : {
            items : {
                extraItem : {
                    text   : 'My cell item',
                    icon   : 'fa fa-bus',
                    weight : 200,
                    onItem : () => ...
                }
            }
        }
    }
});

It is also possible to add items using columns config. See examples below.

Add extra items for a single column:

const grid = new Grid({
    columns: [
        {
            field         : 'city',
            text          : 'City',
            cellMenuItems : {
                columnItem : {
                    text   : 'My unique cell item',
                    icon   : 'fa fa-beer',
                    onItem : () => ...
                }
            }
        }
    ]
});

Remove existing item:

const scheduler = new Scheduler({
    features : {
        cellMenu : {
            items : {
                removeRow : false
            }
        }
    }
});

Customize existing item:

const scheduler = new Scheduler({
    features : {
        cellMenu : {
            items : {
                removeRow : {
                    text : 'Throw away',
                    icon : 'fa fa-dumpster'
                }
            }
        }
    }
});

It is also possible to manipulate the default items and add new items in the processing function:

const grid = new Grid({
    features : {
        cellMenu : {
            processItems({items, record}) {
                if (record.cost > 5000) {
                    items.myItem = { text : 'Split cost' };
                }
            }
        }
    }
});

Full information of the menu customization can be found in the "Customizing the Cell menu and the Header menu" guide.

This feature is enabled by default.

Keyboard shortcuts

This feature has the following default keyboard shortcuts:

For more information on how to customize keyboard shortcuts, please see our guide.