Linkcellrenderer

LinkCellRenderer

하이퍼링크를 표시하는 렌더러

Signature:

export interface LinkCellRenderer extends CellRenderer

Extends: CellRenderer

Remarks

[상위 클래스]

CellRenderer

Example

// 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	GetClassCallback	anchor element에 class를 추가한다.
titleCallback	GetCellTitleCallback	HTML Anchor Element의 title 텍스트를 설정하기 위한 콜백
urlCallback	GetLinkUrlCallback	링크 될 주소를 지정하기 위한 콜백

Properties

Property	Type	Description
baseUrl	string	클릭 시 연결될 base url 주소
enterKey	boolean	enter를 입력했을때 링크를 실행할 것인지의 여부
hideWhenEmpty	boolean	a tag에 text가 없는 경우 a tag를 화면에서 제거한다.
linkField	string	링크 될 주소가 지정되어있는 필드명
spaceKey	boolean	스페이스바를 입력했을때 링크를 실행할 것인지의 여부
target	string	링크의 target
titleField	string	HTML Anchor Element의 title 텍스트 값으로 읽어올 필드의 필드명
type	'link'	종류: 링크

Events Desc

classCallback

anchor element에 class를 추가한다.

Remarks:

anchor element의 style을 변경하기 위한 class를 추가한다.

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

HTML Anchor Element의 title 텍스트를 설정하기 위한 콜백

Remarks:

설정할 HTML Anchor Element의 title 텍스트를 반환해야 한다.

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

링크 될 주소를 지정하기 위한 콜백

Remarks:

지정되면 linkField, baseUrl 을 무시한다.

Example:

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

Properties Desc

baseUrl

클릭 시 연결될 base url 주소

Remarks:

linkField 필드나 셀의 값 앞에 덧붙여 최종적인 주소를 설정한다.

'#'일 경우 클릭 시 onCellItemClicked 가 호출된다.

Example:

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

enterKey

enter를 입력했을때 링크를 실행할 것인지의 여부

Remarks:

true를 입력하면 셀에 포커스가 있고 편집상태가 아닐때 enter를 입력하면 링크가 실행된다. GridBase.onCellItemClicked가 있는 경우 해당 이벤트가 호출된후 결과값이 false이면 기본동작을 실행하지 않는다.

hideWhenEmpty

a tag에 text가 없는 경우 a tag를 화면에서 제거한다.

linkField

링크 될 주소가 지정되어있는 필드명

Remarks:

지정되지 않으면 렌더링 되는 셀의 값이 링크 될 주소로 지정된다.

spaceKey

스페이스바를 입력했을때 링크를 실행할 것인지의 여부

Remarks:

true를 입력하면 셀에 포커스가 있고 편집상태가 아닐때 스페이스 바를 입력하면 링크가 실행된다. GridBase.onCellItemClicked가 있는 경우 해당 이벤트가 호출된후 결과값이 false이면 기본동작을 실행하지 않는다.

target

링크의 target

Remarks:

링크의 target을 지정한다 지정하지 않으면 _blank가 지정된다.

titleField

HTML Anchor Element의 title 텍스트 값으로 읽어올 필드의 필드명

Example:

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

type

종류: 링크

LineCellEditor LookupDataKeyValues