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


## LinkCellRenderer

Renderer that displays hyperlinks

**Signature:**

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

## Remarks

\[Superclass\]

[CellRenderer](/refs/Interface/CellRenderer)

## Example


```js
//string type
column.renderer = 'link';

// object type
column.renderer = {
     "type": "link",
     "urlCallback": function (grid, cell) {
         return "http://realgrid.com";
     },
     "titleField": "CompanyName"
}
```

## Events

| Property | Type | Description |
| --- | --- | --- |
| [classCallback](/refs/Interface/LinkCellRenderer#classcallback) | [GetClassCallback](/refs/realgrid#getclasscallback) | Add a class to the anchor element. |
| [titleCallback](/refs/Interface/LinkCellRenderer#titlecallback) | [GetCellTitleCallback](/refs/realgrid#getcelltitlecallback) | Callback to set title text of HTML Anchor Element |
| [urlCallback](/refs/Interface/LinkCellRenderer#urlcallback) | [GetLinkUrlCallback](/refs/realgrid#getlinkurlcallback) | Callback to specify address to be linked |

## Properties

| Property | Type | Description |
| --- | --- | --- |
| [baseUrl](/refs/Interface/LinkCellRenderer#baseurl) | string | Base URL address to be connected when clicked |
| [enterKey](/refs/Interface/LinkCellRenderer#enterkey) | boolean | Whether to execute the link when enter is entered |
| [hideWhenEmpty](/refs/Interface/LinkCellRenderer#hidewhenempty) | boolean | If there is no text in a tag, the a tag is removed from the screen. |
| [linkField](/refs/Interface/LinkCellRenderer#linkfield) | string | Field name whose address to be linked is specified |
| [spaceKey](/refs/Interface/LinkCellRenderer#spacekey) | boolean | Whether to execute the link when the space bar is entered |
| [target](/refs/Interface/LinkCellRenderer#target) | string | link's target |
| [titleField](/refs/Interface/LinkCellRenderer#titlefield) | string | Field name of the field to be read as the title text value of the HTML Anchor Element |
| [type](/refs/Interface/LinkCellRenderer#type) | 'link' | Type: Link |

## Events Desc

### classCallback

Add a class to the anchor element.

`Type` - [GetClassCallback](/refs/realgrid#getclasscallback)

**Remarks:**

Add a class to change the style of the anchor element.

It follows the format of [GetClassCallback](/refs/realgrid#getclasscallback){/* */}.

**Example:**


```html
<style>
a.new {padding-right:25px;background:url('/images/ico_new.png') no-repeat 100% 50%;}
a.btn {display:inline-block;width:80px;line-height:30px;text-align:center;background-color:#222;color:#fff;overflow: hidden;}
</style>
```

```js
const f = function(grid, model) {
 var cls = "";
 var value = model.value || "";
 value.indexOf("new") && (cls += " new");
 value.indexOf("button") && (cls += " btn");

 return cls.trim();
}

column.renderer = {
 type: "link",
 "classCallback": f
}
```

<hr/>

### titleCallback

Callback to set the title text of the HTML Anchor Element

`Type` - [GetCellTitleCallback](/refs/realgrid#getcelltitlecallback)

**Remarks:**

The title text of the HTML Anchor Element to be set must be returned.

It follows the format of [GetCellTitleCallback](/refs/realgrid#getcelltitlecallback).

**Example:**


```js
const f = function(grid, model) {
 return 'new product'
}

let column.renderer = {
 "type": "link",
 "urlCallback": function (grid, cell) {
 return "http://realgrid.com";
 },
 "titleCallback": f
}
```

<hr/>

### urlCallback

Callback to specify the address to be linked to

`Type` - [GetLinkUrlCallback](/refs/realgrid#getlinkurlcallback)

**Remarks:**

If specified, `linkField`{/* */}, `baseUrl` is ignored.

**Example:**


```js
column.renderer = {
 "type": "link",
 "urlCallback": function (grid, cell) {
 return "http://realgrid.com";
 },
}
```

<hr/>

## Properties Desc

### baseUrl

Base URL address to be connected to when clicked

`Type` - string

**Remarks:**

Sets the final address by adding it in front of the value of the `linkField` field or cell.

In the case of `'#'`{/* */}, [onCellItemClicked](/refs/Class/GridBase#oncellitemclicked) is called when clicked.

**Example:**


```js
column.renderer = {
 "type": "link",
 "baseUrl": "#"
}
```

<hr/>

### enterKey

Whether to execute the link when enter is entered

`Type` - boolean

**Remarks:**

If you enter true, the link will be executed if you type enter when the cell has focus and is not in an editing state. If [GridBase.onCellItemClicked](/refs/Class/GridBase#oncellitemclicked){/* */} exists, if the result is false after the event is called, the default action is not executed.

<hr/>

### hideWhenEmpty

If there is no text in a tag, the a tag is removed from the screen.

`Type` - boolean

<hr/>

### linkField

Field name whose address to be linked is specified

`Type` - string

**Remarks:**

If not specified, the value of the rendered cell is designated as the address to be linked.

<hr/>

### spaceKey

Whether to execute the link when the space bar is entered

`Type` - boolean

**Remarks:**

If you enter true, the link will be executed when you press the space bar when the cell has focus and is not in an editing state. If [GridBase.onCellItemClicked](/refs/Class/GridBase#oncellitemclicked){/* */} exists, if the result is false after the event is called, the default action is not executed.

<hr/>

### target

target of link

`Type` - string

**Remarks:**

Specifies the target of the link. If not specified, `_blank`{/* */} is specified.

<hr/>

### titleField

Field name of the field to be read as the title text value of the HTML Anchor Element

`Type` - string

**Example:**


```js
column.renderer = {
 "type": "link",
 "linkField": "ProductID",
 "titleField": "CompanyName"
}
```

<hr/>

### type

Type: Link

`Type` - 'link'

<hr/>