# GC.Spread.Sheets.FormulaTextBox.FormulaTextBox

## Content

# Class: FormulaTextBox

[Sheets](../modules/GC.Spread.Sheets).[FormulaTextBox](../modules/GC.Spread.Sheets.FormulaTextBox).FormulaTextBox

## Table of contents

### Constructors

- [constructor](GC.Spread.Sheets.FormulaTextBox.FormulaTextBox#constructor)

### Methods

- [add](GC.Spread.Sheets.FormulaTextBox.FormulaTextBox#add)
- [autoComplete](GC.Spread.Sheets.FormulaTextBox.FormulaTextBox#autocomplete)
- [destroy](GC.Spread.Sheets.FormulaTextBox.FormulaTextBox#destroy)
- [refresh](GC.Spread.Sheets.FormulaTextBox.FormulaTextBox#refresh)
- [remove](GC.Spread.Sheets.FormulaTextBox.FormulaTextBox#remove)
- [showHelp](GC.Spread.Sheets.FormulaTextBox.FormulaTextBox#showhelp)
- [text](GC.Spread.Sheets.FormulaTextBox.FormulaTextBox#text)
- [workbook](GC.Spread.Sheets.FormulaTextBox.FormulaTextBox#workbook)

## Constructors

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

• **new FormulaTextBox**(`host`, `options?`)

Represents a formula text box.

**`example`**
```javascript
window.onload = function(){
     var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });
     rangeSelector = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(document.getElementById("ftb"), {rangeSelectMode: true});
     rangeSelector.workbook(spread);
}
function buttonClick(){
     alert(rangeSelector.text());
}
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `host` | `HTMLElement` | The DOM element. It can be INPUT, TEXTAREA, or editable DIV. |
| `options?` | [`IFormulaTextBoxOptions`](../interfaces/GC.Spread.Sheets.FormulaTextBox.IFormulaTextBoxOptions) | - |

## Methods

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

▸ **add**(`functionDescription`): `void`

Adds a custom function description.

**`example`**
```javascript
// filter the function descriptions
function filterFunctionDescription(functionDescription) {
    // filter the function description
    return functionDescription;
}

// override the add method
var originalAdd = GC.Spread.Sheets.FormulaTextBox.FormulaTextBox.prototype.add;
GC.Spread.Sheets.FormulaTextBox.FormulaTextBox.prototype.add = function (functionDescription) {
    // filter the function description
    originalAdd.call(this, filterFunctionDescription(functionDescription));
};
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `functionDescription` | [`IFunctionDescription`](../interfaces/GC.Spread.CalcEngine.Functions.IFunctionDescription) \| [`IFunctionDescription`](../interfaces/GC.Spread.CalcEngine.Functions.IFunctionDescription)[] | The function description to add. This can be an array. See the Remarks for more information. |

#### Returns

`void`

___

### <a id="autocomplete" name="autocomplete"></a> autoComplete

▸ **autoComplete**(`value?`): `boolean`

Gets or sets whether the text box uses automatic complete.

**`example`**
```javascript
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 2 });
var div = document.createElement('div');
div.id = 'fbx';
div.style.width = '300px';
div.style.height = '50px';
div.setAttribute('contentEditable', 'true');
document.getElementById('panel').appendChild(div);
var formulaTextBox = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(div);
formulaTextBox.workbook(spread);
formulaTextBox.autoComplete(false);

// input "=SUM" formula prefix in the formula text box input element, the func hint box will not show
```

#### Parameters

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

#### Returns

`boolean`

If no value is set, returns whether the text box uses auto complete; otherwise, there is no return value.

___

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

▸ **destroy**(): `void`

Removes host from formula text box and removes all binding events.

**`example`**
```javascript
var div = document.createElement('div');
div.id = 'fbx';
div.style.width = '300px';
div.style.height = '50px';
div.setAttribute('contentEditable', 'true');
document.body.appendChild(div);
var formulaTextBox = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(div);
formulaTextBox.workbook(spread);

// destroy the formula text box
formulaTextBox.destroy();
```

#### Returns

`void`

___

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

▸ **refresh**(`ignoreEditing?`): `void`

refresh the formula text box with the active cell.

**`example`**
```javascript
var div = document.createElement('div');
div.id = 'fbx';
div.style.width = '300px';
div.style.height = '50px';
div.style.position = 'absolute';
div.style.right = '100px';
div.style.top = '200px';
div.style.border = '3px solid red';
div.setAttribute('contentEditable', 'true');
document.body.appendChild(div);
var formulaTextBox = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(div);
formulaTextBox.workbook(spread);

// suspend the event and set the value to the active cell
spread.suspendEvent();
spread.getActiveSheet().setValue(0, 0, 100);
spread.resumeEvent();

// refresh the formula text box
formulaTextBox.refresh();
```

#### Parameters

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

#### Returns

`void`

___

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

▸ **remove**(`name`): `void`

Removes a custom function description.

**`example`**
```javascript
// override the add method
var originalAdd = GC.Spread.Sheets.FormulaTextBox.FormulaTextBox.prototype.add;
GC.Spread.Sheets.FormulaTextBox.FormulaTextBox.prototype.add = function (functionDescription) {
    originalAdd.call(this, functionDescription);
    this.remove('SUM');
};
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `name` | `string` | The custom function description name. |

#### Returns

`void`

___

### <a id="showhelp" name="showhelp"></a> showHelp

▸ **showHelp**(`value?`): `any`

Gets or sets whether to display the function's help tip.

**`example`**
```javascript
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 2 });
var div = document.createElement('div');
div.id = 'fbx';
div.style.width = '300px';
div.style.height = '50px';
div.setAttribute('contentEditable', 'true');
document.getElementById('panel').appendChild(div);
var formulaTextBox = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(div);
formulaTextBox.workbook(spread);
formulaTextBox.showHelp(false);

// input "=SUM" formula prefix in the formula text box input element, the func hint (auto complete) box iwll show, but the help func will not show
```

#### Parameters

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

#### Returns

`any`

If no value is set, returns whether the text box displays the function's help tip when editing; otherwise, there is no return value.

___

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

▸ **text**(`value?`): `string`

Gets or sets the text.

**`example`**
```javascript
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 2 });
var div = document.createElement('div');
div.id = 'fbx';
div.style.width = '300px';
div.style.height = '50px';
div.setAttribute('contentEditable', 'true');
document.getElementById('panel').appendChild(div);
var formulaTextBox = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(div);
formulaTextBox.workbook(spread);
formulaTextBox.text('this is text');
// worksheet will be in edit status with the text value and formula text box input box will also show the text value.
console.log(formulaTextBox.text()); // 'this is text'
```

#### Parameters

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

#### Returns

`string`

If no value is set, returns the text; otherwise, there is no return value.

___

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

▸ **workbook**(`value?`): [`Workbook`](GC.Spread.Sheets.Workbook)

Gets or sets the Workbook component to work with the formula text box.

**`example`**
```javascript
window.onload = function(){
     var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
     var activeSheet = spread.getActiveSheet();
     activeSheet.setArray(0, 0, [1, 2, 3, 4, 5]);
     var fbx = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(document.getElementById("formulaTextBox"));
     fbx.workbook(spread);
};
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `value?` | [`Workbook`](GC.Spread.Sheets.Workbook) | The Workbook component. |

#### Returns

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

If no value is set, returns the workbook component; otherwise, there is no return value.