Events

단일 셀 클릭 시 발생하는 이벤트입니다.

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

• type : 이벤트 유형
• pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
• rowIndex : 행 인덱스
• columnIndex : 칼럼 인덱스
• value : 셀에 출력되고 있는 값(value)
• headerText : 현재 칼럼의 헤더 텍스트
• item : 해당 행에 출력되고 있는 행 아이템 객체 (Object)
• dataField : 행 아이템에서 현재 칼럼이 출력되고 있는 데이터 필드

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, "cellClick", function( event ) {
      alert("rowIndex : " + event.rowIndex + ", "columnIndex : " + event.columnIndex + " clicked");
});

단일 셀 더블클릭 시 발생하는 이벤트입니다.

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

• type : 이벤트 유형
• pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
• rowIndex : 행 인덱스
• columnIndex : 칼럼 인덱스
• value : 셀에 출력되고 있는 값(value)
• headerText : 현재 칼럼의 헤더 텍스트
• item : 해당 행에 출력되고 있는 행 아이템 객체 (Object)
• dataField : 행 아이템에서 현재 칼럼이 출력되고 있는 데이터 필드

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, "cellDoubleClick", function( event ) {
      alert("rowIndex : " + event.rowIndex + ", "columnIndex : " + event.columnIndex + " dbl clicked");
});

그리드의 칼럼을 사용자가 드래깅으로 자리를 바꾸거나 사이즈를 바꾼 경우 발생하는 이벤트입니다.

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

• type : 이벤트 유형
• pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
• property : 변경된 칼럼의 속성(columnIndex or width) (String)
• dataField : 적용된 칼럼의 dataField 값 (String)
• headerText : 적용된 칼럼의 헤더 텍스트 (String)
• depth : 적용된 칼럼의 depth(계층형인 경우 유효) (Number)
• isBranch : 적용된 칼럼이 브랜치 칼럼인지 여부(계층형인 경우 유효) (Boolean)
• old : 바뀌기 전의 값 (Object)
• current : 사용자에 의해 변경된 새로운 값(현재 값) (Object)

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, "columnStateChange", function(event) {
      let str = "event type : " + event.type;
      str += ", dataField : " + event.dataField;
      str += ", prop : " + event.property;
      str += ", old : " + event.old + ", current : " + event.current;
      alert(str);
});

그리드에서 마우스 오른쪽 버턴 즉, 컨텍스트 메뉴를 활성화 했을 경우 발생하는 이벤트입니다.

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

• type : 이벤트 유형
• pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
• target : 헤더(header) 또는 바디(body) 에서 발생했는지를 나타냄
• dataField : 컨텍스트 활성화 된 지점의 열(Column) 데이터 필드명 (String)
• headerText : 컨텍스트 활성화 된 지점의 열(Column) 헤더 텍스트 (String)
• columnIndex : 컨텍스트 활성화 된 지점의 열(Column) 인덱스 (Number)
• rowIndex : 바디 컨텍스트 활성화 된 지점의 행(Row) 인덱스 (target 값이 "body" 인 경우에만 유효) (Number)
• depth : 헤더 컨텍스트 활성화 된 지점의 헤더 그룹핑 depth 값(target 값이 "header" 인 경우만 유효) (Number)
• item : 해당 행(Row)에 출력되고 있는 행 아이템 객체 (Object)
• pageX : 컨텍스트 활성화 된 지점의 전역 좌표 X 값 (Number)
• pageY : 컨텍스트 활성화 된 지점의 전역 좌표 Y 값 (Number)

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, "contextMenu", function( event ) {
     alert(  "이벤트명: " + event.type + ", 컨텍스트 활성화 된 곳 : " + event.target );
});

Return : (Boolean or Array) false 를 반환하면 기본 행위인 기본 컨텍스트를 출력시키지 않습니다. 바디(body) 에서 발생했을 경우 사용자 정의 컨텍스트 메뉴를 Array 로 구성하여 반환하면 동적 컨텍스트 메뉴를 구성합니다.

피벗 그리드 푸터 클릭 시 발생하는 이벤트입니다.

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

• type : 이벤트 유형
• pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
• footerIndex : 푸터 칼럼 인덱스
• footerText : 푸터 텍스트
• footerValue : 포매팅 전 푸터의 값
• pageX : 클릭이 발생한 지점의 전역 X 좌표 값
• pageY : 클릭이 발생한 지점의 전역 Y 좌표 값

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, "footerClick", function( event ) {
     alert(event.type + " : " + event.footerIndex + " text : " + event.footerText);
});

