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


## TemplateCellRenderer

A renderer that displays templates in HTML format.

**Signature:**

```typescript
export interface TemplateCellRenderer extends CellRenderer
```
**Extends:** [CellRenderer](/refs/Interface/CellRenderer)

## Remarks

Inherits [CellRenderer](/refs/Interface/CellRenderer).

When setting a template, it is interpreted differently depending on the format within the braces.

`{value}`{/* */}: data value

`{value: fieldName}`{/* */}: Data value corresponding to the field name.

Rest: Variable name to be considered as field name

\[Superclass\]

[CellRenderer](/refs/Interface/CellRenderer)

## Example


```js
let column.renderer = {
     type:"html",
     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";
         }
     }
}
```

## Events

| Property | Type | Description |
| --- | --- | --- |
| [callback](/refs/Interface/TemplateCellRenderer#callback) | [GetTemplateCallback](/refs/realgrid#gettemplatecallback) | Callback to create html to display when rendering |
| [valueCallback](/refs/Interface/TemplateCellRenderer#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 |
| --- | --- | --- |
| [inputFocusable](/refs/Interface/TemplateCellRenderer#inputfocusable) | boolean | Whether the renderer can have focus when there is an input element |
| [template](/refs/Interface/TemplateCellRenderer#template) | string | Input HTML template format string |
| [templateEvents](/refs/Interface/TemplateCellRenderer#templateevents) | [TemplateEvent](/refs/Interface/TemplateEvent) \| [TemplateEvent](/refs/Interface/TemplateEvent){/* */}\[\] | Specifies the event of the element. |
| [type](/refs/Interface/TemplateCellRenderer#type) | 'html' | Type: html template |

## Events Desc

### callback

Callback to create html to display when rendering

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

**Remarks:**

It is used to create HTML that is displayed when the content to be displayed on the screen changes depending on the value.

**Example:**


```js
column.renderer = {
    type:"html",
    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

Callback to replace the value wrapped in `${xxx}` format in the template with the actual value.

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

**Remarks:**

When changing the template according to the value of the cell, if you specify it in the template in the form of `${xxx}`{/* */}, valueCallback is called during rendering and the returned string is `${xxx}`{/* */} replace .

**Example:**


```js
column.renderer = {
    type:"html",
    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

### inputFocusable

Whether the renderer can have focus when there is an input element

`Type` - boolean

**Remarks:**

If specified as `true`{/* */}, the input element can have focus. If `false`{/* */}, the grid takes focus even if the input element is clicked. If the focus is on the user's input rather than the grid's editor, the user must manage movement/tab/editing using the keyboard.

<hr/>

### template

String in html template format to be input

`Type` - string

**Remarks:**

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

<hr/>

### templateEvents

element의 event를 지정한다.

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

**Remarks:**


**Example:**


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

<hr/>

### type

Type: html template

`Type` - 'html'

<hr/>