Events

addColumn()으로 칼럼을 추가했을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• columnIndex : 추가된 열의 인덱스
• dataFields : 추가된 열들이 출력하고 있는 데이터의 KeyField들 (Array)

AUIGrid.bind(myGridID, "addColumn", function( event ) {
     console.log(event.type + " 이벤트, 삽입된 열 개수 : " + event.dataFields.length);
});

Insert, Ctrl+Insert 키 또는 addRow(), addTreeRow()로 행을 추가했을 때 발생합니다.

keepViewOnAdd=true이면 정렬과 필터를 적용한 결과에서 표시 가능한 첫 추가 행을 선택하기 전에 발생합니다. 추가한 행이 모두 숨겨져 새 선택이 없어도 이 이벤트는 발생하며, items에는 숨겨진 행을 포함한 추가 행들이 담깁니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• items : 추가된 행(Row) 아이템들 (Array)

AUIGrid.bind(myGridID, "addRow", function( event ) {
     console.log(event.type + " 이벤트, 삽입된 행 개수 : " + event.items.length);
});

Insert, Ctrl+Insert 키 또는 addRow(), addTreeRow()로 행을 추가했을 때 발생합니다.

위의 새 행 선택 설명은 기본값 keepViewOnAdd=false의 동작입니다. keepViewOnAdd=true이면 표시 가능한 첫 추가 행을 선택한 후 발생합니다. 추가 행이 모두 필터 또는 접힌 트리에 가려져 선택이 바뀌지 않은 경우에는 selectionChange 없이 addRow, addRowFinish가 발생합니다. items에는 숨겨진 행도 포함됩니다.

addRowFinish 이벤트와 addRow 이벤트의 차이는 다음과 같습니다.

• addRow : 행 추가 시 그리드가 추가한 행을 선택(selection) 하는데 이 때 selectionChange 이벤트가 발생합니다. addRow 이벤트는 selectionChange 이벤트 이전에 발생합니다.
• addRowFinish : 행 추가 시 그리드가 추가한 행을 선택(selection) 하는데 이 때 selectionChange 이벤트가 발생합니다. addRowFinish 이벤트는 selectionChange 이벤트 이후 발생합니다.

즉, 새행에 선택자가 온 후 무엇인가를 하고 싶다면 addRowFinish 이벤트를 바인딩 하십시오.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• items : 추가된 행(Row) 아이템들 (Array)

AUIGrid.bind(myGridID, "addRowFinish", function( event ) {
     console.log(event.type + " 이벤트, 삽입된 행 개수 : " + event.items.length);
});

addTreeColumn()으로 특정 칼럼의 자식 칼럼을 추가했을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• columnIndex : 추가된 열의 인덱스
• index : 부모를 기준으로 추가된 열의 자식 인덱스
• dataFields : 추가된 열들이 출력하고 있는 데이터의 KeyField들 (Array)
• parentDataField : 추가된 열의 부모의 dataField

AUIGrid.bind(myGridID, "addTreeColumn", function( event ) {
     console.log(event.type + " 이벤트, 삽입된 열 개수 : " + event.dataFields.length + ", 부모 dataField : " + event.parentDataField);
});

관련 데모 보기

편집 가능한 그리드(editable=true)에서 Insert, Ctrl+Insert 키로 새 행을 삽입하기 전에 발생합니다.

이 때 새 행의 초기값을 결정 짓도록 삽입 전에 발생하는 이벤트입니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• columnInfoList : 열(Column)의 출력 정보를 갖는 배열 (Array)
• isClipboard : 붙여 넣기로 인해 새 행이 추가되었는지 여부(Boolean) (v3.0.4 지원)

AUIGrid.bind(myGridID, "beforeInsertRow", function(event) {
    const newRow = {};
    const cols = event.columnInfoList;
    for(let i=0, len=cols.length; i<len; i++) {
        const dataField = cols[i]["dataField"];
        if(dataField === "name") {
            newRow[dataField] = "< New Task >";
        } else {
            newRow[dataField] = "";
        }
    }
    return newRow;
});

Retrun : (Object) 새 행(Row) 아이템의 초기값을 담는 Object 를 반환하면 적용시킵니다. 만약 반환하지 않으면 빈 행이 출력됩니다.

주의 : addRow(), addTreeRow() 로 행(Row)을 추가할 때는 발생하지 않습니다. 즉, 사용자의 키보드 인터페이스 (Insert, Ctrl + Insert) 에 의해서만 발생합니다.

관련 데모 보기

removeColumn()으로 칼럼을 삭제하기 전에 발생합니다. 칼럼 삭제 전 처리가 필요한 경우 사용합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• columnIndexes : 삭제될 열의 인덱스 묶음 (Array)
• dataFields : 삭제될 열의 dataField 묶음 (Array)

AUIGrid.bind(myGridID, "beforeRemoveColumn", function( event ) {
     console.log(event.type + " 이벤트, 삭제될 열 개수 : " + event.dataFields.length);
     //return false; // 반환을 false 로 처리하면 삭제 실행을 취소함.
});

Return : (Boolean) false 를 반환하면 삭제 처리를 하지 않습니다. 따라서 실제 삭제 전 확인 단계를 거칠 수 있습니다.

Ctrl+Delete 키 또는 removeRow(), removeRowByRowId()로 행을 삭제하기 전에 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• softRemoveRowMode : 소프트 제거 모드 사용 여부 즉, 그리드 상에 실제로 삭제될 지 또는 마크 될지 여부
• items : 삭제될 행(Row) 아이템들 (Array)

AUIGrid.bind(myGridID, "beforeRemoveRow", function( event ) {
     console.log(event.type + " 이벤트,  삭제될 행 개수 : " + event.items.length + ", softRemoveRowMode : " + event.softRemoveRowMode);
     //return false; // 반환을 false 로 처리하면 삭제 실행을 취소함.
});

Return : (Boolean) false 를 반환하면 삭제 처리를 하지 않습니다. 따라서 실제 삭제 전 확인 단계를 거칠 수 있습니다.

관련 데모 보기

소프트 삭제로 표시된 행을 removeSoftRows()로 실제 제거하기 전에 발생합니다. softRemoveRowMode=true인 경우의 삭제 처리에 사용합니다.

이를 그리드에서 실제로 삭제하는 메소드인 AUIGrid.removeSoftRows()를 호출 한 경우 실제 삭제 전에 발생하는 이벤트입니다.

