AUIGrid Documentation

CheckBoxHeaderRenderer

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

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

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

아래는 설정 예제 입니다.


const columnLayout = [{
     dataField : "isAvailable",
     headerText : "Avaliable",
     width : 80,
     headerRenderer : {
            type : "CheckBoxHeaderRenderer",
            position : "right", // headerText 기준 오른쪽에 위치
            onClick : function(event) { // 클릭 이벤트 핸들러
                alert("columnIndex : " + event.columnIndex + ", checked : " + event.checked);
            }
      }
}, {
 ...
}];

Name	Description
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"`