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


## CustomCellRenderer

Objects used when setting up a custom cell renderer

**Signature:**

```typescript
export interface CustomCellRenderer
```

## Remarks

It can be used as [GridBase.registerCustomRenderer()](/refs/Class/GridBase#registercustomrenderer).

## Example


```js
gridView.registerCustomRenderer("renderer01", {
     initContent(parent) {
         var span = this._span = document.createElement("span");
         parent.append(span);
     },
     ...
})
```

## Events

| Property | Type | Description |
| --- | --- | --- |
| [canClick](/refs/Interface/CustomCellRenderer#canclick) | (event: MouseEvent) =&gt; boolean | A callback to determine whether to use the grid's click event |
| [canEdit](/refs/Interface/CustomCellRenderer#canedit) | (event: MouseEvent) =&gt; boolean | Whether the renderer is editable |
| [canEditKey](/refs/Interface/CustomCellRenderer#caneditkey) | (event: KeyboardEvent) =&gt; boolean | A callback to determine which edit shortcut key is assigned |
| [clearContent](/refs/Interface/CustomCellRenderer#clearcontent) | (dom: HTMLElement) =&gt; void | Callback to be executed when content is initialized |
| [click](/refs/Interface/CustomCellRenderer#click) | (event: MouseEvent) =&gt; any | Callback to be executed when clicked |
| [editClick](/refs/Interface/CustomCellRenderer#editclick) | (index: [CellIndex](/refs/Interface/CellIndex){/* */}, event: MouseEvent, result: [RendererEditResult](/refs/Interface/RendererEditResult){/* */}) =&gt; boolean | A callback that determines the edit completion behavior |
| [editKey](/refs/Interface/CustomCellRenderer#editkey) | (index: [CellIndex](/refs/Interface/CellIndex){/* */}, event: KeyboardEvent, result: [RendererEditResult](/refs/Interface/RendererEditResult){/* */}) =&gt; boolean | Callback for editing using the set editing shortcut key |
| [initContent](/refs/Interface/CustomCellRenderer#initcontent) | (dom: HTMLElement) =&gt; void | <p>Callback to be executed when initializing content</p><p>\[Parameter list\]</p><p>`dom` - parent element</p> |
| [preventClick](/refs/Interface/CustomCellRenderer#preventclick) | (event: MouseEvent) =&gt; void | Callback to stop clicking |
| [preventEditClick](/refs/Interface/CustomCellRenderer#preventeditclick) | (event: MouseEvent) =&gt; void | Callback to stop editing from completion when editing |
| [render](/refs/Interface/CustomCellRenderer#render) | (grid: any, model: [GridCell](/refs/Interface/GridCell){/* */}, w: number, h: number, info: any) =&gt; void | Callback to be executed when rendering |

## Properties

| Property | Type | Description |
| --- | --- | --- |
| [index](/refs/Interface/CustomCellRenderer#index) | [CellIndex](/refs/Interface/CellIndex) | Cell location information |
| [inputFocusable](/refs/Interface/CustomCellRenderer#inputfocusable) | boolean | Whether the renderer can have focus when there is an input element |
| [tags](/refs/Interface/CustomCellRenderer#tags) | [ConfigObject](/refs/realgrid#configobject) | The user enters the desired random value. |

## Events Desc

### canClick

A callback to determine whether to use the grid's click event.

`Type` - (event: MouseEvent) =&gt; boolean

**Remarks:**

If you return `false`, the grid will no longer process the event and the element's default action will be performed.

If the callback is not registered, `false` is returned.

To use [CustomCellRenderer.click](/refs/Interface/CustomCellRenderer#click), you must set it to a function that returns `true`{/* */}.

\[Parameter list\]

`event` - mouse click event

**Example:**


```js
grid.registerCustomRenderer("renderer01", {
    canClick : function() {
        return true;
    }
})
```

<hr/>

### canEdit

Is the renderer editable?

`Type` - (event: MouseEvent) =&gt; boolean

**Remarks:**

\[Parameter list\]

`event` - mouse event

**Example:**


```js
grid.registerCustomRenderer("renderer01", {
    canEdit: function() {
        return true;
    }
})
```

<hr/>

### canEditKey

A callback to determine which edit shortcut to specify.

`Type` - (event: KeyboardEvent) =&gt; boolean

**Remarks:**

Returning `false` does not reflect the editing function when a specific key is pressed.

\[Parameter list\]

`event` - Keyboard event

**Example:**


```js
grid.registerCustomRenderer("renderer01", {
    canEditKey: function(event) {
        return event.ctrlKey && event.keyCode === 65;
    }
})
```

<hr/>

### clearContent

Callback to be executed when content is initialized

`Type` - (dom: HTMLElement) =&gt; void

**Remarks:**

This method is called when executing [grid.destroy](/refs/Class/GridBase#destroy).

To prevent memory leaks, all objects created or referenced in [initContent](/refs/Interface/CustomCellRenderer#initcontent) must be released.

If there is an event connected with `addEventListener` or `onclick`{/* */}, it must be released.

\[Parameter list\]

`dom` - parent element

**Example:**


```js
grid.registerCustomRenderer("renderer01", {
    clearContent: function(dom) {
        dom.innerHTML = "";
    }
})
```

<hr/>

### click

Callback to be executed when clicked

`Type` - (event: MouseEvent) =&gt; any

**Remarks:**

It is processed separately from the element's click event.

If `event.target`{/* */} is clickable, it should return [ClickData](/refs/Interface/ClickData).

The returned data is passed to the [GridBase.onCellItemClicked](/refs/Class/GridBase#oncellitemclicked) event.

When `false` is returned, stop the event and then call [preventClick](/refs/Interface/CustomCellRenderer#preventclick).

\[Parameter list\]

`event` - mouse click event

**Example:**


```js
grid.registerCustomRenderer("renderer01", {
    click: function(event) {
        let index = this.index.toProxy();
        if ( event.target === this._button1 || event.target === this._button2 || event.target === this._href) {
            return {
                cellType:"data",
                target: event.target,
                index: index,
                value: this._value
            }
        }
    }
})
```

<hr/>

### editClick

A callback that determines the edit completion behavior

`Type` - (index: [CellIndex](/refs/Interface/CellIndex){/* */}, event: MouseEvent, result: [RendererEditResult](/refs/Interface/RendererEditResult){/* */}) = &gt; boolean

**Remarks:**

When returning `false`, call [CustomCellRenderer.preventEditClick](/refs/Interface/CustomCellRenderer#preventeditclick).

\[Parameter list\]

`index` - edit

`event` - mouse event

`result` - Result of editing completion

<hr/>

### editKey

Callback for editing using the set editing shortcut key

`Type` - (index: [CellIndex](/refs/Interface/CellIndex){/* */}, event: KeyboardEvent, result: [RendererEditResult](/refs/Interface/RendererEditResult){/* */}) = &gt; boolean

**Remarks:**

If `false` is returned, editing is canceled.

\[Parameter list\]

`index` - Cell location information

`event` - mouse event

`result` - Result of editing completion

**Example:**


```js
grid.registerCustomRenderer("renderer01", {
    editKey: function(index, event, result) {
        result.commit = false;
        if (event.ctrlKey && event.keyCode === 65) {
            result.commit = true;
            result.value = 'Ganadara';
            return true;
        }
        return false;
    }
})
```

<hr/>

### initContent

Callback to be executed when content is initialized

\[Parameter list\]

`dom` - parent element

`Type` - (dom: HTMLElement) =&gt; void

**Example:**


```js
grid.registerCustomRenderer("renderer01", {
 initContent: function(dom) {
 let span = this._span = document.createElement("span");
 span.className = "custom_render_span"
 dom.appendChild(span);

 dom.appendChild(this._button1 = document.createElement("span"));
 dom.appendChild(this._button2 = document.createElement("span"));

 let a = this._href = document.createElement("a");
 a.href = "http://realgrid.com";
 a.target = "_blank";
 a.tabIndex = -1;
 a.textContent = "real";
 dom.appendChild(a);
 }
})
```

<hr/>

### preventClick

Callback to stop a click

`Type` - (event: MouseEvent) =&gt; void

**Remarks:**

It was created to freely call `event.preventDefault()`.

If the callback is not specified, [Event.preventDefault](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) is called.

\[Parameter list\]

`event` - mouse click event

<hr/>

### preventEditClick

When editing, a callback to stop editing from completion.

`Type` - (event: MouseEvent) =&gt; void

**Remarks:**

It was created to freely call `event.preventDefault()`.

If the callback is not specified, [Event.preventDefault](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) is called.

\[Parameter list\]

`event` - mouse event

<hr/>

### render

Callback to be executed when rendering

`Type` - (grid: any, model: [GridCell](/refs/Interface/GridCell){/* */}, w: number, h: number, info: any) =&gt; void

**Remarks:**

You can apply text or style within the element.

\[Parameter list\]

`grid` - [GridBase](/refs/Class/GridBase) control

`model` - GridCell object

`w` - width

`h` - width

`info` - additional information

**Example:**


```js
grid.registerCustomRenderer("renderer01", {
 render: function(grid, model, w, h, info) {
 let span = this._span;

 // text settings.
 span.textContent = model.value + "-YYY";
 this._value = model.value;

 // Set directly in className or style
 // If you set it directly in style, it may be slower than using className.
 // If possible, use className.
 this._button1.className = "custom_none";
 this._button2.className = "custom_none";

 switch(model.value) {
 case "Germany":
 this._button1.className = "custom_search custom-hover";
 this._button2.className = "custom_de custom-hover";
 break;
 case "France":
 this._button1.className = "custom_fr custom-hover";
 break;
 case "Brazil":
 this._button1.className = "custom_br custom-hover";
 break;
 }
 }
})
```

<hr/>

## Properties Desc

### index

Cell location information

`Type` - [CellIndex](/refs/Interface/CellIndex)

<hr/>

### 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/>

### tags

The user enters the desired random value.

`Type` - [ConfigObject](/refs/realgrid#configobject)

<hr/>