체크 박스 렌더러를 사용 할 때 헤더에 전체 체크 설정 / 전체 체크 해제를 할 수 있도록 설정한 모습입니다.
다음처럼 headerRenderer 와 renderer 를 각각 "CheckBoxHeaderRenderer", "CheckBoxEditRenderer" 로 설정하면 dependentMode 활성화를 할 수 있습니다.
dataField : "isActive",
headerText : "Active",
headerRenderer : {
type : "CheckBoxHeaderRenderer",
// 헤더의 체크박스가 상호 의존적인 역할을 할지 여부(기본값:false)
// dependentMode 는 renderer 의 type 으로 CheckBoxEditRenderer 를 정의할 때만 활성화됨.
// true 설정했을 때 클릭하면 해당 열의 필드(데모 상은 isActive 필드)의 모든 데이터를 true, false 로 자동 바꿈
dependentMode : true,
position : "bottom" // 기본값 "bottom"
},
renderer : {
type : "CheckBoxEditRenderer",
showLabel : false, // 참, 거짓 텍스트 출력여부( 기본값 false )
editable : true, // 체크박스 편집 활성화 여부(기본값 : false)
checkValue : "Active", // true, false 인 경우가 기본
unCheckValue : "Inactive"
}
모든 데모는 각각 독립적인 단일 HTML 페이지입니다. 마우스 우클릭 후 "소스 보기" (또는 크롬 기준 단축키 Ctrl + U)로 어떻게 작성되었는지 쉽게 확인 할 수 있습니다.
Copyright © AUISoft Co., Ltd.