이 이벤트는 softRemoveRowMode 를 false 로 설정한 경우 발생하지 않습니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• items : 삭제될 행(Row) 아이템들 (Array)

AUIGrid.bind(myGridID, "beforeRemoveSoftRows", function( event ) {
     console.log(event.type + " 이벤트, 삭제될 행 개수 : " + event.items.length);
});

Return : (Boolean) false 를 반환하면 삭제 처리를 하지 않습니다. 따라서 실제 삭제 전 확인 단계를 거칠 수 있습니다.

셀을 클릭했을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• rowIndex : 행 인덱스
• columnIndex : 칼럼 인덱스. 밴드형 상위 셀은 첫 하위 leaf의 위치
• depth : 밴드형 바디에서 헤더 기준 칼럼 계층 깊이. 최상위는 1
• bodyCellKind : 밴드형 셀의 종류. 상위 셀은 "branch", 하위 셀은 "leaf"
• dataField : 칼럼의 데이터 필드명
• editable : 해당 셀의 수정 가능 여부
• value : 셀 값
• rowIdValue : rowIdField로 지정한 행 고유 값
• headerText : 헤더 텍스트
• item : 해당 행의 데이터 (Object)
• treeIcon : 트리그리드인 경우 트리그리드의 열기/닫기 버턴 클릭 여부(Boolean)
• orgEvent : 자바스크립트의 오리지널 이벤트 객체 (Object)

AUIGrid.bind(myGridID, "cellClick", function( event ) {
      console.log("rowIndex : " + event.rowIndex + ", columnIndex : " + event.columnIndex + " clicked");
});

관련 데모 보기

셀을 더블클릭했을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• rowIndex : 행 인덱스
• columnIndex : 칼럼 인덱스. 밴드형 상위 셀은 첫 하위 leaf의 위치
• depth : 밴드형 바디에서 헤더 기준 칼럼 계층 깊이. 최상위는 1
• editable : 해당 셀의 수정 가능 여부
• value : 셀 값
• rowIdValue : rowIdField로 지정한 행 고유 값
• headerText : 헤더 텍스트
• item : 해당 행의 데이터 (Object)
• bodyCellKind : 밴드형 셀의 종류. 상위 셀은 "branch", 하위 셀은 "leaf"
• dataField : 칼럼의 데이터 필드명
• orgEvent : 자바스크립트의 오리지널 이벤트 객체 (Object)

AUIGrid.bind(myGridID, "cellDoubleClick", function( event ) {
      console.log("rowIndex : " + event.rowIndex + ", columnIndex : " + event.columnIndex + " dbl clicked");
});

관련 데모 보기

셀 편집을 시작하기 전에 발생합니다. false를 반환하면 편집을 막습니다. true를 반환해도 editable:false 설정은 바뀌지 않습니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• rowIndex : 행 인덱스
• columnIndex : 칼럼 인덱스. 밴드형 상위 셀은 첫 하위 leaf의 위치
• depth : 밴드형 바디에서 헤더 기준 칼럼 계층 깊이. 최상위는 1
• value : 원래 데이터의 해당 셀 값(value)
• headerText : 헤더 텍스트
• item : 해당 행의 데이터 (Object)
• bodyCellKind : 밴드형 셀의 종류. 상위 셀은 "branch", 하위 셀은 "leaf"
• dataField : 칼럼의 데이터 필드명
• position : 셀의 전역 좌표계(Body 기준) 또는 지역 좌표계(그리드 부모 기준) 위치(x좌표 : event.position.x, y좌표 : event.position.y, x지역좌표 : event.position.localX, y지역좌표 : event.position.localY)
• size : 해당 셀의 가로, 세로 사이즈(width : event.size.width, height : event.size.height)
• isClipboard : 붙여 넣기(Ctrl+V) 로 이벤트가 발생했는지 여부 (Boolean)
• which : 편집 시작을 어떤 방식으로 수행 했는지에 대한 정보(String or Number)

AUIGrid.bind(myGridID, "cellEditBegin", function( event ) {
      console.log("rowIndex : " + event.rowIndex + ", columnIndex : " + event.columnIndex + " cellEditBegin");
      // return false; // false, true 반환으로 동적으로 수정, 편집 제어 가능
});

Return : (Boolean) false 를 반환하면 편집, 수정을 못하도록 막습니다.

관련 데모 보기

Escape 키 등으로 셀 편집이 취소되었을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• rowIndex : 행 인덱스
• columnIndex : 칼럼 인덱스. 밴드형 상위 셀은 첫 하위 leaf의 위치
• depth : 밴드형 바디에서 헤더 기준 칼럼 계층 깊이. 최상위는 1
• value : 원래 데이터의 해당 셀 값(value)
• headerText : 헤더 텍스트
• item : 해당 행의 데이터 (Object)
• bodyCellKind : 밴드형 셀의 종류. 상위 셀은 "branch", 하위 셀은 "leaf"
• dataField : 칼럼의 데이터 필드명
• isClipboard : 붙여 넣기(Ctrl+V) 로 이벤트가 발생했는지 여부 (Boolean)
• which : 편집 취소를 어떤 방식으로 수행 했는지에 대한 정보(String or Number)

AUIGrid.bind(myGridID, "cellEditCancel", function( event ) {
      console.log("rowIndex : " + event.rowIndex + ", columnIndex : " + event.columnIndex + " cellEditCancel");
});

관련 데모 보기

셀 편집 결과를 알립니다. oldValue와 value로 변경 전후 값을 확인합니다. 반환값으로 취소할 수 없으며 적용 전 값을 바꾸려면 cellEditEndBefore를 사용하십시오.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• rowIndex : 행 인덱스
• columnIndex : 칼럼 인덱스. 밴드형 상위 셀은 첫 하위 leaf의 위치
• depth : 밴드형 바디에서 헤더 기준 칼럼 계층 깊이. 최상위는 1
• oldValue : 변경 전 셀 값(value)
• value : 변경 된 셀 값(value)
• headerText : 헤더 텍스트
• item : 해당 행의 데이터 (Object)
• bodyCellKind : 밴드형 셀의 종류. 상위 셀은 "branch", 하위 셀은 "leaf"
• dataField : 칼럼의 데이터 필드명
• isClipboard : 붙여 넣기(Ctrl+V) 로 이벤트가 발생했는지 여부 (Boolean)
• which : 편집 완료를 어떤 방식으로 수행 했는지에 대한 정보(String or Number)
• mergeStartIndex : 셀 병합된 셀 전체가 수정 적용되었을 때 병합 시작 인덱스(Number)
• mergeEndIndex : 셀 병합된 셀 전체가 수정 적용되었을 때 병합 종료 인덱스(Number)