피벗 그리드 푸터 더블 클릭 시 발생하는 이벤트입니다.

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

• type : 이벤트 유형
• pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
• footerIndex : 푸터 칼럼 인덱스
• footerText : 푸터 텍스트
• footerValue : 포매팅 전 푸터의 값
• pageX : 더블 클릭이 발생한 지점의 전역 X 좌표 값
• pageY : 더블 클릭이 발생한 지점의 전역 Y 좌표 값

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, "footerDoubleClick", function( event ) {
     alert(event.type + " : " + event.footerIndex + " text : " + event.footerText);
});

피벗 그리드 헤더 클릭 시 발생하는 이벤트입니다.

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

• type : 이벤트 유형
• pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
• columnIndex : 헤더 칼럼 인덱스
• headerText : 헤더 텍스트
• depth : 헤더의 depth 즉, 헤더를 그룹핑으로 정의한 경우 최상위가 1depth (단일 계층인 경우 depth 는 1)
• item : 칼럼 레이아웃에서 정의한 자신 칼럼 아이템 객체 (Object)
• dataField : 현재 칼럼이 출력되고 있는 데이터의 필드
• pageX : 클릭이 발생한 지점의 전역 X 좌표 값
• pageY : 클릭이 발생한 지점의 전역 Y 좌표 값

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, "headerClick", function( event ) {
     alert(event.type + " : " + event.headerText + ", dataField : " + event.dataField + ", index : " + event.columnIndex + ", depth : " + event.item.depth);
     // 이벤트 핸들링 함수에서 false 를 반환하면 기본 행위를 하지 않음.
     // headerClick 의 기본 행위는 정렬임.
     // return false; // 정렬 실행 안함. 
    
});

피벗 그리드의 수평 스크롤(X 스크롤)이 있는 경우, 수평 스크롤의 값이 변경되었을 때 발생하는 이벤트입니다.

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

• type : 이벤트 유형
• pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
• position : 현재 스크롤의 위치 (Number)
• oldPosition : 변경 전 스크롤의 위치 (Number)
• minPosition : 수직 스크롤의 최대 위치 (Number)
• maxPosition : 수직 스크롤의 최소 위치 (Number)

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, "hScrollChange", function( event ) {
     console.log( event.type + ", position : " + event.position + ", (min : " + event.minPosition + ", max : " + event.maxPosition + ")" );
});

이 이벤트 핸들러에서 무리한 작업을 하면 그리드 스크롤링 시 성능이 저하됩니다.

피벗팅이 시작할 때 발생하는 이벤트입니다.

pivotBegin 이벤트는 pivotComplete 이벤트와 함께 발생합니다.

즉, 피벗팅 계산이 시작하기 전에 pivotBegin 이벤트가 발생하고 피벗팅 계산 완료 후 렌더링까지 완료된 후 pivotComplete 이벤트가 발생합니다.

이 pivotBegion, pivotComplete 이벤트는 피벗팅 연산이 수행될 때마다 다시 발생합니다.

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

• type : 이벤트 유형
• pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
• rowFields : 피벗팅 수행할 행 차원 필드들(Array)
• columnFields : 피벗팅 수행할 열 차원 필드들(Array)
• valueFields : 피벗팅 수행할 값 차원 필드들, 연산자등의 정보들(Array)
• filterFields : 필터 차원 필드들(Array)
• byPanelController : 피벗 패널을 통하여 사용자 조작으로 피벗팅을 하는지 여부(Boolean)

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, ["pivotBegin", "pivotComplete"], function(event) {
    if(event.type === "pivotBegin") {
          // 사용자가 피벗 패널에서 DATE 필드를 "열 차원" 으로 설정한 경우
          // 이런 경우는 피벗팅을 하지 않음
          if(event.byPanelController && event.columnFields.indexOf("DATE") != -1) {
              alert("DATE 필드는 열 차원에 설정할 수 없습니다.");
              return false; // false 를 반환하면 기본 행위인 피벗팅을 하지 않음.
          }
        console.time("피봇 생성 시간");
    } else if(event.type === "pivotComplete") {
        console.timeEnd("피봇 생성 시간");
    }
});

Return : (Boolean) false 를 반환하면 피벗팅을 하지 않습니다.

피벗팅 계산 후 렌더링이 완료될 때 발생하는 이벤트입니다.

