LinkCellRenderer

Renderer that displays hyperlinks

Signature:

export interface LinkCellRenderer extends CellRenderer

Extends: CellRenderer

Remarks

[Superclass]

CellRenderer

Example

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

Events

Properties

Events Desc

classCallback

Add a class to the anchor element.

Type - GetClassCallback

Remarks:

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

It follows the format of GetClassCallback.

Example:

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

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
}

titleCallback

Callback to set the title text of the HTML Anchor Element

Type - GetCellTitleCallback

Remarks:

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

It follows the format of GetCellTitleCallback.

Example:

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

urlCallback

Callback to specify the address to be linked to

Type - GetLinkUrlCallback

Remarks:

If specified, linkField, baseUrl is ignored.

Example:

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

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 is called when clicked.

Example:

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

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 exists, if the result is false after the event is called, the default action is not executed.

hideWhenEmpty

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

Type - boolean

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.

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 exists, if the result is false after the event is called, the default action is not executed.

target

target of link

Type - string

Remarks:

Specifies the target of the link. If not specified, _blank is specified.

titleField

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

Type - string

Example:

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

type

Type: Link

Type - 'link'