CheckCellRenderer

값이 참인지 거짓인지를 표시하는 렌더러

Signature:

export interface CheckCellRenderer extends CellRenderer 

Extends: CellRenderer

Remarks

셀의 값을 true/false 두 가지 상태로 표시하는 렌더러이다.

컬럼에 연결된 필드의 자료형이 Boolean이 아니라면, 렌더러의 trueValues 에 지정된 값들을 true로, falseValues 로 지정된 값들을 false로 판단한다.

자동 높이에서 TOP_EDGE, BOTTOM_EDGE를 사용할 수 없다.

[상위 클래스]

CellRenderer

Example

// string type
column.renderer = 'check';
 
// object type
column.renderer = {
     "type": "check",
     "trueValues": "France,Germany",
     "falseValues": "Korea,England"
}

Events

Properties

Events Desc

getCheckedCallback

렌더링 시 체크 값을 결정하는 콜백

Remarks:

true 반환 시 체크 값을 false로 간주한다.

지정하지 않은 경우나, undefined 반환 시 체크 값을 true로 간주한다.

false 반환시 threeStates 가 true 일 경우 체크값을 undefined로, 아닐 경우 true 로 간주한다.

setCheckedCallback 가 지정되어 있지 않아야 반환값이 체크 값에 영향을 미친다.

GetCheckedCallback 의 형식을 따른다.

Example:

const f = function(grid, itemIndex, column, value) {
     if (typeof value === "number") {
         return value % 2 === 1;
     }
     else if (typeof value ==="boolean") {
         return value;
     }
     else {
         return Boolean(v);
     }
}
 
column.renderer = {
         "type": "check",
         "getCheckedCallback": f
}

setCheckedCallback

편집 시 체크 결과 값을 결정하는 콜백

Remarks:

편집 시 getCheckedCallback 보다 우선하여 체크 값을 지정한다.

SetCheckedCallback 의 형식을 따른다.

Example:

const f = function(grid, itemIndex, column, oldValue, checked) {
     if (itemIndex % 2 === 0) {
         return checked;
     }
     else {
         return false;
     }
}
column.renderer = {
    "type": "check",
    "setCheckedCallback": f
}

Properties Desc

checkLocation

체크박스의 위치

editable

체크 표시랑 별개로 편집기로 수정 가능한지의 여부

falseValues

boolean 자료형이 아닌 필드에서 false 로 간주할 값들

Remarks:

콤마(,)로 구분하여 입력한다.

Example:

column.renderer = {
    "type": "check",
    "falseValues": "Korea,England"
}

readOnlySetDisabled

editable이 false인 경우 disabled로 표시할지 여부

showInnerFocus

선택 시 표시되는 내부 focus 표시 여부

spaceKey

스페이스 바로 체크를 가능하게 할 것인지의 여부

strictValue

boolean 자료형과 trueValues 나 falseValues 에 속하는 값이 없을 경우 intermediate 상태로 표시 할 것인지의 여부

Remarks:

threeStates 가 true며, 값이 trueValues, falseValues 에 포함되지 않는 경우 intermediate 상태로 표시된다.

threeStates

intermediate 상태를 포함할 건지의 여부

Remarks:

strictValue 와 같이 쓰이거나, 값이 '', undefined, 또는 null 이면 intermediate 상태로 간주한다.

trueValues

boolean 자료형이 아닌 필드에서 true 로 간주할 값들

Remarks:

콤마(,)로 구분하여 입력한다.

Example:

column.renderer = {
    "type": "check",
    "trueValues": "France,Germany"
}

type

종류: 체크

useImages

체크박스 대신에 이미지를 사용할 것인지의 여부

Remarks:

각 css 클래스에 이미지를 지정하면 된다.

[css 스타일 명 목록]

체크 true 스타일 명: "rg-check-renderer-checked"

체크 false 스타일 명: "rg-check-renderer-unchecked"

intermediate 스타일 명: "rg-check-renderer-intermediate"