{/* Do not edit this file. It is automatically generated by API Documenter. */}

## TreeTemplateOptions

Setting information for displaying html in the data area of ​​the first column of treeView

**Signature:**

```typescript
export interface TreeTemplateOptions

```

## Remarks

HTMLElements that have user interaction, such as `input`{/* */} and `textarea`{/* */}, have limited default behavior.

## Events

| Property | Type | Description |
| --- | --- | --- |
| [callback](/refs/Interface/TreeTemplateOptions#callback) | [GetTemplateCallback](/refs/realgrid#gettemplatecallback) | Callback for creating html to display during rendering |
| [valueCallback](/refs/Interface/TreeTemplateOptions#valuecallback) | [RealizeValueCallback](/refs/realgrid#realizevaluecallback) | Callback to replace the value wrapped in `${xxx}` format in the template with the actual value |

## Properties

| Property | Type | Description |
| --- | --- | --- |
| [template](/refs/Interface/TreeTemplateOptions#template) | string | String in the form of the input html template |
| [templateEvents](/refs/Interface/TreeTemplateOptions#templateevents) | [TreeTemplateEvent](/refs/Interface/TreeTemplateEvent) \| [TreeTemplateEvent](/refs/Interface/TreeTemplateEvent){/* */}\[\] | Specifies the event of the element. |

## Events Desc

### callback

Callback to create html to display when rendering

`Type` - [GetTemplateCallback](/refs/realgrid#gettemplatecallback)

**Remarks:**

Used to create html to display when the content to be displayed on the screen changes depending on the value.

**Example:**

```js
treeView.treeOptions.templateOptions = {
    callback: function (grid, model, width, height) {
        const value = model.value;
        if (value === 'xxx') {
            return "<img src='images/realgrid-logo.png' height='" + height / 2 + "'></img>" + "<div>" + model.value + "</div>";
        } else {
            return "<div>" + model.value + "</div>"
        }
    }
}
```

<hr/>

### valueCallback

A callback to replace the value wrapped in `${xxx}` format in the template with the actual value

`Type` - [RealizeValueCallback](/refs/realgrid#realizevaluecallback)

**Remarks:**

If you change the template according to the value of the cell, specify it in the template in the format of `${xxx}`{/* */}, and the valueCallback will be called during rendering and the returned string will be used to replace `${xxx}`{/* */}.

**Example:**

```js
treeView.treeOptions.templateOptions = {
    template: "<img src='images/realgrid-logo.png' height='20'/><span>${value}-${value:unitprice}-</span><span style='color: red;font-weight: bold;'>${xxx}</span>",
    valueCallback: function (grid, model, field) {
        if (field == "xxx") {
            return "1234";
        }
    }
}
```

<hr/>

## Properties Desc

### template

String in the form of an input html template

`Type` - string

**Remarks:**

Use if `callback`{/* */} is not specified.

<hr/>

### templateEvents

Specifies the event of the element.

`Type` - [TreeTemplateEvent](/refs/Interface/TreeTemplateEvent) \| [TreeTemplateEvent](/refs/Interface/TreeTemplateEvent){/* */}\[\]

**Remarks:**


**Example:**


```js
treeView.treeOptions.templateOptions = {
    template: `<input type='button' value='click' data-itemindex=\${itemindex}></input>`,
    templateEvents: {
        selector: 'input[type="button"]',
        event: {
            onclick: function(e) {console.log(e)}
        }
    }
}
```

<hr/>