# 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`**
```
$(document).ready(function () {
   var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
   function CustomMenuView() {
  }
  CustomMenuView.prototype = new GC.Spread.Sheets.ContextMenu.MenuView();
  CustomMenuView.prototype.createMenuItemElement = function (menuItemData) {
     var self = this;
     var menuItemView = GC.Spread.Sheets.ContextMenu.MenuView.prototype.createMenuItemElement.call(self, menuItemData);
     if (menuItemData.name === "markWithABg") {
         var subMenuView = menuItemView.find(".gc-ui-contextmenu-container");
         $(subMenuView[0]).colorpicker();
     }
     return menuItemView;
 };
});
```

#### 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`**
```
  var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
  function CustomMenuView() {
  }
  CustomMenuView.prototype = new GC.Spread.Sheets.ContextMenu.MenuView();
  CustomMenuView.prototype.getCommandOptions = function (menuItemData, host, event) {
     if (menuItemData &amp;&amp; menuItemData.name === "markWithABg") {
         var ele = event.target || event.srcElement;
         if (ele.className.indexOf("colorpicker-div-inner-colorcell") !== -1) {
             ele = ele.parentElement;
         }
         return ele.style.background;
     }
  };
```

#### 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`**
```
  var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
  spread.contextMenu.menuView.maxHeight(400);
```

#### Parameters

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

#### Returns

`number` \| `void`

number | void

___

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

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

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

**`example`**
```
  var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
  spread.contextMenu.menuView.scrollable(false);
```

#### Parameters

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

#### Returns

`boolean` \| `void`

boolean | void