CheckCellRenderer

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

상세 설명

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

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

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

[상위 클래스]

CellRenderer

예제 코드

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

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

프로퍼티 정보

checkLocation


checkLocation: IconLocation

체크박스의 위치

editable


editable: boolean

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

기본값

true

falseValues


falseValues: string

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

상세 설명

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

예제 코드

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

showInnerFocus


showInnerFocus: boolean

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

기본값

false

spaceKey


spaceKey: boolean

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

기본값

true

strictValue


strictValue: boolean

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

상세 설명

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

기본값

false

threeStates


threeStates: boolean

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

상세 설명

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

기본값

false

trueValues


trueValues: string

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

상세 설명

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

예제 코드

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

useImages


useImages: boolean

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

상세 설명

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

[css 스타일 명 목록]

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

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

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

기본값

false

콜백 정보

getCheckedCallback


getCheckedCallback: GetCheckedCallback

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

상세 설명

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

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

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

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

GetCheckedCallback 의 형식을 따른다.

예제 코드

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


setCheckedCallback: SetCheckedCallback

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

상세 설명

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

SetCheckedCallback 의 형식을 따른다.

예제 코드

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