Skip to main content

DHTMLX Spreadsheet. Custom context menu example

This demo shows how to customize the built-in context menu in DHTMLX Spreadsheet by adding a custom item with an icon and handling its click event through the contextMenu API.

Live example​

const spreadsheet = new dhx.Spreadsheet("spreadsheet");
spreadsheet.parse(dataset);
// adding a new menuItem into the context menu
spreadsheet.contextMenu.data.add({
    icon: "mdi mdi-eyedropper-variant",
    value: "Paint format",
    id: "paint-format"
});

let savedStyles;

spreadsheet.contextMenu.events.on("click", function (id) {
    if (id === "paint-format") {
        savedStyles = spreadsheet.getStyle(spreadsheet.selection.getSelectedCell());
    }
});

<link rel="stylesheet" href="//cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css?v=3.1.4">

<!-- component container -->
<div style="height: 100%; max-width:100%" id="spreadsheet"></div>

<!-- dataset -->

<script>
const dataset = {
        styles: {
            bold: {
                "font-weight": "bold",
            },
            right: {
                "justify-content": "flex-end",
                "text-align": "right",
            },
        },
        data: [
            { cell: "a1", value: "Country", css:"bold" },
            { cell: "b1", value: "Product", css:"bold" },
            { cell: "c1", value: "Price", css:"right bold" },
            { cell: "d1", value: "Amount", css:"right bold" },
            { cell: "e1", value: "Total Price", css:"right bold" },

            { cell: "a2", value: "Ecuador" },
            { cell: "b2", value: "Banana" },
            { cell: "c2", value: 6.68, format: "currency" },
            { cell: "d2", value: 430 },
            { cell: "e2", value: 2872.4, format: "currency" },

            { cell: "a3", value: "Belarus" },
            { cell: "b3", value: "Apple" },
            { cell: "c3", value: 3.75, format: "currency" },
            { cell: "d3", value: 600 },
            { cell: "e3", value: 2250, format: "currency" },

            { cell: "a4", value: "Peru" },
            { cell: "b4", value: "Grapes" },
            { cell: "c4", value: 7.69, format: "currency" },
            { cell: "d4", value: 740 },
            { cell: "e4", value: 5690.6, format: "currency" },

            { cell: "a5", value: "Egypt" },
            { cell: "b5", value: "Orange" },
            { cell: "c5", value: 5.86, format: "currency" },
            { cell: "d5", value: 560 },
            { cell: "e5", value: 3281.6, format: "currency" },

            { cell: "a6", value: "South Africa" },
            { cell: "b6", value: "Grapefruit" },
            { cell: "c6", value: 8.58, format: "currency" },
            { cell: "d6", value: 800 },
            { cell: "e6", value: 6864, format: "currency" },

            { cell: "a7", value: "Spain" },
            { cell: "b7", value: "Lemon" },
            { cell: "c7", value: 9.12, format: "currency" },
            { cell: "d7", value: 650 },
            { cell: "e7", value: 5928, format: "currency" },

            { cell: "a8", value: "Iran" },
            { cell: "b8", value: "Pomegranate" },
            { cell: "c8", value: 9.67, format: "currency" },
            { cell: "d8", value: 300 },
            { cell: "e8", value: 2901, format: "currency" }
        ],
    };
</script>

Spreadsheet users expect right-click menus that go beyond basic row and column operations. Teams building project trackers, data entry forms, or financial tools may need application-specific actions accessible directly from the cell context menu without navigating through toolbars.

DHTMLX Spreadsheet exposes a customizable context menu through the spreadsheet.contextMenu object. This example adds a custom "Paint format" item via contextMenu.data.add() with an icon and unique ID. The contextMenu.events.on("click", handler) method then handles clicks on that item and saves the style of the currently selected cell via getStyle() and selection.getSelectedCell().

Solution overview​

  1. Initialize the Spreadsheet with new dhx.Spreadsheet("spreadsheet") and load data via spreadsheet.parse(dataset).
  2. Add a custom item with spreadsheet.contextMenu.data.add({ id: "paint-format", value: "Paint format", icon: "mdi mdi-eyedropper-variant" }).
  3. Handle clicks with spreadsheet.contextMenu.events.on("click", function(id) { ... }) and branch logic by item ID.
  4. When "paint-format" is clicked, read the currently selected cell with spreadsheet.selection.getSelectedCell() and save its style via spreadsheet.getStyle(...).

Key points​

  • Default menu structure: The built-in context menu includes items with IDs like "lock", "clear", "columns", "rows", "sort", and "link", each with nested sub-items for granular actions (e.g., "clear-value", "clear-styles", "clear-all").
  • Icon libraries: Spreadsheet uses Material Design Icons by default, but you can reference any icon font loaded on the page (e.g., Font Awesome) when adding or updating menu items.
  • Selection integration: Inside the click handler, combine spreadsheet.selection.getSelectedCell() with getStyle() to read the formatting of the cell that triggered the context menu.

API reference​

  • contextMenu.data.add(): Adds a new item to the context menu with id, value, icon, and optional nested items.
  • contextMenu.events.on(): Subscribes to context menu events like "click" to handle user interactions.
  • getStyle(): Returns styles applied to the selected cell or range.

Additional resources​