Check 마크와 텍스트를 같이 표시하는 셀렌더러. 이 렌더러는 editable이 true인 경우, 마우스 클릭이나 space 키 입력으로 셀 값을 수정할 수 있는 편집 가능한 렌더러이다.
Check mark는 true와 false, 그리고 threeState가 true면 undefined 까지 세 가지의 상태를 표시한다. 마우스나 키보드 편집 시 이 세가지 상태를 이동하게 된다.
이 렌더러는 주로 BOOLEAN 필드의 값을 표시하고 편집하는 데 사용되지만, 꼭 그럴 필요는 없다. 각각 falseValues와 trueValues에 지정한 값들을 false와 true로 해석한다. 두 속성에 포함되지 않은 값들은 Boolean으로 형변환한 값으로 판단한다. threeStates가 true이면 undefined, null, 빈문자열을 undefined로 해석하고, 아니면 false로 해석한다.
Check mark의 표시 위치는 GridStyles.iconLocation 속성 값으로 지정하고, 셀 경계선과의 간격은 iconOffset 속성으로, check mark와 텍스트의 간격은 iconPadding 속성으로 설정한다.
editable을 true로 지정하면 마우스 클릭으로 셀 값을 변경할 수 있다. 또, spaceKey 속성이 true면 space 키를 눌러서 값을 변경할 수 있다. 이 때, threeState가 true면, true -> false -> undefined -> true 세 가지 상태로 값이 순환 변경되고, 아니면 true -> false -> true 두 가지 상태로 변경된다. 수정되는 값은 falseValues나 trueValues로 지정한 값들 중 첫번째 값을 사용하므로 주의해야 한다.
editOnClick이 true면 마우스로 클릭한 셀이 포커스셀이 아닌 상태일 때에도 바로 값이 수정된다.
컬럼 렌더러 설정시 type을 "check"로 지정한다.
grid.setColumns([{
name: "Shipping",
fieldName: "Shipping",
renderer: {
type: "check",
editable: true,
dblClickEditable: false,
threeStates: true,
editOnClick: true,
spaceKey: true,
trueValues: "True",
falseValues: "False"
},
header: {
text: "Check Renderer",
styles: {
fontBold: true
}
}
},
...
]);