Skip to main content

DHTMLX Spreadsheet. Custom menu bar item example

This demo shows how to add a custom item to the DHTMLX Spreadsheet menu bar using the menu.data collection API and handle its actions.

Live example​

const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
    menu: true
});

spreadsheet.parse(dataset);
//adding a new menuItem
spreadsheet.menu.data.add({
    id: "validate",
    value: "Validate",
    items: [
        {
            id: "isNumber",
            value: "Is number"
        },
        {
            id: "isEven",
            value: "Is even number"
        }
    ]
});

function checkValue(check) {
    spreadsheet.eachCell(function (cell, value) {
        if (!check(value)) {
            spreadsheet.setStyle(cell, { background: "#e57373" });
        } else {
            spreadsheet.setStyle(cell, { background: "" });
        }
    }, spreadsheet.selection.getSelectedCell());
};

spreadsheet.menu.events.on("click", function (id) {
    switch (id) {
        case "isNumber":
            checkValue(function (value) { return !isNaN(value) });
            break;
        case "isEven":
            checkValue(function (value) { return value % 2 === 0 });
            break;
    }
});
<!-- 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>

Applications with domain-specific workflows, such as data validation or custom actions, benefit from extending the menu with project-specific commands. The menu data API lets developers augment the default menu structure without rebuilding the entire component.

This example enables the menu with menu: true, then calls spreadsheet.menu.data.add() to insert a new top-level Validate menu item with nested items for isNumber and isEven. When one of those items is clicked, the sample iterates over the selected cells and highlights values that do not match the chosen validation rule.

Solution overview​

  1. Create the Spreadsheet with new dhx.Spreadsheet("spreadsheet", { menu: true })
  2. Call spreadsheet.menu.data.add({ id: "validate", value: "Validate", items: [...] }) to add a top-level menu with subitems
  3. Listen for spreadsheet.menu.events.on("click", ...) and react to the selected custom item id
  4. Use spreadsheet.eachCell() and spreadsheet.setStyle() to highlight cells in the current selection based on the chosen validation rule

Key points​

  • Menu extension: The sample adds a custom Validate menu group without replacing the default menu structure
  • Nested items: Use the items array property to define submenu entries nested under a parent menu item
  • Selection-aware action: The custom menu handlers operate on the currently selected cells through spreadsheet.selection.getSelectedCell()

API reference​

  • menu: Enables or disables the top menu bar.
  • Menu customization: Guide for adding, updating, and removing menu items.

Additional resources​