# GC.Spread.Sheets.ContextMenu.MenuView

## Content

# Class: MenuView

[Sheets](../modules/GC.Spread.Sheets).[ContextMenu](../modules/GC.Spread.Sheets.ContextMenu).MenuView

## Table of contents

### Constructors

- [constructor](GC.Spread.Sheets.ContextMenu.MenuView#constructor)

### Methods

- [createMenuItemElement](GC.Spread.Sheets.ContextMenu.MenuView#createmenuitemelement)
- [getCommandOptions](GC.Spread.Sheets.ContextMenu.MenuView#getcommandoptions)
- [maxHeight](GC.Spread.Sheets.ContextMenu.MenuView#maxheight)
- [scrollable](GC.Spread.Sheets.ContextMenu.MenuView#scrollable)

## Constructors

### <a id="constructor" name="constructor"></a> constructor

• **new MenuView**()

Represents MenuView

## Methods

### <a id="createmenuitemelement" name="createmenuitemelement"></a> createMenuItemElement

▸ **createMenuItemElement**(`menuItemData`): `HTMLElement`

create menuitem view

**`example`**
```javascript
window.addEventListener('load', function() {
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
    var activeSheet = spread.getActiveSheet();
    activeSheet.setValue(0,0,'please right click');
    activeSheet.setValue(1,0,'you will find there is a new context menu item "Change BackColor"');
    activeSheet.setValue(2,0,'click it');
    var selectWithABackgroundColor = {
        text: "Change BackColor",
        name: "changeColorWithBg",
        workArea: "viewport",
        subMenu: [
             {
                 name: "selectColorPicker",
                 command: "changeBackColor"
             }
         ]
    };
    spread.contextMenu.menuData.push(selectWithABackgroundColor);
    var changeBackgroundColorCommand = {
        canUndo: false,
        execute: function(spread, options) {
            spread.suspendPaint();
            spread.options.backColor = options.commandOptions;
            spread.resumePaint();
        }
    };
    var commandManager = spread.commandManager();
    commandManager.register("changeBackColor", changeBackgroundColorCommand, null, false, false, false, false);
    function CustomMenuView() {
    }
    CustomMenuView.prototype = new GC.Spread.Sheets.ContextMenu.MenuView();
    CustomMenuView.prototype.createMenuItemElement = function(menuItemData) {
        var self = this;
        if (menuItemData.name === "selectColorPicker") {
            var containers = GC.Spread.Sheets.ContextMenu.MenuView.prototype.createMenuItemElement.call(self, menuItemData);
            var supMenuItemContainer = containers[0];
            while (supMenuItemContainer.firstChild) {
                supMenuItemContainer.removeChild(supMenuItemContainer.firstChild);
            }
            var colorPicker = createColorpicker();
            supMenuItemContainer.appendChild(colorPicker);
            return supMenuItemContainer;
        } else {
            var menuItemView = GC.Spread.Sheets.ContextMenu.MenuView.prototype.createMenuItemElement.call(self, menuItemData);
            return menuItemView;
        }
    };
    CustomMenuView.prototype.getCommandOptions = function(menuItemData, host, event) {
       if (menuItemData && menuItemData.name === "selectColorPicker") {
           var ele = event.target || event.srcElement;
           return ele.style.backgroundColor;
       }
    };
    CustomMenuView.prototype.getCommandOptions = function(menuItemData, host, event) {
        if (menuItemData && menuItemData.name === "selectColorPicker") {
            var ele = event.target || event.srcElement;
            return ele.style.backgroundColor;
        }
    };
    var colors = ['rgb(255,255,255)', 'rgb(0,255,255)', 'rgb(255,0,255)', 'rgb(255,255,0)', 'rgb(255,0,0)',
        'rgb(0,255,0)', 'rgb(0,0,255)', 'rgb(0,0,0)'];
    function createColorpicker() {
        var colorPicker = document.createElement('div');
        colorPicker.className = 'colorPickerContent';
        for (var j = 0; j < 8; j++) {
            var colorDom = document.createElement("div");
            colorDom.className = 'colorDom';
            colorDom.style.width = 14 + 'px';
            colorDom.style.height = 14 + 'px';
            colorDom.style.margin = "0 0 0 6px";
            colorDom.style.display = 'inline-block';
            colorDom.style['backgroundColor'] = colors[j];
            colorPicker.appendChild(colorDom);
        }
        return colorPicker;
    }
    spread.contextMenu.menuView = new CustomMenuView();
});
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `menuItemData` | [`IMenuItemData`](../interfaces/GC.Spread.Sheets.ContextMenu.IMenuItemData) | the data of the menu item which needs to be shown |

#### Returns

`HTMLElement`

menuitem view

___

### <a id="getcommandoptions" name="getcommandoptions"></a> getCommandOptions

▸ **getCommandOptions**(`menuItemData`, `host`, `event`): `any`

get command options of specified menu item

**`example`**
```javascript
// Example : Basic usage of getCommandOptions to pass custom data to a command
// Add a custom menu item to the context menu
var customMenuItem = {
    text: "Custom Action",
    name: "customAction",
    command: "customCommand",
    workArea: "viewport"
};
spread.contextMenu.menuData.push(customMenuItem);
// Register a command that will receive the custom options
var customCommand = {
    canUndo: true,
    execute: function(context, options, isUndo) {
        if (isUndo) {
            // Handle undo logic
            console.log("Undo custom action");
        } else {
            // Handle normal execution
            console.log("Custom action executed with options:", options);
            if (options && options.customData) {
                alert("Custom data passed: " + options.customData);
            }
        }
    }
};
spread.commandManager().register("customCommand", customCommand);
// Create a custom menu view that overrides getCommandOptions
class CustomMenuView extends GC.Spread.Sheets.ContextMenu.MenuView {
    getCommandOptions(menuItemData, host, event) {
        // For our custom menu item, return custom data
        if (menuItemData.name === "customAction") {
            return {
                customData: "This is custom data from getCommandOptions",
                timestamp: new Date().toISOString(),
                clickedElement: event.target.tagName
            };
        }
        // For all other menu items, use the default behavior
        return super.getCommandOptions(menuItemData, host, event);
    }
}
// Apply the custom menu view
spread.contextMenu.menuView = new CustomMenuView();
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `menuItemData` | [`IMenuItemData`](../interfaces/GC.Spread.Sheets.ContextMenu.IMenuItemData) | the data of the menu item which be clicked |
| `host` | `Object` | the container of the menu item which be clicked |
| `event` | `Object` | the mouse click event |

#### Returns

`any`

command options of specified menu item

___

### <a id="maxheight" name="maxheight"></a> maxHeight

▸ **maxHeight**(`value?`): `number` \| `void`

**`description`** get or set context menu's max height

**`example`**
```javascript
spread.contextMenu.menuView.maxHeight(120);
```

#### Parameters

| Name | Type |
| :------ | :------ |
| `value?` | `number` |

#### Returns

`number` \| `void`

represent the number of context menu's max height

___

### <a id="scrollable" name="scrollable"></a> scrollable

▸ **scrollable**(`value?`): `boolean` \| `void`

**`description`** get or set context menu scrollable

**`example`**
```javascript
spread.contextMenu.menuView.maxHeight(120);
spread.contextMenu.menuView.scrollable(true);
```

#### Parameters

| Name | Type |
| :------ | :------ |
| `value?` | `boolean` |

#### Returns

`boolean` \| `void`

represent whether the context menu can scroll