AUISoft
AUIGrid 3.0.13 Documentation
CheckBoxHeaderRenderer

체크박스 헤더 렌더러는 특정 칼럼의 헤더에 체크박스가 출력되는 헤더 렌더러입니다.

체크박스 헤더 렌더러는 칼럼 레이아웃을 정의할 때 개별 칼럼의 headerRenderer 속성 값인 Object 형태로 선언되어야 합니다.

칼럼의 headerRenderer 속성의 type 으로만 설정 가능합니다.

아래는 설정 예제 입니다.
var columnLayout = [ {
     dataField : "isAvailable",
     headerText : "Avaliable",
     width : 80,
     headerRenderer : {
            type : "CheckBoxHeaderRenderer",
            position : "right", // headerText 기준 오른쪽에 위치
            onClick : function(event) { // 클릭 이벤트 핸들러
                alert("columnIndex : " + event.columnIndex + ", checked : " + event.checked);
            }
      }
}, {
 ...
}];
NameDescription
checkableFunction
Type : Function   Version: 3.0.7.1

사용자가 체크 박스를 클릭하여 체크 상태를 변경하고자 할 때 변경을 허락할지 여부를 지정할 수 있는 함수 입니다.

파라메터 설명

  • columnIndex : (Number) 칼럼 인덱스
  • isChecked : (Boolean) 현재 체크 박스 체크 여부
  • cItem : (Object) 칼럼 아이템

Return : (Boolean) true 를 반환하면 사용자가 자유롭게 체크 변경이 가능하며, false 반환 시 체크 상태를 기존으로 유지시키고 기본 행위를 하지 않습니다.

함수 전체 작성 예는 다음과 같습니다.

checkableFunction :  function(columnIndex, isChecked, cItem) {
       if(원하는 조건) {
              return false; // false 반환하면 체크 상태 변경을 허락하지 않으며 기본행위 안함.
        }
        return true;
 }
기본값(default) : null.
checked
Type : Boolean   Version: 3.0.4

체크 박스가 최초로 생성될 때 체크 여부를 지정합니다.

dependentMode=true 를 설정하면 checked는 무시되고 데이터에 맞게 결정됩니다.

관련 데모 보기

기본값(default) : false.
dependentMode
Type : Boolean   Version: 3.0.4

그리드(바디)의 체크박스와 헤더의 체크박스가 상호 의존적으로 작용할지 여부를 지정합니다.

이 속성을 true 설정하면 헤더의 체크박스를 클릭했을 때 해당 열의 모든 값을 true | false 로 변경합니다.

dependentMode 는 renderer 의 type 으로 CheckBoxEditRenderer 를 정의할 때만 활성화됩니다.

dependentMode 는 그룹형 헤더에 정의한 경우 무시 됩니다. 일반 헤더에서만 사용 가능합니다.

관련 데모 보기 | 관련 데모 보기

기본값(default) : false.
onClick
Type : Function   Version: 3.0.4

체크 박스를 클릭했을 때 발생하는 이벤트 핸들러를 선언합니다.

이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.

  • type : 이벤트 유형으로 "headerCheckClick" 임
  • pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
  • columnIndex : 칼럼 인덱스
  • checked : 체크 유무 (Boolean)
  • dataField : 행 아이템에서 현재 칼럼이 출력되고 있는 데이터의 KeyField
  • depth : 그룹형 헤더인 경우 해당 헤더의 깊이(depth) (v3.0.11)
  • isBranch : 그룹형 헤더인 경우 그룹 헤더인지 여부 (v3.0.11)

onClick 은 함수를 지정해야 하며 함수 형태는 다음과 같습니다.

onClick : function(event) {
  alert( event.columnIndex + " , " + event.checked );
}

관련 데모 보기

기본값(default) : null.
position
Type : String   Version: 3.0.4

체크 박스가 출력될 위치를 지정합니다. 위치는 headerText 를 기준으로 지정한 위치에 렌더링 됩니다.

유효값은 "top", "bottom", "left", "right" 입니다.

관련 데모 보기

기본값(default) : "bottom".