체크바(CheckBar)는 그리드의 특정 행을 선택하기 위해 사용합니다. CheckBar에 의해 선택된 특정 행들은 복사나 삭제등 명령을 일괄처리 하기위해 사용할 수 있습니다.
체크바의 설정을 변경하는 것은 setCheckBar()를 사용 합니다. 현재 설정된 상태를 확인하는 것은 getCheckBar()을 사용 합니다.
visible
표시하지 않음
1 2 3 gridView.setCheckBar({ visible: false });
1 2 3
gridView.setCheckBar({ visible: false });
표시
1 2 3 gridView.setCheckBar({ visible: true });
gridView.setCheckBar({ visible: true });
체크바의 속성중 exclusive 속성을 true 로 설정하면 라디오 버튼처럼 하나의 행만 체크할 수 있습니다.
exclusive
하나의 행만 체크 가능
1 2 3 gridView.setCheckBar({ exclusive: true });
gridView.setCheckBar({ exclusive: true });
모든 행 체크 가능
1 2 3 gridView.setCheckBar({ exclusive: false });
gridView.setCheckBar({ exclusive: false });
기본값으로 체크바의 헤드영역에 v 표시가 되어 있습니다. 이 영역을 클릭하게 되면 모든 행이 체크되게 됩니다.
showAll
1 2 3 gridView.setCheckBar({ showAll: false });
gridView.setCheckBar({ showAll: false });
1 2 3 gridView.setCheckBar({ showAll: true });
gridView.setCheckBar({ showAll: true });
한 행씩 체크할 수 있는 API: checkItem(), checkRow() 여러 행을 체크할 수 있는 API: checkItems(), checkRows() 전체 행을 체크할 수 있는 API: checkAll()
한 행씩 체크할 수 있는 API
여러 행을 체크할 수 있는 API
전체 행을 체크할 수 있는 API
checkItem: 0행 체크
1 gridView.checkItem(0, true);
1
gridView.checkItem(0, true);
checkItem: 0행 체크 해제
1 gridView.checkItem(0, false);
gridView.checkItem(0, false);
아무 컬럼이나 컬럼의 헤더를 클릭하여 소트 후 아래 버튼을 클릭하세요. checkRow: 0행 체크
1 gridView.checkRow(0, true);
gridView.checkRow(0, true);
checkRow: 0행 체크 해제
1 gridView.checkRow(0, false);
gridView.checkRow(0, false);
dataRow, itemIndex가 다르기 때문에 결과가 다릅니다.
checkItems: [1, 2]행 체크
1 gridView.checkItems([1,2], true);
gridView.checkItems([1,2], true);
checkItems: [1, 2]행 체크 해제
1 gridView.checkItems([1,2], false);
gridView.checkItems([1,2], false);
아무 컬럼의 헤더를 클릭하여 소트 후 아래 버튼을 클릭하세요. checkRows: [1, 2]행 체크
1 gridView.checkRows([1,2], true);
gridView.checkRows([1,2], true);
checkRows: [1, 2]행 체크 해제
1 gridView.checkRows([1,2], false);
gridView.checkRows([1,2], false);
(Only JS Support)
체크바의 헤드와 풋 영역에 글자나 이미지를 표시할 수 있습니다. 아래 속성을 사용하려면 showAll속성의 값은 false 이어야 합니다.
headText
footText
headImageUrl
footImageUrl
Text 표시
1 2 3 4 5 6 7 gridView.setCheckBar({ showAll: false, headText: "H", footText: "F", headImageUrl: null, footImageUrl: null });
1 2 3 4 5 6 7
gridView.setCheckBar({ showAll: false, headText: "H", footText: "F", headImageUrl: null, footImageUrl: null });
Image 표시
1 2 3 4 5 6 7 gridView.setCheckBar({ showAll: false, headText: null, footText: null, headImageUrl: "/resource/image/common/dot_arrow2_top.gif", footImageUrl: "/resource/image/common/dot_arrow2_bottom.gif" });
gridView.setCheckBar({ showAll: false, headText: null, footText: null, headImageUrl: "/resource/image/common/dot_arrow2_top.gif", footImageUrl: "/resource/image/common/dot_arrow2_bottom.gif" });
아래와 같은 수식을 사용하여 체크바에 체크 가능 여부를 제어할 수 있습니다. expression 참고 state = 'c': 새로 추가된 행만 체크 가능 values['OrderID'] = '10248': OrderID필드값이 10248인 행만 체크 가능 row < 10: itemIndex가 10 이하인 행만 체크 가능 datarow < 10: dataRow가 10 이하인 행만 체크 가능
state = 'c'
values['OrderID'] = '10248'
row < 10
datarow < 10
이러한 수식들을 checkBar.checkableExpression 에 설정 후 gridView.applyCheckable() 사용하여 그리드에 적용시킬 수 있습니다. gridView.setCheckableExpression()을 사용하여 설정과 적용을 한번에 적용할 수도 있습니다. 적용된 체커블 상태의 초기화는 gridView.resetCheckables()을 사용합니다.
수식만 설정
1 2 3 gridView.setCheckBar({ checkableExpression: "values['OrderID'] = '10248'" });
gridView.setCheckBar({ checkableExpression: "values['OrderID'] = '10248'" });
수식을 그리드에 적용
1 gridView.applyCheckables();
gridView.applyCheckables();
수식의 설정과 적용을 동시에
1 gridView.setCheckableExpression("row < 10", true);
gridView.setCheckableExpression("row < 10", true);
초기화
1 gridView.resetCheckables();
gridView.resetCheckables();
선택된 rowId 값 가져오기
1 2 var rows = gridView.getCheckedRows(true); alert(rows);
1 2
var rows = gridView.getCheckedRows(true); alert(rows);
선택된 itemIndex 값 가져오기
1 2 var items = gridView.getCheckedItems(); alert(items);
var items = gridView.getCheckedItems(); alert(items);