AUIGrid.bind(myGridID, "cellEditEnd", function( event ) {
      console.log("rowIndex : " + event.rowIndex + ", columnIndex : " + event.columnIndex + " cellEditEnd");
});

관련 데모 보기

셀 편집을 마치기 직전에 발생합니다. 반환값으로 최종 수정값을 지정할 수 있습니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• rowIndex : 행 인덱스
• columnIndex : 칼럼 인덱스. 밴드형 상위 셀은 첫 하위 leaf의 위치
• depth : 밴드형 바디에서 헤더 기준 칼럼 계층 깊이. 최상위는 1
• oldValue : 변경 전 셀 값(value)
• value : 변경 된 셀 값(value)
• headerText : 헤더 텍스트
• item : 해당 행의 데이터 (Object)
• bodyCellKind : 밴드형 셀의 종류. 상위 셀은 "branch", 하위 셀은 "leaf"
• dataField : 칼럼의 데이터 필드명
• isClipboard : 붙여 넣기(Ctrl+V) 로 이벤트가 발생했는지 여부 (Boolean)
• which : 편집 완료를 어떤 방식으로 수행 했는지에 대한 정보(String or Number)

AUIGrid.bind(myGridID, "cellEditEndBefore", function( event ) {
      return removeComma(event.value); // 사용자가 입력한 값에 컴마가 있으면 제거 후 적용
});

Return : (Any) 최종 수정값. undefined이거나 반환값이 없으면 event.value를 사용합니다. 이전 값을 유지하려면 event.oldValue를 반환하십시오. 숫자, Boolean, null 등 실제 데이터 타입을 유지하여 반환합니다.

터치 기기에서 셀을 길게 눌렀을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• rowIndex : 행 인덱스
• columnIndex : 칼럼 인덱스
• value : 셀 값
• headerText : 헤더 텍스트
• item : 해당 행의 데이터 (Object)
• dataField : 칼럼의 데이터 필드명
• orgEvent : 자바스크립트의 오리지널 이벤트 객체 (Object)

AUIGrid.bind(myGridID, "cellLongTap", function( event ) {
      console.log("rowIndex : " + event.rowIndex + ", columnIndex : " + event.columnIndex + " longTapped");
});

사용자가 칼럼을 드래그하여 위치나 너비를 변경했을 때 발생합니다.

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

AUIGrid.bind(myGridID, "columnStateChange", function(event) {
     let str = "event type : " + event.type;
     str += ", dataField : " + event.dataField;
     str += ", prop : " + event.property;
     str += ", old : " + event.old + ", current : " + event.current;
     console.log(str);
});

헤더 또는 바디에서 마우스 오른쪽 버튼으로 컨텍스트 메뉴를 열 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• target : 헤더(header) 또는 바디(body) 에서 발생했는지를 나타냄
• bodyCellKind : 밴드형 셀의 종류. 상위 셀은 "branch", 하위 셀은 "leaf"
• dataField : 컨텍스트 활성화 된 지점의 열(Column) 데이터 필드명 (String)
• headerText : 컨텍스트 활성화 된 지점의 열(Column) 헤더 텍스트 (String)
• columnIndex : 컨텍스트 활성화 된 지점의 열(Column) 인덱스 (Number)
• rowIndex : 바디 컨텍스트 활성화 된 지점의 행(Row) 인덱스 (target 값이 "body" 인 경우에만 유효) (Number)
• depth : 헤더 또는 밴드형 바디 칼럼의 계층 깊이. 최상위는 1 (Number)
• item : 해당 행의 데이터 (Object)
• pageX : 컨텍스트 활성화 된 지점의 전역 좌표 X 값 (Number)
• pageY : 컨텍스트 활성화 된 지점의 전역 좌표 Y 값 (Number)

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

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

관련 데모 보기

복사를 시작할 때 발생합니다. 반환값으로 복사를 취소하거나 복사할 텍스트를 바꿀 수 있습니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• data : 클립보드에 복사할 값 (String)

AUIGrid.bind(myGridID, "copyBegin", function(event) {
     console.log("복사 시작!!");
     console.log(event.data);
     const rows = event.data.split("\r\n"); // 캐리지리턴으로 행 구분
     console.log(rows);

     // 클립보드에 복사하는 값은 2행으로 구성된 1행-"a,b,c" 2행-"1,2,3" 임
     // 클립보드는 TSV 데이터로 작성합니다.
     return "a\tb\tc\r\n1\t2\t3"; // 반환되는 값이 곧 클립보드로 복사됨.
});

Retrun : (Boolean or String) 만약 false 를 반환하면 기본 행위인 복사를 하지 않습니다. 또한 TSV 데이터로 행구분은 캐리지리턴(\r\n)으로 구성된 스트링을 반환하면 해당 값을 클립보드에 적용시킵니다.

관련 데모 보기

클립보드에 복사할 텍스트를 전달한 뒤 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• data : 클립보드에 복사된 값 (String)

data는 최종 복사 텍스트이며 copyBegin에서 바꾼 문자열도 반영합니다.

관련 데모 보기

행 드래그를 시작할 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• rowIndex : 드래깅 시작 행(Row) 인덱스
• items : 드래깅 되는 행(Row) 아이템들 (Array)

AUIGrid.bind(myGridID, "dragBegin", function( event ) {
   if(event.rowIndex === 0) {   
       return false; // 0번째 행은 드래깅 막음
   }
});

Retrun : (Boolean or String) 만약 false 를 반환하면 기본 행위인 행(Row) 드래깅을 하지 않습니다. 그리고 String 을 반환하면 해당 String 이 드래깅 텍스트로 출력됩니다.

선택한 셀 범위의 손잡이로 드래그를 시작할 때 발생합니다. false를 반환하면 시작하지 않습니다.

• pid, type: 그리드 ID와 이벤트 이름
• rowIndex, columnIndex: 시작 범위의 왼쪽 위 좌표
• rowIndexRange, columnIndexRange: 시작 범위의 오른쪽 아래 좌표(포함)
• ctrlKey, shiftKey, metaKey: 입력 보조키 상태

Also See : enableDragCells | dropCellsEndBefore | dropCellsEnd

