CheckBar
체크바와 관련된 설정 모델
Signature:
export interface CheckBar
Remarks
체크바 영역에서 shift를 누른 상태에서 이전의 행이나 이후의 행을 클릭하면 일괄체크
GridBase.setCheckBar() 사용시 필요한 정보만 입력하면 된다.
Example
gridView.setCheckBar({exclusive: true});
Events
Property | Type | Description |
---|---|---|
checkableCallback | CheckableCallback | 체크 가능 여부를 결정하는 콜백 |
Properties
Property | Type | Description |
---|---|---|
cellStyleCallback | RowBarCellStyleCallback | 셀의 스타일을 지정하기 위한 콜백 |
checkableExpression | string | 체크 가능 여부의 수식 |
checkableOnly | boolean | 체크 가능한 행만 체크할 수 있는지의 여부 |
checkLocation | ColumnHeaderItemLocation | checkBox의 위치를 지정한다. |
displayOrder | number | 체크바, 상태바, 인디케이터 중에서 보여지는 순서 (인덱스) |
exclusive | boolean | 한 행만 체크 가능한지의 여부 |
fieldName | string | checkBar의 체크상태를 dataField와 연결한다. |
focusMove | boolean | checkBox를 클릭했을때 클릭된 행으로 focus이동여부 |
footText | string | foot 영역에 표시할 텍스트 |
headText | string | head 영역에 표시할 텍스트 |
headThreeStates | boolean | 일부만 체크되었을때 head영역의 checkBox에 일부선택 표시여부 |
itemGap | number | checkBox와 headText의 간격을 지정한다. |
mergeRule | string | CheckBox 머지 규칙 |
popupMenu | PopupMenuItem[] | string | 팝업 메뉴 |
showAll | boolean | 체크바 헤드에 “v” 표시 여부 |
showFocus | boolean | focus 된 행에 해당하는 셀의 스타일 적용여부 여부 |
showGroup | boolean | 행 그룹핑시 그룹 헤더 영역에 체크박스 표시 여부 |
showGroupFooter | boolean | 행 그룹핑시 그룹 푸터 영역에 체크박스 표시 여부 |
showSelection | boolean | 데이터 선택 영역에 맞춰 관련된 셀들의 스타일 적용 여부 |
sumText | string | summary 영역에 표시할 텍스트 |
syncHeadCheck | boolean | 데이터 영역의 전체 item 체크 상태와 체크바의 헤드 연동 여부 |
toggleRadio | boolean | exclusive가 true 일때 radio의 check상태가 전환된다. |
useImages | boolean | checkBar의 check를 image를 이용해서 표시한다. |
visible | boolean | 표시 여부 |
visibleOnly | boolean | 체크바 헤드를 체크하여 전체선택 시 보이는 행만 체크할 것인지의 여부 |
width | number | 너비 |
Events Desc
checkableCallback
체크 가능 여부를 결정하는 콜백
Type
- CheckableCallback
Remarks:
false
반환 시 체크가 불가능하다.
Example:
const f = function(dataSource, item) {
if (item.value) {
return item.value !== 'doNotCheck';
}
else {
return false;
}
}
gridView.setCheckBar({checkableCallback: f});
Properties Desc
cellStyleCallback
셀의 스타일을 지정하기 위한 콜백
Type
- RowBarCellStyleCallback
checkableExpression
체크 가능 여부의 수식
Type
- string
checkableOnly
체크 가능한 행만 체크할 수 있는지의 여부
Type
- boolean
Remarks:
checkableExpression 에서 체크 가능 여부를 지정할 수 있다.
checkLocation
checkBox의 위치를 지정한다.
Type
- ColumnHeaderItemLocation
Remarks:
headText가 표시될때 checkBox의 위치를 지정한다. checkBar의 너비 또는 GridHeader.height 높이를 적절히 변경해야 한다.
displayOrder
체크바, 상태바, 인디케이터 중에서 보여지는 순서 (인덱스)
Type
- number
Remarks:
숫자가 작을 수록 왼쪽에 배치된다.
exclusive
한 행만 체크 가능한지의 여부
Type
- boolean
fieldName
checkBar의 체크상태를 dataField와 연결한다.
Type
- string
focusMove
checkBox를 클릭했을때 클릭된 행으로 focus이동여부
Type
- boolean
footText
foot 영역에 표시할 텍스트
Type
- string
headText
head 영역에 표시할 텍스트
Type
- string
headThreeStates
일부만 체크되었을때 head영역의 checkBox에 일부선택 표시여부
Type
- boolean
itemGap
checkBox와 headText의 간격을 지정한다.
Type
- number
mergeRule
CheckBox 머지 규칙
Type
- string
Remarks:
지정된 field에서 동일한 값을 가지는 행들의 CheckBox를 묶어서 보여지도록 한다.
Example:
gridView.checkBar.mergeRule = "values['fieldName']";
gridView.checkBar.mergeRule = "values['field1'] + values['field2']";
popupMenu
팝업 메뉴
Type
- PopupMenuItem[] | string
showAll
체크바 헤드에 “v” 표시 여부
Type
- boolean
Remarks:
표시 후 체크 시 전체 체크
showFocus
focus 된 행에 해당하는 셀의 스타일 적용여부 여부
Type
- boolean
Remarks:
true
면 focus 된 행에 해당하는 셀을 'rg-checkbar-focus'
스타일로 표시한다.
showGroup
행 그룹핑시 그룹 헤더 영역에 체크박스 표시 여부
Type
- boolean
showGroupFooter
행 그룹핑시 그룹 푸터 영역에 체크박스 표시 여부
Type
- boolean
Remarks:
CheckBar.showGroup이 false
인 경우에는 값이 true
여도 표시되지 않는다.
showSelection
데이터 선택 영역에 맞춰 관련된 셀들의 스타일 적용 여부
Type
- boolean
Remarks:
true
면 데이터 선택 영역에 맞춰 관련된 셀들을 'rg-checkbar-select'
스타일로 표시한다.
sumText
summary 영역에 표시할 텍스트
Type
- string
syncHeadCheck
데이터 영역의 전체 item 체크 상태와 체크바의 헤드 연동 여부
Type
- boolean
Remarks:
데이터행의 모든 item이 체크되면 Head영역에도 자동으로 체크가 됨
toggleRadio
exclusive가 true
일때 radio의 check상태가 전환된다.
Type
- boolean
useImages
checkBar의 check를 image를 이용해서 표시한다.
Type
- boolean
visible
표시 여부
Type
- boolean
visibleOnly
체크바 헤드를 체크하여 전체선택 시 보이는 행만 체크할 것인지의 여부
Type
- boolean
width
너비
Type
- number