AUIGrid Documentation

ButtonHeaderRenderer

버튼 헤더 렌더러는 특정 칼럼의 헤더에 버튼이 출력되는 헤더 렌더러입니다.

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

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

아래는 설정 예제 입니다.


const columnLayout = [{
     dataField : "name",
     headerText : "Name",
     width : 180,
     headerRenderer : {
            type : "ButtonHeaderRenderer",
            position : "right", // headerText 기준 오른쪽에 위치
            text : "버튼 타이틀",
            onClick : function(event) { // 클릭 이벤트 핸들러
                alert("columnIndex : " + event.columnIndex + " 클릭");
            }
      }
}, {
 ...
}];

Name Description

Name	Description
onClick	Type : Function Version: 3.0.4 버튼을 클릭했을 때 발생하는 이벤트 핸들러를 선언합니다. 이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다. type : 이벤트 유형으로 "headerButtonClick" 임 pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함) buttonText : 버튼 텍스트 columnIndex : 칼럼 인덱스 dataField : 행 아이템에서 현재 칼럼이 출력되고 있는 데이터의 KeyField depth : 그룹형 헤더인 경우 해당 헤더의 깊이(depth) (v3.0.11) isBranch : 그룹형 헤더인 경우 그룹 헤더인지 여부 (v3.0.11) onClick 은 함수를 지정해야 하며 함수 형태는 다음과 같습니다. `onClick : function(event) { alert( event.columnIndex + " : " + 클릭 ); }` 관련 데모 보기 기본값(default) : `null`
position	Type : String Version: 3.0.4 버튼이 출력될 위치를 지정합니다. 위치는 headerText 를 기준으로 지정한 위치에 렌더링 됩니다. 유효값은 "top", "bottom", "left", "right" 입니다. 관련 데모 보기 기본값(default) : `"bottom"`
text	Type : String Version: 3.0.4 버튼의 텍스트를 지정합니다. 관련 데모 보기 기본값(default) : `""`

onClick

Type : Function Version: 3.0.4

버튼을 클릭했을 때 발생하는 이벤트 핸들러를 선언합니다.

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

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

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

onClick : function(event) {
  alert( event.columnIndex + " : " + 클릭 );
}