행 드래그 후 드롭이 성공하지 못했을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• pidToDrop : 드랍되는 그리드의 부모 DIV ID
• fromRowIndex : 드래깅된 시점의 행(Row) 인덱스
• toRowIndex : 드랍되는 그리드의 드랍 시점의 행(Row) 인덱스. 유효한 드롭 위치가 없어 취소된 경우 undefined입니다.
• direction : 드래깅 시점에서 드랍되는 곳의 행(Row) 인덱스가 증가한 경우 true (Boolean). toRowIndex가 undefined인 경우 false입니다.
• items : 드래깅되고 있으며 드랍될 행(Row) 아이템들 (Array)

AUIGrid.bind(myGridID, "dropCancel", function(event ) {
   console.log(event.pidToDrop + " 그리드에 " + event.items.length + " 행(들)을 드랍하는데 실패하였습니다.");
});

시작된 셀 드래그를 Esc, 터치 취소, 창 포커스 이탈 또는 드롭 거부로 취소할 때 발생합니다. 시작 자체가 거부된 경우는 발생하지 않습니다.

• pid, pidToDrop: 원본 및 목적 그리드 ID(그리드 간 전송에서는 서로 다름)
• fromRowIndex, fromColumnIndex: 원본 왼쪽 위 좌표
• toRowIndex, toColumnIndex: 목적지 왼쪽 위 좌표
• rowCount, columnCount: 범위의 행 수와 열 수
• valuesToDrop: 덮어쓰기 전 목적지 값 배열(행 우선, 원본 값이 아님)
• isMoveMode: true는 이동, false는 복사
• ctrlKey, shiftKey, metaKey: 입력 보조키 상태

목적지가 없으면 toRowIndex와 toColumnIndex는 -1입니다. valuesToDrop은 검사가 시작되기 전 취소에서는 빈 배열입니다. uidsNullMergeOthers는 빈 배열이며 reason으로 취소 원인을 제공합니다.

• escape, touchcancel, blur: 입력 취소
• destroyed: 그리드 제거
• samePosition, outside: 같은 위치 또는 영역 밖
• rejected: 완료 전 이벤트에서 거부
• readonly, validation: 편집 금지 또는 유효성 검사 거부
• changed: 드래그/콜백 도중 데이터나 구조가 변경됨
• unavailable: 드롭을 허용하지 않는 상태

Also See : enableDragCells | dropCellsEndBefore | dropCellsEnd

이 이벤트는 출발지 그리드에서 한 번 발생합니다. 목적지의 행과 칼럼을 조회할 때에는 pidToDrop을 사용하십시오.

셀 범위 이동 또는 복사를 완료한 후 발생합니다.

• pid, pidToDrop: 원본 및 목적 그리드 ID(그리드 간 전송에서는 서로 다름)
• fromRowIndex, fromColumnIndex: 원본 왼쪽 위 좌표
• toRowIndex, toColumnIndex: 목적지 왼쪽 위 좌표
• rowCount, columnCount: 범위의 행 수와 열 수
• valuesToDrop: 덮어쓰기 전 목적지 값 배열(행 우선, 원본 값이 아님)
• isMoveMode: true는 이동, false는 복사
• ctrlKey, shiftKey, metaKey: 입력 보조키 상태

uidsNullMergeOthers는 nullMergeOthersByDrop으로 비운 목적 그리드의 병합 행 ID 배열입니다. 해당 옵션을 사용하지 않았거나 비울 행이 없으면 빈 배열입니다. 같은 행 ID는 한 번만 포함합니다.

AUIGrid.bind(myGridID, "dropCellsEnd", function(event) {
    var key = AUIGrid.getProp(event.pidToDrop, "rowIdField");
    var rows = event.uidsNullMergeOthers.map(function(uid) {
        var row = { ref: "A" };
        row[key] = uid;
        return row;
    });
    AUIGrid.updateRowsById(event.pidToDrop, rows);
});

Also See : enableDragCells | dropCellsEndBefore | dropCellsEnd

이 이벤트는 출발지 그리드에서 한 번 발생합니다. 목적지의 행과 칼럼을 조회할 때에는 pidToDrop을 사용하십시오.

셀 범위의 값을 적용하기 전에 발생합니다. false를 반환하면 원본과 목적지를 모두 보존하며 dropCellsCancel이 발생합니다.

• pid, pidToDrop: 원본 및 목적 그리드 ID(그리드 간 전송에서는 서로 다름)
• fromRowIndex, fromColumnIndex: 원본 왼쪽 위 좌표
• toRowIndex, toColumnIndex: 목적지 왼쪽 위 좌표
• rowCount, columnCount: 범위의 행 수와 열 수
• valuesToDrop: 덮어쓰기 전 목적지 값 배열(행 우선, 원본 값이 아님)
• isMoveMode: true는 이동, false는 복사
• ctrlKey, shiftKey, metaKey: 입력 보조키 상태

isMoveMode의 초깃값은 보조키 상태에 따릅니다. 이벤트 객체의 isMoveMode=false를 지정하면 보조키와 관계없이 복사합니다. 다른 이벤트 필드의 수정은 적용되지 않습니다. 콜백에서 데이터나 칼럼 구조를 교체하면 이전 좌표의 드롭은 취소합니다.

AUIGrid.bind(myGridID, "dropCellsEndBefore", function(event) {
    event.isMoveMode = false; // 항상 복사
    return !event.valuesToDrop.some(function(value) {
        return value != null; // 기존 값이 있으면 거부
    });
});

Also See : enableDragCells | dropCellsEndBefore | dropCellsEnd

이 이벤트는 출발지 그리드에서 한 번 발생합니다. 목적지의 행과 칼럼을 조회할 때에는 pidToDrop을 사용하십시오.

행 드래그 후 드롭이 종료되었을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• pidToDrop : 드랍되는 그리드의 부모 DIV ID
• fromRowIndex : 드래깅된 시점의 행(Row) 인덱스
• toRowIndex : 드랍되는 그리드의 드랍 시점의 행(Row) 인덱스
• dropColumnIndex : 드랍되는 그리드의 드랍 시점의 열(Column) 인덱스
• direction : 드래깅 시점에서 드랍되는 곳의 행(Row) 인덱스가 증가한 경우 true (Boolean)
• items : 드래깅되고 있으며 드랍될 행(Row) 아이템들 (Array)