pivotComplete 이벤트는 pivotBegin 이벤트와 함께 발생합니다.

즉, 피벗팅 계산이 시작하기 전에 pivotBegin 이벤트가 발생하고 피벗팅 계산 완료 후 렌더링까지 완료된 후 pivotComplete 이벤트가 발생합니다.

이 pivotBegion, pivotComplete 이벤트는 피벗팅 연산이 수행될 때마다 다시 발생합니다.

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

• type : 이벤트 유형
• pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
• rowFields : 피벗팅 수행한 행 차원 필드들
• columnFields : 피벗팅 수행한 열 차원 필드들
• valueFields : 피벗팅 수행한 값 차원 필드들, 연산자등의 정보들
• filterFields : 필터 차원 필드들

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, ["pivotBegin", "pivotComplete"], function(event) {
    if(event.type === "pivotBegin") {
        console.time("피봇 생성 시간");
    } else if(event.type === "pivotComplete") {
        console.timeEnd("피봇 생성 시간");
    }
});

피벗 패널이 생성된 경우(사용 하는 경우) 피벗 패널이 감춰질 때 발생하는 이벤트입니다.

이 이벤트는 피벗 패널이 이미 생성된 후 사용자에 의해 감춰질 때 발생하는 이벤트입니다.

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

• type : 이벤트 유형
• pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
• panelId : 피벗 패널이 생성된 DIV ID

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, "pivotPanelHide", function(event) {
      alert(event.type);
});

피벗 패널이 생성된 경우(사용 하는 경우) 피벗 패널이 보일 때 발생하는 이벤트입니다.

이 이벤트는 피벗 패널이 생성될 때가 아닌 이미 생성된 후 사용자에 의해 감춰지고 다시 보일 때 발생하는 이벤트입니다.

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

• type : 이벤트 유형
• pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
• panelId : 피벗 패널이 생성된 DIV ID

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, "pivotPanelShow", function(event) {
      alert(event.type);
});

사용자가 헤더를 클릭 해서 정렬(Sorting)을 설정하거나 변경, 해제 시 발생하는 이벤트입니다.

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

• type : 이벤트 유형
• pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
• sortingFields : 현재 정렬된 필드 및 정렬 방법들 (Array)

만약 정렬을 "Name 오름차순, County 내림차순" 설정한 경우 다음과 같은 sortingFields 정보를 담고 있습니다.

[{dataField : "name", sortType : 1}, {dataField : "country", sortType : -1}]

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, "sorting", function( event ) {
     console.log(  "이벤트명: " + event.type + ", 현재 소팅 필드 개수 : " + event.sortingFields.length );
});

트리 그리드 일 때 요약 행 아이템의 열기/닫기 상태 변경 시 발생하는 이벤트입니다.

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

• type : 이벤트 유형
• pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
• isOpen : 현재 열린 상태인지 닫힌 상태인지 여부
• rowIndex : 해당 아이템의 rowIndex
• depth : 트리 아이템의 depth 즉, 최상위 브랜치 아이템이 1 depth 이며 아래로 내려갈 수록 depth 1씩 증가함
• item : 해당 행에 출력되고 있는 행 아이템 객체 (Object)

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, "treeOpenChange", function( event ) {
     alert(event.type + " : " + event.isOpen + ", rowIndex : " + event.rowIndex);
});

피벗 그리드의 수직 스크롤(Y 스크롤)이 있는 경우, 수직 스크롤의 값이 변경되었을 때 발생하는 이벤트입니다.

사용자가 마우스 휠이나 다른 특정 행위로 수직 스크롤이 변경되면 발생합니다.

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

• type : 이벤트 유형
• pid : 사용자에 의해 작성된 피벗 그리드의 부모 DIV ID (샘플 상의 myPivotID 와 일치함)
• position : 현재 스크롤의 위치 (Number)
• oldPosition : 변경 전 스크롤의 위치 (Number)
• minPosition : 수직 스크롤의 최대 위치 (Number)
• maxPosition : 수직 스크롤의 최소 위치 (Number)

이 이벤트를 핸들링하는 방법은 다음과 같습니다.

AUIPivot.bind(myPivotID, "vScrollChange", function( event ) {
     console.log( event.type + ", position : " + event.position + ", (min : " + event.minPosition + ", max : " + event.maxPosition + ")" );
});

이 이벤트 핸들러에서 무리한 작업을 하면 그리드 스크롤링 시 성능이 저하됩니다.