# GC.Spread.Sheets.CellTypes.Base

## Content

# Class: Base

[Sheets](../modules/GC.Spread.Sheets).[CellTypes](../modules/GC.Spread.Sheets.CellTypes).Base

## Hierarchy

- **`Base`**

  ↳ [`Button`](GC.Spread.Sheets.CellTypes.Button)

  ↳ [`ButtonList`](GC.Spread.Sheets.CellTypes.ButtonList)

  ↳ [`CheckBox`](GC.Spread.Sheets.CellTypes.CheckBox)

  ↳ [`CheckBoxList`](GC.Spread.Sheets.CellTypes.CheckBoxList)

  ↳ [`ColumnHeader`](GC.Spread.Sheets.CellTypes.ColumnHeader)

  ↳ [`ComboBox`](GC.Spread.Sheets.CellTypes.ComboBox)

  ↳ [`Corner`](GC.Spread.Sheets.CellTypes.Corner)

  ↳ [`FileUpload`](GC.Spread.Sheets.CellTypes.FileUpload)

  ↳ [`HyperLink`](GC.Spread.Sheets.CellTypes.HyperLink)

  ↳ [`RadioButtonList`](GC.Spread.Sheets.CellTypes.RadioButtonList)

  ↳ [`RangeTemplate`](GC.Spread.Sheets.CellTypes.RangeTemplate)

  ↳ [`RowHeader`](GC.Spread.Sheets.CellTypes.RowHeader)

  ↳ [`Text`](GC.Spread.Sheets.CellTypes.Text)

## Table of contents

### Constructors