AUIGrid.bind(myGridID, "dropEnd", function(event ) {
   console.log(event.pidToDrop + " 그리드에 " + event.items.length + " 행(들)을 드랍 완료하였습니다.");
});

행 드롭이 종료되기 직전에 발생합니다. 드롭 동작을 이동(move)으로 처리할지 복사(copy)로 처리할지 결정할 때 사용합니다.

이 이벤트 핸들러에서 드랍의 액션이 "이동(move)" 인지 "복사(copy)" 인지 결정 가능합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• pidToDrop : 드랍되는 그리드의 부모 DIV ID
• fromRowIndex : 드래깅된 시점의 행(Row) 인덱스
• toRowIndex : 드랍되는 그리드의 드랍 시점의 행(Row) 인덱스
• dropColumnIndex : 드랍되는 그리드의 드랍 시점의 열(Column) 인덱스
• direction : 드래깅 시점에서 드랍되는 곳의 행(Row) 인덱스가 증가한 경우 true (Boolean)
• items : 드래깅되고 있으며 드랍될 행(Row) 아이템들 (Array)
• isMoveMode : 드랍 액션이 이동인지 복사인지 결정지을 속성 (Boolean)

AUIGrid.bind(myGridID, "dropEndBefore", function( event ) {
   // 이벤트의 isMoveMode 속성을 false 설정하면 행(Row) 복사를 합니다.
   event.isMoveMode = false;
   if(confirm("드랍하시겠습니까?")) {
       return true;
   }
   return false; // 기본 행위 안함.
});

Retrun : (Boolean) 만약 false 를 반환하면 기본 행위인 행(Row) 드랍을 하지 않습니다.

필터를 설정하거나 변경, 해제했을 때 발생합니다.

filterCache의 필드별 값은 일반 값 필터에서는 배열, numeric 유형 필터에서는 조건 문자열입니다. 함수 기반 필터의 상태도 문자열로 전달될 수 있습니다. getFilterCache()와 같은 표현을 사용하며, 배열 전용 메서드를 사용하기 전에 Array.isArray()로 값의 형태를 확인하십시오.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• filterCache : 현재 필터링 설정된 정보들 (Object)

만약 필터링이 name 필드 "Anna", "Lawrence" 만 출력하게 설정되었다면 다음과 같은 filterCache 정보를 담고 있습니다.

{ "name" : [ "Anna", "Lawrence" ] }

AUIGrid.bind(myGridID, "filtering", function( event ) {
     for(let n in event.filterCache) {
         console.log( event.filterCache[n] );
     }
});

useTreeFilterMenu의 계층 메뉴에서 적용한 필드는 filterCache 값에 { type: "tree", rowIds: string[] } 또는 { type: "group", fields: string[], paths: string[][] } 객체가 포함됩니다. 나머지 일반 및 숫자 필터는 기존 배열, 문자열을 유지합니다. TypeScript에서는 계층 필터를 사용하는 핸들러에 TreeFilteringEvent를 지정하여 객체의 type에 따라 구별할 수 있습니다. 기존 FilteringEvent 선언은 일반 및 숫자 필터 사용 코드와의 호환성을 위해 유지합니다.

관련 데모 보기

푸터 셀을 한 번 클릭했을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• footerIndex : 푸터 열(Column) 인덱스
• footerText : 푸터 텍스트
• footerValue : 포매팅 전 푸터의 값
• pageX : 클릭이 발생한 지점의 전역 X 좌표 값
• pageY : 클릭이 발생한 지점의 전역 Y 좌표 값
• orgEvent : 자바스크립트의 오리지널 이벤트 객체 (Object)

AUIGrid.bind(myGridID, "footerClick", function( event ) {
    console.log(event.type + " : " + event.footerIndex + " text : " + event.footerText);
});

관련 데모 보기

푸터 셀을 더블클릭했을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• footerIndex : 푸터 열(Column) 인덱스
• footerText : 푸터 텍스트
• footerValue : 포매팅 전 푸터의 값
• pageX : 더블 클릭이 발생한 지점의 전역 X 좌표 값
• pageY : 더블 클릭이 발생한 지점의 전역 Y 좌표 값
• orgEvent : 자바스크립트의 오리지널 이벤트 객체 (Object)

AUIGrid.bind(myGridID, "footerDoubleClick", function( event ) {
    console.log(event.type + " : " + event.footerIndex + " text : " + event.footerText);
});

그룹핑을 설정하거나 변경, 해제했을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• groupingFields : 현재 그룹핑 된 그룹핑 필드들 (Array)
• groupingSummary : 그룹핑 썸머리를 설정한 경우 적용되는 썸머리 객체 (Object)

AUIGrid.bind(myGridID, "grouping", function( event ) {
     console.log("이벤트명: " + event.type + ", 현재 그룹핑 필드들 : " + event.groupingFields.join(", ") );
});

칼럼 헤더를 클릭했을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• columnIndex : 헤더 열(Column) 인덱스
• headerText : 헤더 텍스트
• depth : 헤더의 depth 즉, 헤더를 그룹핑으로 정의한 경우 최상위가 1depth (단일 계층인 경우 depth 는 1)
• item : 열(Column) 레이아웃에서 정의한 자신 열(Column) 아이템 객체 (Object)
• dataField : 현재 열(Column)이 출력되고 있는 데이터의 KeyField
• pageX : 클릭이 발생한 지점의 전역 X 좌표 값
• pageY : 클릭이 발생한 지점의 전역 Y 좌표 값
• orgEvent : 자바스크립트의 오리지널 이벤트 객체 (Object)

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

Return : (Boolean) false 를 반환하면 기본 행위인 정렬을 실행하지 않습니다.

bodyLayoutMode="band"에서 bodyCell=true와 dataField를 갖는 branch 헤더는 자신의 값을 정렬합니다. false를 반환하면 정렬을 취소합니다. 브랜치 헤더와 바디 상위 셀은 첫 하위 leaf의 columnIndex와 헤더 기준 depth를 공유합니다. depth는 1부터 시작합니다.

관련 데모 보기

가로 스크롤이 있는 그리드에서 가로 스크롤 위치가 변경되면 발생합니다. 현재 위치와 이동 범위는 이벤트 객체에서 확인할 수 있습니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• position : 현재 스크롤의 위치 (Number)
• oldPosition : 변경 전 스크롤의 위치 (Number)
• minPosition : 수평 스크롤의 최소 위치 (Number)
• maxPosition : 수평 스크롤의 최대 위치 (Number)

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

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

