How to add and remove context menu items in the Spreadsheet

1 min read

Description

This knowledge base explains the way to add and remove the context menu items in the Spreadsheet.

Solution

It can be achieved by using “addItem()” and “removeItem()” methods. You can modify the context menu items in Cell, Row Header, Column Header and Pager.

HTML

<div id="Spreadsheet"></div>

$("#Spreadsheet").ejSpreadsheet({
    loadComplete: "onLoadComplete"
});

RAZOR

@(Html.EJ().Spreadsheet<object>("Spreadsheet")  
    .ClientSideEvents(  
        events => events.LoadComplete("onLoadComplete")  
    )  
)

ASPX

<ej:spreadsheet id="Spreadsheet" runat="server">
    <ClientSideEvents LoadComplete="onLoadComplete" />
</ej:spreadsheet>

function onLoadComplete(args) {
    if (!this.isImport) {
        // To add the new item in the context menu in Cell  
        this.XLCMenu.addItem(ej.Spreadsheet.ContextMenu.Cell, [{ "text": "New item", "id": "newitem1" }], 'insert');
        // To remove the item cut and copy in the context menu in Cell  
        this.XLCMenu.removeItem(ej.Spreadsheet.ContextMenu.Cell, ["Cut", "Copy"]);
        // To add the new item in the context menu at Row header  
        this.XLCMenu.addItem(ej.Spreadsheet.ContextMenu.RowHeader, [{ "text": "New item", "id": "newitem1" }], 'insert');
        // To add the new item in the context menu at Column header
        this.XLCMenu.addItem(ej.Spreadsheet.ContextMenu.ColumnHeader, [{ "text": "New item", "id": "newitem1" }], 'insert');
        // To add the new item in the context menu in Pager
        this.XLCMenu.addItem(ej.Spreadsheet.ContextMenu.Footer, [{ "text": "New item", "id": "newitem1" }], 'insert');
    }
}

The following screenshots displays the Spreadsheet after rendering it with above code snippet,

Spreadsheet context menu cell preview