- [constructor](GC.Spread.Sheets.CellTypes.Base#constructor)

### Properties

- [typeName](GC.Spread.Sheets.CellTypes.Base#typename)

### Methods

- [activateEditor](GC.Spread.Sheets.CellTypes.Base#activateeditor)
- [createEditorElement](GC.Spread.Sheets.CellTypes.Base#createeditorelement)
- [deactivateEditor](GC.Spread.Sheets.CellTypes.Base#deactivateeditor)
- [focus](GC.Spread.Sheets.CellTypes.Base#focus)
- [format](GC.Spread.Sheets.CellTypes.Base#format)
- [fromJSON](GC.Spread.Sheets.CellTypes.Base#fromjson)
- [getAutoFitHeight](GC.Spread.Sheets.CellTypes.Base#getautofitheight)
- [getAutoFitWidth](GC.Spread.Sheets.CellTypes.Base#getautofitwidth)
- [getEditorValue](GC.Spread.Sheets.CellTypes.Base#geteditorvalue)
- [getHitInfo](GC.Spread.Sheets.CellTypes.Base#gethitinfo)
- [isEditingValueChanged](GC.Spread.Sheets.CellTypes.Base#iseditingvaluechanged)
- [isImeAware](GC.Spread.Sheets.CellTypes.Base#isimeaware)
- [isReservedKey](GC.Spread.Sheets.CellTypes.Base#isreservedkey)
- [paint](GC.Spread.Sheets.CellTypes.Base#paint)
- [paintContent](GC.Spread.Sheets.CellTypes.Base#paintcontent)
- [parse](GC.Spread.Sheets.CellTypes.Base#parse)
- [processKeyDown](GC.Spread.Sheets.CellTypes.Base#processkeydown)
- [processKeyUp](GC.Spread.Sheets.CellTypes.Base#processkeyup)
- [processMouseDown](GC.Spread.Sheets.CellTypes.Base#processmousedown)
- [processMouseEnter](GC.Spread.Sheets.CellTypes.Base#processmouseenter)
- [processMouseLeave](GC.Spread.Sheets.CellTypes.Base#processmouseleave)
- [processMouseMove](GC.Spread.Sheets.CellTypes.Base#processmousemove)
- [processMouseUp](GC.Spread.Sheets.CellTypes.Base#processmouseup)
- [selectAll](GC.Spread.Sheets.CellTypes.Base#selectall)
- [setEditorValue](GC.Spread.Sheets.CellTypes.Base#seteditorvalue)
- [toJSON](GC.Spread.Sheets.CellTypes.Base#tojson)
- [updateEditor](GC.Spread.Sheets.CellTypes.Base#updateeditor)
- [updateEditorContainer](GC.Spread.Sheets.CellTypes.Base#updateeditorcontainer)
- [updateImeMode](GC.Spread.Sheets.CellTypes.Base#updateimemode)

## Constructors

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

• **new Base**()

Represents the base class for the other cell type classes.

**`example`**
```javascript
// define a custom cell type
function MyCellType(color) {
    GC.Spread.Sheets.CellTypes.Base.apply(this, arguments);
    this.color = color || "orange";
    this.typeName = "MyCellType";
}
MyCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();
MyCellType.prototype.paint = function (ctx, value, x, y, width, height, style, context) {
    var MARGIN = 5,
        plotLeft = x + MARGIN,
        plotWidth = width - 2 * MARGIN,
        plotTop = y + MARGIN,
        plotHeight = height - 2 * MARGIN,
        halfHeight = plotHeight / 2,
        halfWidth = plotWidth / 2;

    ctx.beginPath();
    ctx.moveTo(plotLeft, plotTop + halfHeight);
    ctx.lineTo(plotLeft + halfWidth, plotTop);
    ctx.lineTo(plotLeft + plotWidth, plotTop + halfHeight);
    ctx.lineTo(plotLeft + halfWidth, plotTop + plotHeight);
    ctx.lineTo(plotLeft, plotTop + halfHeight);
    ctx.strokeStyle = this.color;
    ctx.stroke();
};
// set the custom cell type to a cell
sheet.setCellType(0, 0, new MyCellType("green"));
```

## Properties

### <a id="typename" name="typename"></a> typeName

• **typeName**: `string`

Represents the type name string used for supporting serialization.

## Methods

### <a id="activateeditor" name="activateeditor"></a> activateEditor

▸ **activateEditor**(`editorContext`, `cellStyle`, `cellRect`, `context?`): `void`

Activates the editor, including setting properties or attributes for the editor and binding events for the editor.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `editorContext` | `HTMLElement` | The DOM element that was created by the createEditorElement method. |
| `cellStyle` | [`Style`](GC.Spread.Sheets.Style) | The cell's actual style. |
| `cellRect` | [`Rect`](GC.Spread.Sheets.Rect) | The cell's layout information. |
| `context?` | `any` | The context associated with the cell type. See the Remarks for more information. |

#### Returns

`void`

___

### <a id="createeditorelement" name="createeditorelement"></a> createEditorElement

▸ **createEditorElement**(`context?`): `HTMLElement`

Creates a DOM element then returns it.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `context?` | `any` | The context associated with the cell type. See the Remarks for more information. |

#### Returns

`HTMLElement`

Returns a DOM element.

___

### <a id="deactivateeditor" name="deactivateeditor"></a> deactivateEditor

▸ **deactivateEditor**(`editorContext`, `context?`): `void`

Deactivates the editor, such as unbinding events for editor.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `editorContext` | `HTMLElement` | The DOM element that was created by the createEditorElement method. |
| `context?` | `any` | The context associated with the cell type. See the Remarks for more information. |

#### Returns

`void`

___

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

▸ **focus**(`editorContext`, `context?`): `void`

Focuses the editor DOM element.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `editorContext` | `HTMLElement` | The DOM element that was created by the createEditorElement method. |
| `context?` | `any` | The context associated with the cell type. See the Remarks for more information. |

#### Returns

`void`

___

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

▸ **format**(`value`, `format`, `formattedData?`, `context?`): `string`

Formats a value with the specified format to a string.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `value` | `any` | The object value to format. |
| `format` | `string` \| [`GeneralFormatter`](GC.Spread.Formatter.GeneralFormatter) | The format. |
| `formattedData?` | [`FormattedData`](../interfaces/GC.Spread.Sheets.FormattedData) | the formatted data. |
| `context?` | `any` | The context associated with the cell type. See the Remarks for more information. |

#### Returns

`string`

Returns the formatted string.

___

### <a id="fromjson" name="fromjson"></a> fromJSON

▸ **fromJSON**(`settings`): `void`

Loads the object state from the specified JSON string.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `settings` | `any` | The cell type data from deserialization. |

#### Returns

`void`

___

### <a id="getautofitheight" name="getautofitheight"></a> getAutoFitHeight

▸ **getAutoFitHeight**(`value`, `text`, `cellStyle`, `zoomFactor`, `context?`): `number`

Gets a cell's height that can be used to handle the row's automatic fit.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `value` | `any` | The cell's value. |
| `text` | `string` | The cell's text. |
| `cellStyle` | [`Style`](GC.Spread.Sheets.Style) | The cell's actual value. |
| `zoomFactor` | `number` | The current sheet's zoom factor. |
| `context?` | `any` | The context associated with the cell type. See the Remarks for more information. |

#### Returns

`number`

Returns the cell's height that can be used to handle the row's automatic fit.

___

### <a id="getautofitwidth" name="getautofitwidth"></a> getAutoFitWidth

▸ **getAutoFitWidth**(`value`, `text`, `cellStyle`, `zoomFactor`, `context?`): `number`

Gets a cell's width that can be used to handle the column's automatic fit.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `value` | `any` | The cell's value. |
| `text` | `string` | The cell's text. |
| `cellStyle` | [`Style`](GC.Spread.Sheets.Style) | The cell's actual value. |
| `zoomFactor` | `number` | The current sheet's zoom factor. |
| `context?` | `any` | The context associated with the cell type. See the Remarks for more information. |

#### Returns

`number`

Returns the cell's width that can be used to handle the column's automatic fit.

___

### <a id="geteditorvalue" name="geteditorvalue"></a> getEditorValue

▸ **getEditorValue**(`editorContext`, `context?`): `any`

Gets the editor's value.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `editorContext` | `HTMLElement` | The DOM element that was created by the createEditorElement method. |
| `context?` | `any` | The context associated with the cell type. See the Remarks for more information. |

#### Returns

`any`

Returns the editor's value.

___

### <a id="gethitinfo" name="gethitinfo"></a> getHitInfo

▸ **getHitInfo**(`x`, `y`, `cellStyle`, `cellRect`, `context?`): [`IHitTestCellTypeHitInfo`](../interfaces/GC.Spread.Sheets.IHitTestCellTypeHitInfo)

Gets the cell type's hit information.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `x` | `number` | <i>x</i>-coordinate of pointer's current location relative to the canvas. |
| `y` | `number` | <i>y</i>-coordinate of pointer's current location relative to the canvas. |
| `cellStyle` | [`Style`](GC.Spread.Sheets.Style) | The current cell's actual style. |
| `cellRect` | [`Rect`](GC.Spread.Sheets.Rect) | The current cell's layout information. |
| `context?` | `any` | The context associated with the cell type. See the Remarks for more information. |

#### Returns

[`IHitTestCellTypeHitInfo`](../interfaces/GC.Spread.Sheets.IHitTestCellTypeHitInfo)

Returns an object that contains the <i>x</i>, <i>y</i>, <i>row</i>, <i>col</i>, <i>cellRect</i>, and <i>sheetArea</i> parameters, and a value to indicate <i>isReservedLocation</i>.
<i>isReservedLocation</i> is `true` if the hit test is in a special area that the cell type needs to handle; otherwise, `false`.

___

### <a id="iseditingvaluechanged" name="iseditingvaluechanged"></a> isEditingValueChanged

▸ **isEditingValueChanged**(`oldValue`, `newValue`, `context?`): `boolean`

Whether the editing value has changed.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `oldValue` | `any` | Old editing value. |
| `newValue` | `any` | New editing value. |
| `context?` | `any` | The context associated with the cell type. See the Remarks for more information. |

#### Returns

`boolean`

`true` if oldValue equals newValue; otherwise, `false`.

___

### <a id="isimeaware" name="isimeaware"></a> isImeAware

▸ **isImeAware**(`context?`): `boolean`

Whether this cell type is aware of IME.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `context?` | `any` | The context associated with the cell type. See the Remarks for more information. |

#### Returns

`boolean`

`true` if the cell type is aware of IME; otherwise, `false`.

___

### <a id="isreservedkey" name="isreservedkey"></a> isReservedKey

▸ **isReservedKey**(`e`, `context?`): `boolean`

Whether the cell type handles the keyboard event itself.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `e` | `KeyboardEvent` | The KeyboardEvent. |
| `context?` | `any` | The context associated with the cell type. See the Remarks for more information. |

#### Returns

`boolean`

Returns `true` if the cell type handles the keyboard event itself; otherwise, `false`.

___

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

▸ **paint**(`ctx`, `value`, `x`, `y`, `w`, `h`, `style`, `context?`): `void`

Paints a cell on the canvas.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `ctx` | `CanvasRenderingContext2D` | The canvas's two-dimensional context. |
| `value` | `any` | The cell's value. |
| `x` | `number` | <i>x</i>-coordinate relative to the canvas. |
| `y` | `number` | <i>y</i>-coordinate relative to the canvas. |
| `w` | `number` | The cell's width. |
| `h` | `number` | The cell's height. |
| `style` | [`Style`](GC.Spread.Sheets.Style) | The cell's actual style. |
| `context?` | `any` | The context associated with the cell type. See the Remarks for more information. |

#### Returns

`void`

___

### <a id="paintcontent" name="paintcontent"></a> paintContent

▸ **paintContent**(`ctx`, `value`, `x`, `y`, `w`, `h`, `style`, `context?`): `void`

Paints the cell content area on the canvas.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `ctx` | `CanvasRenderingContext2D` | The canvas's two-dimensional context. |
| `value` | `any` | The cell's value. |
| `x` | `number` | <i>x</i>-coordinate relative to the canvas. |
| `y` | `number` | <i>y</i>-coordinate relative to the canvas. |
| `w` | `number` | The cell content area's width. |
| `h` | `number` | The cell content area's height. |
| `style` | [`Style`](GC.Spread.Sheets.Style) | The cell's actual style. |
| `context?` | `any` | The context associated with the cell type. See the Remarks for more information. |

#### Returns

`void`

___

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

▸ **parse**(`text`, `formatStr`, `context?`): `any`

Parses the text with the specified format string to an object.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `text` | `string` | The parse text string. |
| `formatStr` | `string` | The parse format string. |
| `context?` | `any` | The context associated with the cell type. See the Remarks for more information. |

#### Returns

`any`

The parsed object.

___

### <a id="processkeydown" name="processkeydown"></a> processKeyDown

▸ **processKeyDown**(`event`, `context?`): `boolean`

Processes key down in display mode.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `event` | `KeyboardEvent` | The KeyboardEvent. |
| `context?` | `any` | The context associated with the cell type. See the Remarks for more information. |

#### Returns

`boolean`

Returns `true` if the process is successful; otherwise, `false`.

___

### <a id="processkeyup" name="processkeyup"></a> processKeyUp

▸ **processKeyUp**(`event`, `context?`): `boolean`

Processes key up in display mode.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `event` | `KeyboardEvent` | The KeyboardEvent. |
| `context?` | `any` | The context associated with the cell type. See the Remarks for more information. |

#### Returns

`boolean`

Returns `true` if the process is successful; otherwise, `false`.

___

### <a id="processmousedown" name="processmousedown"></a> processMouseDown

▸ **processMouseDown**(`hitInfo`): `boolean`

Processes mouse down in display mode.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `hitInfo` | [`IHitTestCellTypeHitInfo`](../interfaces/GC.Spread.Sheets.IHitTestCellTypeHitInfo) | The hit test information returned by the getHitInfo method. See the Remarks for more information. |

#### Returns

`boolean`

Returns `true` if the process is successful; otherwise, `false`.

___

### <a id="processmouseenter" name="processmouseenter"></a> processMouseEnter

▸ **processMouseEnter**(`hitInfo`): `boolean`

Processes mouse enter in display mode.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `hitInfo` | [`IHitTestCellTypeHitInfo`](../interfaces/GC.Spread.Sheets.IHitTestCellTypeHitInfo) | The hit test information returned by the getHitInfo method. See the Remarks for more information. |

#### Returns

`boolean`

Returns `true` if the process is successful; otherwise, `false`.

___

### <a id="processmouseleave" name="processmouseleave"></a> processMouseLeave

▸ **processMouseLeave**(`hitInfo`): `boolean`

Processes mouse leave in display mode.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `hitInfo` | [`IHitTestCellTypeHitInfo`](../interfaces/GC.Spread.Sheets.IHitTestCellTypeHitInfo) | The hit test information returned by the getHitInfo method. See the Remarks for more information. |

#### Returns

`boolean`

Returns `true` if the process is successful; otherwise, `false`.

___

### <a id="processmousemove" name="processmousemove"></a> processMouseMove

▸ **processMouseMove**(`hitInfo`): `boolean`

Processes mouse move in display mode.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `hitInfo` | [`IHitTestCellTypeHitInfo`](../interfaces/GC.Spread.Sheets.IHitTestCellTypeHitInfo) | The hit test information returned by the getHitInfo method. See the Remarks for more information. |

#### Returns

`boolean`

Returns `true` if the process is successful; otherwise, `false`.

___

### <a id="processmouseup" name="processmouseup"></a> processMouseUp

▸ **processMouseUp**(`hitInfo`): `boolean`

Processes mouse up in display mode.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `hitInfo` | [`IHitTestCellTypeHitInfo`](../interfaces/GC.Spread.Sheets.IHitTestCellTypeHitInfo) | The hit test information returned by the getHitInfo method. See the Remarks for more information. |

#### Returns

`boolean`

Returns `true` if the process is successful; otherwise, `false`.

___

### <a id="selectall" name="selectall"></a> selectAll

▸ **selectAll**(`editorContext`, `context?`): `void`

Selects all the text in the editor DOM element.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `editorContext` | `HTMLElement` | The DOM element that was created by the createEditorElement method. |
| `context?` | `any` | The context associated with the cell type. See the Remarks for more information. |

#### Returns

`void`

___

### <a id="seteditorvalue" name="seteditorvalue"></a> setEditorValue

▸ **setEditorValue**(`editorContext`, `value`, `context?`): `void`

Sets the editor's value.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `editorContext` | `HTMLElement` | The DOM element that was created by the createEditorElement method. |
| `value` | `any` | The value returned from the active cell. |
| `context?` | `any` | The context associated with the cell type. See the Remarks for more information. |

#### Returns

`void`

___

### <a id="tojson" name="tojson"></a> toJSON

▸ **toJSON**(): `any`

Saves the object state to a JSON string.

#### Returns

`any`

The cell type data.

___

### <a id="updateeditor" name="updateeditor"></a> updateEditor

▸ **updateEditor**(`editorContext`, `cellStyle`, `cellRect`, `context?`): [`Rect`](GC.Spread.Sheets.Rect)

Updates the editor's size.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `editorContext` | `HTMLElement` | The DOM element that was created by the createEditorElement method. |
| `cellStyle` | [`Style`](GC.Spread.Sheets.Style) | The cell's actual style. |
| `cellRect` | [`Rect`](GC.Spread.Sheets.Rect) | The cell's layout information. |
| `context?` | `any` | The context associated with the cell type. See the Remarks for more information. |

#### Returns

[`Rect`](GC.Spread.Sheets.Rect)

Returns the new size for cell wrapper element, it should contain two properties 'width' and 'height'.

___

### <a id="updateeditorcontainer" name="updateeditorcontainer"></a> updateEditorContainer

▸ **updateEditorContainer**(`editorContext`, `editorBounds`, `cellStyle`): `void`

Updates the cell wrapper element size.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `editorContext` | `HTMLElement` | The DOM element that was created by the createEditorElement method. |
| `editorBounds` | [`Rect`](GC.Spread.Sheets.Rect) | The cell wrapper element's new size. |
| `cellStyle` | [`Style`](GC.Spread.Sheets.Style) | The cell's actual style. |

#### Returns

`void`

___

### <a id="updateimemode" name="updateimemode"></a> updateImeMode

▸ **updateImeMode**(`editorContext`, `imeMode`, `context?`): `void`

Updates the editor's ime-mode.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `editorContext` | `HTMLElement` | The DOM element that was created by the createEditorElement method. |
| `imeMode` | [`ImeMode`](../enums/GC.Spread.Sheets.ImeMode) | The ime-mode from cell's actual style. |
| `context?` | `any` | The context associated with the cell type. See the Remarks for more information. |

#### Returns

`void`