Alt+Shift+오른쪽 방향키 또는 indentTreeDepth()로 행을 들여썼을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• items : 실제로 행 깊이(depth) 적용된 행(Row) 아이템들 (Array)

AUIGrid.bind(myGridID, "indent", function( event ) {
     console.log(event.type + " 이벤트, 적용된 행 개수 : " + event.items.length);
});

그리드에서 키를 눌렀을 때 발생합니다.

그리드에서 특정 키는 미리 지정된 행위를 합니다.(예: 화살표 키-선택 이동, Insert 키-행(Row) 삽입 등)

이런 약속된 행위를 막고 사용자가 원하는 코드를 실행시킬 수 있습니다.

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• keyCode : 키보드 누른 경우 해당 키코드 번호 (Number)
• ctrlKey : Ctrl 키 같이 눌렀는지 여부 (Boolean)
• shiftKey : Shift 키 같이 눌렀는지 여부 (Boolean)
• orgEvent : 자바스크립트의 오리지널 이벤트 객체 (Object)

AUIGrid.bind(myGridID, "keyDown", function(event) {
    if(event.keyCode === 13) { // 엔터 키
         console.log("엔터 키 누름");
         return false; // 선택 아래로 내리지 않음(즉, 기본행위 안함)
    }
    return true;
});

Retrun : (Boolean) 만약 false 를 반환하면 그리드에 미리 지정된 행위를 하지 않습니다.

참고 : 그리드에 기본 단축키를 변경하거나 새로운 단축키를 추가할 수 있는 이벤트입니다.

관련 데모 보기

그리드에서 문자열을 검색했지만 일치하는 값을 찾지 못했을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• term : 사용자가 찾고자 했던 문자열(String)
• wrapFound : wrapSearch 를 한 경우 한 바퀴 돌아 같은 행(Row)을 찾은 경우. 즉, 문자열에 해당되는 행이 단 1개 인 경우 true임

AUIGrid.bind(myGridID, "notFound", function( event ) {
    console.log('다음 문자열을 찾을 수 없습니다 - "' + event.term + '"');
});

Alt+Shift+왼쪽 방향키 또는 outdentTreeDepth()로 행을 내어썼을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• items : 실제로 행 깊이(depth) 적용된 행(Row) 아이템들 (Array)

AUIGrid.bind(myGridID, "outdent", function( event ) {
     console.log(event.type + " 이벤트, 적용된 행 개수 : " + event.items.length);
});

페이징(usePaging=true)을 사용하는 그리드에서 페이지가 변경되었을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• currentPage : 현재 페이지 번호
• oldPage : 변경 되기 전의 페이지 번호
• totalPageCount : 전체 페이지 수

AUIGrid.bind(myGridID, "pageChange", function(event) {
    console.log("eventType : " + event.type + ", currentPage : " + event.currentPage + ", oldPage : " + event.oldPage);
 });

페이징을 사용하는 그리드에서 한 페이지에 표시할 행 수가 변경되었을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• rowCount : 현재 1페이지에 출력되는 행(Row)의 개수
• oldRowCount : 이전의 1페이지에 출력되었던 행(Row)의 개수
• totalPageCount : 전체 페이지 개수

AUIGrid.bind(myGridID, "pageRowCountChange", function(event ) {
   console.log("페이지 행 개수 변경 이벤트 : " + event.oldRowCount + " → "  + event.rowCount + ", 전체 페이지 수 : " + event.totalPageCount);
});

붙여넣기를 시작할 때 발생합니다. 반환값으로 붙여넣기를 취소하거나 적용할 데이터를 바꿀 수 있습니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• clipboardData : 클립보드에 저장된 값(String)

AUIGrid.bind(myGridID, "pasteBegin", function(event) {
     console.log("붙여 넣기 시작!!");
     console.log(event.clipboardData);
     // return false; // 붙여 넣기 안함(취소 시킴)
     // event.clipboardData 를 사용자가 파싱하여 2중 배열로 반환하면 해당 값을 그리드의 붙여넣기로 적용
     // 다음처럼 반환하면 4개의 셀에 대하여 1행에 각각 "a1", "a2" 그리고 2행에 "b1", "b2" 가 적용됩니다. 
     // return [["a1", "a2"], ["b1", "b2"]];
});

Retrun : (Boolean or Array) 만약 false 를 반환하면 기본 행위인 붙여 넣기를 하지 않습니다. 또한 Array 을 반환하면 그 반환값을 그리드에 붙여 넣기 적용시킵니다.

관련 데모 보기

붙여넣기 처리를 마친 뒤 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• clipboardData : 그리드에 붙여 넣기 된 데이터 (Array)

AUIGrid.bind(myGridID, "pasteEnd", function(event) {
     AUIGrid.setSelectionByIndex(0, 0); // 0, 0 으로 선택자 이동시킴.
     console.log("붙여 넣기 완료!!");
});

clipboardData는 붙여넣기 입력 배열이며 성공한 셀 목록은 아닙니다. 셀별 변경 결과는 cellEditEnd에서 확인하십시오.

데이터가 입력되어 그리드 렌더링이 완료되고 접근할 수 있게 되었을 때 발생합니다.

이 이벤트는 데이터가 변경되었을 때 다시 발생됩니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID

AUIGrid.bind(myGridID, "ready", function(event) {
    console.log(event.type);
});

removeColumn()으로 칼럼을 삭제했을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• dataFields : 삭제된 열의 dataField 묶음 (Array)

AUIGrid.bind(myGridID, "removeColumn", function( event ) {
     console.log(event.type + " 이벤트, 삭제된 열 개수 : " + event.dataFields.length);
});

Ctrl+Delete 키 또는 removeRow(), removeRowByRowId()로 행을 삭제했을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• softRemoveRowMode : 소프트 제거 모드 사용 여부 즉, 그리드 상에 실제로 삭제가 됐는지 또는 마크 됐지는 여부
• items : 삭제된 행(Row) 아이템들 (Array)

AUIGrid.bind(myGridID, "removeRow", function( event ) {
     console.log(event.type + " 이벤트, 삭제된 행 개수 : " + event.items.length + ", softRemoveRowMode : " + event.softRemoveRowMode);
});

소프트 삭제로 표시된 행을 removeSoftRows()로 실제 제거했을 때 발생합니다.

