LinkCellRenderer

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

상세 설명

[상위 클래스]

CellRenderer

예제 코드

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

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

프로퍼티 정보

baseUrl


baseUrl: string

클릭 시 연결될 base url 주소

상세 설명

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

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

예제 코드

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

linkField


linkField: string

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

상세 설명

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

spaceKey


spaceKey: boolean

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

상세 설명

true를 입력하면 셀에 포커스가 있고 편집상태가 아닐때 스페이스 바를 입력하면 링크가 실행된다.

기본값

true

titleField


titleField: string

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

예제 코드

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

콜백 정보

titleCallback


titleCallback: GetCellTitleCallback

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

상세 설명

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

GetCellTitleCallback 의 형식을 따른다.

예제 코드

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

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

urlCallback


urlCallback: GetLinkUrlCallback

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

상세 설명

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

예제 코드

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