이를 그리드에서 실제로 삭제하는 메소드인 AUIGrid.removeSoftRows()를 호출 한 경우 발생하는 이벤트입니다.

이 이벤트는 softRemoveRowMode 를 false 로 설정한 경우 발생하지 않습니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• items : 삭제된 행(Row) 아이템들 (Array)

AUIGrid.bind(myGridID, "removeSoftRows", function( event ) {
     console.log(event.type + " 이벤트, 삭제된 행 개수 : " + event.items.length);
});

관련 데모 보기

[deprecated Ver 2.8] 이 이벤트는 event 객체가 아닌 checked 값 파라메터로 갖습니다. rowAllChkClick 이벤트를 사용하십시오.

엑스트라 체크박스 열(Column)에 있는 전체 선택 체크박스 클릭 시 발생합니다.

AUIGrid.bind(myGridID, "rowAllCheckClick", function( checked ) {
     console.log("전체 선택  checked : " + checked);
});

행 체크박스 칼럼의 헤더에 있는 전체 체크박스를 클릭했을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• checked : 체크 유무 (Boolean)
• orgEvent : 자바스크립트의 오리지널 이벤트 객체 (Object)

AUIGrid.bind(myGridID, "rowAllChkClick", function( event ) {
     console.log("전체 선택 checked : " + event.checked);
});

엑스트라 행 체크박스를 클릭했을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• checked : 체크 여부 (Boolean)
• rowIndex : 행 인덱스
• item : 해당 행의 데이터 (Object)
• shiftKey : 쉬프트키를 누른 채 클릭했는지 여부(Boolean)
• shiftIndex : 쉬프트키를 누른 채 클릭했을 때 다중 선택 설정/해제 되는 상대적 행(Row) 인덱스
• orgEvent : 자바스크립트의 오리지널 이벤트 객체 (Object)

AUIGrid.bind(myGridID, "rowCheckClick", function( event ) {
      const {item, rowIndex, checked} = event;
      if(item._$groupParentValue && item._$isBranch) { // 그룹핑하여 계층형으로 출력된 경우
          console.log("rowIndex : " + rowIndex + ", group : " + item._$groupParentValue + ", isBranch : " + item._$isBranch + ", checked : " + checked);
      } else { // 일반 그리드 모드
          console.log("rowIndex : " + rowIndex + ", id : " + item.id + ", name : " + item.name + ", checked : " + checked);
      }
});

행 번호 칼럼의 셀을 클릭했을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• rowNum : 행(Row) 번호 텍스트 값
• rowIndex : 행 인덱스
• orgEvent : 자바스크립트의 오리지널 이벤트 객체 (Object)

AUIGrid.bind(myGridID, "rowNumCellClick", function(event) {
    console.log("eventType : " + event.type + ", rowNum : " + event.rowNum + ", rowIndex : " + event.rowIndex);
    // false 반환하면 기본 행위 안함
    return false;
 });

Retrun : (Boolean) 만약 false 를 반환하면 기본 행위인 행(또는 셀) 선택을 하지 않습니다.

관련 데모 보기

행 번호 칼럼의 헤더를 클릭했을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• orgEvent : 자바스크립트의 오리지널 이벤트 객체 (Object)

AUIGrid.bind(myGridID, "rowNumHeaderClick", function(event) {
    console.log("eventType : " + event.type);
 });

관련 데모 보기

행 상태 칼럼(showStateColumn=true)의 셀을 클릭했을 때 발생합니다.

만약 수정 가능한 그리드(editable=true) 이고, 복구 가능 설정(enableRestore=true) 인 경우, 상태 아이콘을 클릭하면 해당 행(Row)이 이전 상태로 복구됩니다.

즉, 수정, 삭제, 추가에 대한 이전 상태의 복구의 의미는 다음과 같습니다.

• 수정 상태 클릭 : 수정 전 원본 데이터 값으로 복구됩니다.(즉, 수정 취소)
• 삭제 상태 클릭 : 삭제를 취소합니다.(단, softRemoveRowMode=true 인 경우에 해당)
• 추가 상태 클릭 : 행(Row) 추가를 취소합니다.(단, softRemovePolicy = "exceptNew" 인 경우만 해당)

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• item : 해당 행의 데이터 (Object)
• rowIndex : 해당 행(Row)의 인덱스
• orgEvent : 자바스크립트의 오리지널 이벤트 객체 (Object)
• marker : 해당 행(Row)의 편집 상태. 유효값은 다음과 같습니다.
  • "added" : 클릭한 행(Row) 상태가 추가된 행 임을 의미합니다.
  • "added-edited" : 클릭한 행 상태가 추가되고, 수정된 행 임을 의미합니다.
  • "edited" : 클릭한 행 상태가 수정된 행 임을 의미합니다.
  • "normal" : 클릭한 행 상태가 어떤 편집 행위도 이루어지지 않은 일반행 임을 의미합니다.
  • "removed" : 클릭한 행 상태가 삭제된 행 임을 의미합니다.

AUIGrid.bind(myGridID, "rowStateCellClick", function( event ) {
     if(event.marker === "edited") { // 현재 수정된 상태를 클릭 한 경우
         if(confirm("수정 취소 즉, 원래 값으로 복구 하시겠습니까?")) {
             return true;
         }
         return false;
     }
  });

Return : (Boolean) false 를 반환하면 복구 행위를 하지 않습니다.

관련 데모 보기

셀 또는 행의 선택이 변경되었을 때 발생합니다.

clearSelection()으로 선택을 해제할 때는 발생하지 않습니다.

이벤트 객체의 요소는 다음과 같습니다.

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• primeCell : 선택을 시작한 활성 셀 정보
• selectedItems : 선택 정보 배열. simplifySelectionEvent:true이면 생략

셀 정보의 항목은 getSelectedItems()를 참고하십시오.

AUIGrid.bind(myGridID, "selectionChange", function(event) {
    const cell = event.primeCell;
    console.log(cell.rowIndex, cell.dataField, cell.value);
});

Also See : triggerSelectionChangeOnCell | dispatchSelectionChangeMoving

관련 데모 보기

선택을 변경하기 전에 선택 이동을 허용할지 판단할 때 발생합니다.

이 이벤트는 사용자가 셀 클릭이나 방향키 이동을 통해 셀렉션 변경을 주 목적으로 행한 경우만 발생합니다.

즉, 검색(serach)나 셀 수정 등과 같이 주 목적이 따로 있을 때 그 결과로 셀렉션이 변경되는 경우 이벤트는 발생 하지 않습니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• rowIndex : 현재 셀렉션의 행(Row) 인덱스
• columnIndex : 현재 셀렉션의 열(Column) 인덱스
• toRowIndex : 사용자가 변경 시킬 행(Row) 인덱스
• toColumnIndex : 사용자가 변경 시킬 열(Column) 인덱스
• dataField : toColumnIndex 에 해당되는 데이터의 KeyField
• stopPropagation : confirm과 같이 Modal 을 띄워서 확인 하는 경우 event 의 stopPropagation 요소에 true 를 설정하여 진행을 막음.
• which : 셀렉션 변경을 어떤 어떤 방식으로 수행 했는지에 대한 정보(String or Number)

AUIGrid.bind(myGridID, "selectionConstraint", function(event) {
    if(event.toRowIndex < 5) {
        return false; // 5행까지 셀렉션 변경을 하지 않음
    }
});

Return : (Boolean) false 를 반환하면 사용자의 셀렉션 변경을 막습니다.

관련 데모 보기

정렬을 설정하거나 변경, 해제했을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• sortingFields : 현재 정렬된 필드 및 정렬 방법들 (Array)

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

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

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

band의 상위 칼럼을 정렬한 경우 sortingFields 항목의 columnIndex는 첫 하위 leaf의 인덱스입니다. 정렬할 칼럼은 dataField로 식별합니다.

관련 데모 보기

treeLazyMode=true인 트리에서 행의 펼치기, 접기 아이콘을 눌렀을 때 발생합니다. 해당 행에 표시할 자식 데이터를 제공하는 데 사용합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• rowIndex : 해당 아이템의 rowIndex
• depth : 트리 아이템의 depth 즉, 최상위 브랜치 아이템이 1 depth 이며 아래로 내려갈 수록 depth 1씩 증가함
• item : 열기/닫기의 대상이 된 브랜치(branch) 행(Row) 아이템 객체 (Object)
• response : 자식 배열을 전달할 함수(Function). false를 전달하면 자식을 추가하지 않고 현재 요청의 로딩 표시를 종료합니다.

AUIGrid.bind(myGridID, "treeLazyRequest", function(event) {
 const item = event.item;
 // 자식 데이터 요청
 $.ajax({
  url: "./data/get_my_children.do?pid=" + item.id + "&name=" + item.name,
  success: function(data) {
   // 성공 시 완전한 배열 객체로 삽입하십시오.
   event.response(data);
  }
 }); // end of ajax
});

관련 데모 보기

트리 브랜치의 펼치기, 접기 아이콘을 클릭하여 열림 상태가 변경되었을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• isOpen : 현재 열린 상태인지 닫힌 상태인지 여부
• rowIndex : 해당 아이템의 rowIndex
• depth : 트리 아이템의 depth 즉, 최상위 브랜치 아이템이 1 depth 이며 아래로 내려갈 수록 depth 1씩 증가함
• item : 열기/닫기의 대상이 된 브랜치(branch) 행(Row) 아이템 객체 (Object)

AUIGrid.bind(myGridID, "treeOpenChange", function( event ) {
     console.log(event.type + " : " + event.isOpen + ", rowIndex : " + event.rowIndex);
});

이 이벤트는 사용자에 의해 열기/닫기 아이콘을 클릭 한 경우만 발생합니다.

관련 데모 보기

편집 가능한 그리드에서 Undo와 Redo를 실행하거나 관련 작업 기록이 변경되었을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• action : 다시 실행, 실행 취소 등과 같이 어떤 행위로 인해 이 이벤트가 발생했는지 나타내며 다음과 같은 값을 갖습니다.
  • "add" : 커맨드 스택에 새로운 커맨드가 추가됨
  • "clear" : 커맨드 스택이 초기화 됨
  • "redo" : 다시 실행이 행해짐
  • "undo" : 실행 취소가 행해짐
• stackIndex : 커맨드 스택에서 현재 커맨드의 인덱스
• stackSize : 커맨드 스택의 총 길이
• redoable : 다시 실행(redo) 가능 여부
• undoable : 실행 취소(undo) 가능 여부

AUIGrid.bind(myGridID, "undoRedoChange", function( event ) {
        // Undo, Redo 버턴 가능한지 버턴 업데이트 
        if(event.undoable) $("#undoBtn").removeClass("disabled"); // Undo버턴 비활성화 제거
        else $("#undoBtn").addClass("disabled"); // Undo 버턴 비활성화
        if(event.redoable) $("#redoBtn").removeClass("disabled");
        else $("#redoBtn").addClass("disabled");
  });

updateRow()로 행을 수정했을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• rowIndex : 행 인덱스
• columnIndexes : 수정된 열(Column) 인덱스들(배열)
• values : 수정된 값들(배열)
• headerTexts : 수정된 열(Column)의 헤더 텍스트들(배열)
• item : 해당 행의 데이터 (Object)
• dataFields : 행(Row) 아이템에서 수정된 열(Column)이 출력되고 있는 데이터의 KeyField들(배열)

AUIGrid.bind(myGridID, "updateRow", function( event ) {
      console.log("rowIndex : " + event.rowIndex + ", columnIndexes : " + event.columnIndexes + " updateRow");
});

updateRows() 또는 updateRowsById()로 행을 수정했을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• items : 변경된 행(Row) 아이템 객체 (Array-Object)

AUIGrid.bind(myGridID, "updateRows", function( event ) {
      console.log( "items : " + JSON.stringify(event.items) );
});

관련 데모 보기

세로 스크롤 위치가 변경되었을 때 발생합니다.

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

• type : 이벤트 유형
• pid : 그리드 부모 DIV의 ID
• position : 현재 스크롤의 위치 (Number)
• oldPosition : 변경 전 스크롤의 위치 (Number)
• minPosition : 수직 스크롤의 최소 위치 (Number)
• maxPosition : 수직 스크롤의 최대 위치 (Number)

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

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

position, oldPosition, minPosition과 maxPosition의 단위는 usePaging이 true이면 현재 페이지 안의 픽셀, false이면 행 인덱스입니다.

페이징을 사용하지 않으면 같은 행 안의 픽셀 이동만으로는 발생하지 않습니다. 연속 입력은 화면 갱신 시점에 합쳐 처리할 수 있으므로 입력 횟수와 이벤트 횟수는 다를 수 있습니다.