Name | Description |
addColumn
| Type : Event Version: 3.0
addColumn() 을 통해 열(column) 을 추가한 경우 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- columnIndex : 추가된 열의 인덱스
- dataFields : 추가된 열들이 출력하고 있는 데이터의 KeyField들 (Array)
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
AUIGrid.bind(myGridID, "addColumn", function( event ) {
console.log(event.type + " 이벤트, 삽입된 열 개수 : " + event.dataFields.length);
});
|
addRow
| Type : Event Version: 2.7
사용자가 Insert 키, Ctrl+Insert 키 또는 addRow(), addTreeRow() 를 통해 행(Row)을 추가(삽입)한 경우 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- items : 추가된 행(Row) 아이템들 (Array)
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
AUIGrid.bind(myGridID, "addRow", function( event ) {
console.log(event.type + " 이벤트, 삽입된 행 개수 : " + event.items.length);
});
|
addRowFinish
| Type : Event Version: 2.7
사용자가 Insert 키, Ctrl+Insert 키 또는 addRow(), addTreeRow() 를 통해 행(Row)을 추가(삽입)한 경우 발생하는 이벤트입니다.
addRowFinish 이벤트와 addRow 이벤트의 차이는 다음과 같습니다.
- addRow : 행 추가 시 그리드가 추가한 행을 선택(selection) 하는데 이 때 selectionChange 이벤트가 발생합니다. addRow 이벤트는 selectionChange 이벤트 이전에 발생합니다.
- addRowFinish : 행 추가 시 그리드가 추가한 행을 선택(selection) 하는데 이 때 selectionChange 이벤트가 발생합니다. addRowFinish 이벤트는 selectionChange 이벤트 이후 발생합니다.
즉, 새행에 선택자가 온 후 무엇인가를 하고 싶다면 addRowFinish 이벤트를 바인딩 하십시오.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- items : 추가된 행(Row) 아이템들 (Array)
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
AUIGrid.bind(myGridID, "addRowFinish", function( event ) {
console.log(event.type + " 이벤트, 삽입된 행 개수 : " + event.items.length);
});
|
addTreeColumn
| Type : Event Version: 3.0
addTreeColumn() 을 통해 특정 열(column)의 자식으로 열을 추가한 경우 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- columnIndex : 추가된 열의 인덱스
- index : 부모를 기준으로 추가된 열의 자식 인덱스
- dataFields : 추가된 열들이 출력하고 있는 데이터의 KeyField들 (Array)
- parentDataField : 추가된 열의 부모의 dataField
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
AUIGrid.bind(myGridID, "addTreeColumn", function( event ) {
console.log(event.type + " 이벤트, 삽입된 열 개수 : " + event.dataFields.length + ", 부모 dataField : " + event.parentDataField);
});
|
beforeInsertRow
| Type : Event Version: 2.7
편집 가능(editable=true)인 경우 Insert 또는 Ctrl+Insert 등의 키 입력 시 새 행(Row)이 삽입됩니다.
이 때 새 행의 초기값을 결정 짓도록 삽입 전에 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- 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) 에 의해서만 발생합니다.
|
beforeRemoveColumn
| Type : Event Version: 3.0
removeColumn() 을 통해 열(column) 을 삭제할 때 삭제 전에 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- columnIndexes : 삭제될 열의 인덱스 묶음 (Array)
- dataFields : 삭제될 열의 dataField 묶음 (Array)
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
AUIGrid.bind(myGridID, "beforeRemoveColumn", function( event ) {
console.log(event.type + " 이벤트, 삭제될 열 개수 : " + event.dataFields.length);
//return false; // 반환을 false 로 처리하면 삭제 실행을 취소함.
});
Return : (Boolean) false 를 반환하면 삭제 처리를 하지 않습니다. 따라서 실제 삭제 전 확인 단계를 거칠 수 있습니다.
|
beforeRemoveRow
| Type : Event Version: 2.7
사용자가 Ctrl + Del 키 또는 removeRow() 또는 removeRow() 또는 removeRowByRowId() 메소드를 통해 행(Row)을 삭제할 때 삭제 전에 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- 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 를 반환하면 삭제 처리를 하지 않습니다. 따라서 실제 삭제 전 확인 단계를 거칠 수 있습니다.
|
beforeRemoveSoftRows
| Type : Event Version: 2.7
softRemoveRowMode = true 를 사용할 때 사용자가 행(Row)을 삭제 한 경우, 삭제된 행(Row)은 마크가 생기게 됩니다.
이를 그리드에서 실제로 삭제하는 메소드인 AUIGrid.removeSoftRows()를 호출 한 경우 실제 삭제 전에 발생하는 이벤트입니다.
이 이벤트는 softRemoveRowMode 를 false 로 설정한 경우 발생하지 않습니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- items : 삭제될 행(Row) 아이템들 (Array)
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
AUIGrid.bind(myGridID, "beforeRemoveSoftRows", function( event ) {
console.log(event.type + " 이벤트, 삭제될 행 개수 : " + event.items.length);
});
Return : (Boolean) false 를 반환하면 삭제 처리를 하지 않습니다. 따라서 실제 삭제 전 확인 단계를 거칠 수 있습니다.
|
cellClick
| Type : Event Version: 3.0.2.4
단일 셀 클릭 시 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- rowIndex : 행(Row) 인덱스
- columnIndex : 열(Column) 인덱스
- dataField : 행(Row) 아이템에서 현재 열(Column)이 출력되고 있는 데이터의 KeyField
- editable : 해당 셀의 수정 가능 여부
- value : 셀에 출력되고 있는 값(value)
- rowIdValue : rowIdField 로 지정한 키에 대한 값. 즉, 행(Row)의 고유값 (rowIdField 설정 선행 필수)
- headerText : 현재 열(Column)의 헤더 텍스트
- item : 해당 행(Row)에 출력되고 있는 행 아이템 객체 (Object)
- treeIcon : 트리그리드인 경우 트리그리드의 열기/닫기 버턴 클릭 여부(Boolean)
- orgEvent : 자바스크립트의 오리지널 이벤트 객체 (Object)
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
AUIGrid.bind(myGridID, "cellClick", function( event ) {
console.log("rowIndex : " + event.rowIndex + ", columnIndex : " + event.columnIndex + " clicked");
});
|
cellDoubleClick
| Type : Event Version: 2.7
단일 셀 더블클릭 시 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- rowIndex : 행(Row) 인덱스
- columnIndex : 열(Column) 인덱스
- editable : 해당 셀의 수정 가능 여부
- value : 셀에 출력되고 있는 값(value)
- rowIdValue : rowIdField 로 지정한 키에 대한 값. 즉, 행(Row)의 고유값 (rowIdField 설정 선행 필수)
- headerText : 현재 열(Column)의 헤더 텍스트
- item : 해당 행(Row)에 출력되고 있는 행 아이템 객체 (Object)
- dataField : 행(Row) 아이템에서 현재 열(Column)이 출력되고 있는 데이터의 KeyField
- orgEvent : 자바스크립트의 오리지널 이벤트 객체 (Object)
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
AUIGrid.bind(myGridID, "cellDoubleClick", function( event ) {
console.log("rowIndex : " + event.rowIndex + ", columnIndex : " + event.columnIndex + " dbl clicked");
});
|
cellEditBegin
| Type : Event Version: 2.7
편집, 수정 모드에서 셀 편집(수정) 시작 시 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- rowIndex : 행(Row) 인덱스
- columnIndex : 열(Column) 인덱스
- value : 원래 데이터의 해당 셀 값(value)
- headerText : 현재 열(Column)의 헤더 텍스트
- item : 해당 행(Row)에 출력되고 있는 행 아이템 객체 (Object)
- dataField : 행(Row) 아이템에서 현재 열(Column)이 출력되고 있는 데이터의 KeyField
- 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 를 반환하면 편집, 수정을 못하도록 막습니다.
|
cellEditCancel
| Type : Event Version: 2.7
편집, 수정 모드에서 셀 편집(수정) 취소 시 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- rowIndex : 행(Row) 인덱스
- columnIndex : 열(Column) 인덱스
- value : 원래 데이터의 해당 셀 값(value)
- headerText : 현재 열(Column)의 헤더 텍스트
- item : 해당 행(Row)에 출력되고 있는 행 아이템 객체 (Object)
- dataField : 행(Row) 아이템에서 현재 열(Column)이 출력되고 있는 데이터의 KeyField
- isClipboard : 붙여 넣기(Ctrl+V) 로 이벤트가 발생했는지 여부 (Boolean)
- which : 편집 취소를 어떤 방식으로 수행 했는지에 대한 정보(String or Number)
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
AUIGrid.bind(myGridID, "cellEditCancel", function( event ) {
console.log("rowIndex : " + event.rowIndex + ", columnIndex : " + event.columnIndex + " cellEditCancel");
});
|
cellEditEnd
| Type : Event Version: 2.7
편집, 수정 모드에서 셀 편집(수정) 종료 시 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- rowIndex : 행(Row) 인덱스
- columnIndex : 열(Column) 인덱스
- oldValue : 변경 전 셀 값(value)
- value : 변경 된 셀 값(value)
- headerText : 현재 열(Column)의 헤더 텍스트
- item : 해당 행(Row)에 출력되고 있는 행 아이템 객체 (Object)
- dataField : 행(Row) 아이템에서 현재 열(Column)이 출력되고 있는 데이터의 KeyField
- 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");
});
|
cellEditEndBefore
| Type : Event Version: 2.7
편집, 수정 모드에서 셀 편집(수정) 종료 바로 직전에 발생하는 이벤트입니다.
이 이벤트 핸들러의 반환값이 곧 최종 수정값으로 적용됩니다.
즉, 개발자가 사용자에 의해 입력된 값을 최종적으로 판단할 수 있는 이벤트입니다. 이 이벤트 핸들러에서 값을 체크하십시오.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- rowIndex : 행(Row) 인덱스
- columnIndex : 열(Column) 인덱스
- oldValue : 변경 전 셀 값(value)
- value : 변경 된 셀 값(value)
- headerText : 현재 열(Column)의 헤더 텍스트
- item : 해당 행(Row)에 출력되고 있는 행 아이템 객체 (Object)
- dataField : 행(Row) 아이템에서 현재 열(Column)이 출력되고 있는 데이터의 KeyField
- isClipboard : 붙여 넣기(Ctrl+V) 로 이벤트가 발생했는지 여부 (Boolean)
- which : 편집 완료를 어떤 방식으로 수행 했는지에 대한 정보(String or Number)
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
AUIGrid.bind(myGridID, "cellEditEndBefore", function( event ) {
return removeComma(event.value); // 사용자가 입력한 값에 컴마가 있으면 제거 후 적용
});
Return : (String) 수정에 적용될 최종값. 이 핸들러의 반환값은 반드시 지정해야 합니다. 이 반환값이 곧 최종 수정값입니다.
|
cellLongTap
| Type : Event Version: 3.0.2
터치 기기(touch devices)에서 단일 셀을 길게 누르고 있을 때 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- rowIndex : 행(Row) 인덱스
- columnIndex : 열(Column) 인덱스
- value : 셀에 출력되고 있는 값(value)
- headerText : 현재 열(Column)의 헤더 텍스트
- item : 해당 행(Row)에 출력되고 있는 행 아이템 객체 (Object)
- dataField : 행(Row) 아이템에서 현재 열(Column)이 출력되고 있는 데이터의 KeyField
- orgEvent : 자바스크립트의 오리지널 이벤트 객체 (Object)
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
AUIGrid.bind(myGridID, "cellLongTap", function( event ) {
console.log("rowIndex : " + event.rowIndex + ", columnIndex : " + event.columnIndex + " longTapped");
});
|
columnStateChange
| Type : Event Version: 2.7
그리드의 열(Column)을 사용자가 드래깅으로 자리를 바꾸거나 사이즈를 바꾼 경우 발생하는 이벤트입니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- 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);
});
|
copyBegin
| Type : Event Version: 3.0.8
그리드에서 복사(Ctrl + C) 를 할 때 복사가 시작되는 경우 발생하는 이벤트입니다.
그리드에 의존하지 않고 사용자가 직접 파싱하여 적용 시킬 수 있습니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- 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)으로 구성된 스트링을 반환하면 해당 값을 클립보드에 적용시킵니다.
|
copyEnd
| Type : Event Version: 3.0.8
그리드에서 복사(Ctrl + C) 를 할 때 값이 시스템 클립보드에 복사 완료된 경우 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- data : 클립보드에 복사된 값 (String)
|
dragBegin
| Type : Event Version: 3.0.4
행(Row) 드래깅을 시작할 때 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- 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 이 드래깅 텍스트로 출력됩니다.
|
dropCancel
| Type : Event Version: 3.0.4
행(Row) 드래깅 이 후 드랍이 성공하지 않은 경우 즉, 드랍 실패한 경우 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- pidToDrop : 드랍되는 그리드의 부모 DIV ID
- fromRowIndex : 드래깅된 시점의 행(Row) 인덱스
- toRowIndex : 드랍되는 그리드의 드랍 시점의 행(Row) 인덱스
- direction : 드래깅 시점에서 드랍되는 곳의 행(Row) 인덱스가 증가한 경우 true (Boolean)
- items : 드래깅되고 있으며 드랍될 행(Row) 아이템들 (Array)
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
AUIGrid.bind(myGridID, "dropCancel", function(event ) {
console.log(event.pidToDrop + " 그리드에 " + event.items.length + " 행(들)을 드랍하는데 실패하였습니다.");
});
|
dropEnd
| Type : Event Version: 3.0.4
행(Row) 드래깅 이 후 드랍 종료에 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- 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 + " 행(들)을 드랍 완료하였습니다.");
});
|
dropEndBefore
| Type : Event Version: 3.0.4
행(Row) 드래깅 이 후 드랍 종료 바로 직전에 발생하는 이벤트입니다.
이 이벤트 핸들러에서 드랍의 액션이 "이동(move)" 인지 "복사(copy)" 인지 결정 가능합니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- 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) 드랍을 하지 않습니다.
|
filtering
| Type : Event Version: 2.7
사용자가 필터링(Filtering)을 설정하거나 변경, 해제 시 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- 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] );
}
});
|
grouping
| Type : Event Version: 2.7
사용자가 그룹핑(Grouping)을 설정하거나 변경, 해제 시 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- groupingFields : 현재 그룹핑 된 그룹핑 필드들 (Array)
- groupingSummary : 그룹핑 썸머리를 설정한 경우 적용되는 썸머리 객체 (Object)
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
AUIGrid.bind(myGridID, "grouping", function( event ) {
console.log("이벤트명: " + event.type + ", 현재 그룹핑 필드들 : " + event.groupingFields.join(", ") );
});
|
hScrollChange
| Type : Event Version: 2.7
그리드의 수평 스크롤(가로 스크롤)이 있는 경우, 수평 스크롤의 값이 변경되었을 때 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- 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 + ")" );
});
주의 : 이 이벤트 핸들러에서 무리한 작업을 하면 그리드 스크롤링 시 성능이 저하됩니다.
|
indent
| Type : Event Version: 3.0.12
사용자가 Alt + Shift + 오른쪽 화살표 키 또는 indentTreeDepth 메소드를 통해 행 깊이(depth) 올리기(Indent)를 한 경우 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- items : 실제로 행 깊이(depth) 적용된 행(Row) 아이템들 (Array)
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
AUIGrid.bind(myGridID, "indent", function( event ) {
console.log(event.type + " 이벤트, 적용된 행 개수 : " + event.items.length);
});
|
keyDown
| Type : Event Version: 2.7
그리드에서 키보드를 누른 경우 발생하는 키다운(keyDown) 이벤트입니다.
그리드에서 특정 키는 미리 지정된 행위를 합니다.(예: 화살표 키-선택 이동, Insert 키-행(Row) 삽입 등)
이런 약속된 행위를 막고 사용자가 원하는 코드를 실행시킬 수 있습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- 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 를 반환하면 그리드에 미리 지정된 행위를 하지 않습니다.
참고 : 그리드에 기본 단축키를 변경하거나 새로운 단축키를 추가할 수 있는 이벤트입니다.
|
notFound
| Type : Event Version: 2.7
사용자가 그리드의 특정 문자열을 검색(search) 하였을 때 문자열을 찾지 못할 경우 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- term : 사용자가 찾고자 했던 문자열(String)
- wrapFound : wrapSearch 를 한 경우 한 바퀴 돌아 같은 행(Row)을 찾은 경우. 즉, 문자열에 해당되는 행이 단 1개 인 경우 true임
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
AUIGrid.bind(myGridID, "notFound", function( event ) {
console.log('다음 문자열을 찾을 수 없습니다 - "' + event.term + '"');
});
|
outdent
| Type : Event Version: 3.0.12
사용자가 Alt + Shift + 왼쪽 화살표 키 또는 outdentTreeDepth 메소드를 통해 행 깊이(depth) 내리기(Outdent)를 한 경우 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- items : 실제로 행 깊이(depth) 적용된 행(Row) 아이템들 (Array)
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
AUIGrid.bind(myGridID, "outdent", function( event ) {
console.log(event.type + " 이벤트, 적용된 행 개수 : " + event.items.length);
});
|
pageChange
| Type : Event Version: 2.11
페이징을 사용하는 경우(usePaging=true) 페이징이 변경될 때 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- currentPage : 현재 페이지 번호
- oldPage : 변경 되기 전의 페이지 번호
- totalPageCount : 전체 페이지 수
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
AUIGrid.bind(myGridID, "pageChange", function(event) {
console.log("eventType : " + event.type + ", currentPage : " + event.currentPage + ", oldPage : " + event.oldPage);
});
|
pasteBegin
| Type : Event Version: 3.0.5
편집 가능 그리드에서 붙여넣기(Ctrl + V) 를 할 때 붙여넣기가 시작되는 경우 발생하는 이벤트입니다.
그리드에 의존하지 않고 사용자가 직접 파싱하여 적용 시킬 수 있습니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- 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 을 반환하면 그 반환값을 그리드에 붙여 넣기 적용시킵니다.
|
pasteEnd
| Type : Event Version: 2.8
편집 가능 그리드에서 붙여넣기(Ctrl + V) 를 할 때 붙여넣기가 완료된 경우 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- clipboardData : 그리드에 붙여 넣기 된 데이터 (Array)
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
AUIGrid.bind(myGridID, "pasteEnd", function(event) {
AUIGrid.setSelectionByIndex(0, 0); // 0, 0 으로 선택자 이동시킴.
console.log("붙여 넣기 완료!!");
});
|
ready
| Type : Event Version: 2.7
데이터가 삽입되어 그리드 렌더링이 완료되고 사용자에 의해 접근 가능해진 경우 발생하는 이벤트입니다.
이 이벤트는 데이터가 변경되었을 때 다시 발생됩니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
AUIGrid.bind(myGridID, "ready", function(event) {
console.log(event.type);
});
|
removeColumn
| Type : Event Version: 3.0
removeColumn() 을 통해 행(Row)을 삭제한 경우 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- dataFields : 삭제된 열의 dataField 묶음 (Array)
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
AUIGrid.bind(myGridID, "removeColumn", function( event ) {
console.log(event.type + " 이벤트, 삭제된 열 개수 : " + event.dataFields.length);
});
|
removeRow
| Type : Event Version: 2.7
사용자가 Ctrl + Del 키 또는 removeRow() 또는 removeRowByRowId() 메소드를 통해 행(Row)을 삭제한 경우 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- softRemoveRowMode : 소프트 제거 모드 사용 여부 즉, 그리드 상에 실제로 삭제가 됐는지 또는 마크 됐지는 여부
- items : 삭제된 행(Row) 아이템들 (Array)
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
AUIGrid.bind(myGridID, "removeRow", function( event ) {
console.log(event.type + " 이벤트, 삭제된 행 개수 : " + event.items.length + ", softRemoveRowMode : " + event.softRemoveRowMode);
});
|
removeSoftRows
| Type : Event Version: 2.7
softRemoveRowMode = true 를 사용할 때 사용자가 행(Row)을 삭제 한 경우, 삭제된 행은 마크가 생기게 됩니다.
이를 그리드에서 실제로 삭제하는 메소드인 AUIGrid.removeSoftRows()를 호출 한 경우 발생하는 이벤트입니다.
이 이벤트는 softRemoveRowMode 를 false 로 설정한 경우 발생하지 않습니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- items : 삭제된 행(Row) 아이템들 (Array)
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
AUIGrid.bind(myGridID, "removeSoftRows", function( event ) {
console.log(event.type + " 이벤트, 삭제된 행 개수 : " + event.items.length);
});
|
rowAllCheckClick
| Type : Event Version: 2.7
[deprecated Ver 2.8] 이 이벤트는 event 객체가 아닌 checked 값 파라메터로 갖습니다. rowAllChkClick 이벤트를 사용하십시오.
엑스트라 체크박스 열(Column)에 있는 전체 선택 체크박스 클릭 시 발생합니다.
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
AUIGrid.bind(myGridID, "rowAllCheckClick", function( checked ) {
console.log("전체 선택 checked : " + checked);
}
|
rowAllChkClick
| Type : Event Version: 2.7
엑스트라 체크박스 열(Column)에 있는 전체 선택 체크박스 클릭 시 발생합니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- checked : 체크 유무 (Boolean)
- orgEvent : 자바스크립트의 오리지널 이벤트 객체 (Object)
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
AUIGrid.bind(myGridID, "rowAllChkClick", function( event ) {
console.log("전체 선택 checked : " + event.checked);
}
|
rowCheckClick
| Type : Event Version: 3.0.9
엑스트라 체크박스 열(Column)에 있는 행(Row) 체크박스를 클릭했을 때 발생합니다
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- checked : 체크 여부 (Boolean)
- rowIndex : 행(Row) 인덱스
- item : 해당 행(Row)에 출력되고 있는 행 아이템 객체 (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);
}
});
|
rowNumCellClick
| Type : Event Version: 2.8
엑스트라 행(Row) 번호 열(Column)을 클릭 했을 때 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- rowNum : 행(Row) 번호 텍스트 값
- rowIndex : 행(Row) 인덱스
- 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 를 반환하면 기본 행위인 행(또는 셀) 선택을 하지 않습니다.
|
rowStateCellClick
| Type : Event Version: 2.7
엑스트라 행(Row) 상태 열(Column)을 설정한 경우(showStateColumn=true) 해당 셀을 클릭 시 발생하는 이벤트입니다.
만약 수정 가능한 그리드(editable=true) 이고, 복구 가능 설정(enableRestore=true) 인 경우, 상태 아이콘을 클릭하면 해당 행(Row)이 이전 상태로 복구됩니다.
즉, 수정, 삭제, 추가에 대한 이전 상태의 복구의 의미는 다음과 같습니다.
- 수정 상태 클릭 : 수정 전 원본 데이터 값으로 복구됩니다.(즉, 수정 취소)
- 삭제 상태 클릭 : 삭제를 취소합니다.(단, softRemoveRowMode=true 인 경우에 해당)
- 추가 상태 클릭 : 행(Row) 추가를 취소합니다.(단, softRemovePolicy = "exceptNew" 인 경우만 해당)
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- item : 해당 행(Row)에 출력되고 있는 행 아이템 객체 (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 를 반환하면 복구 행위를 하지 않습니다.
|
selectionChange
| Type : Event Version: 2.7
selectionMode 가 "none" 이 아닌 경우 셀 또는 행 선택이 변경되었을 때 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- primeCell : 다수의 선택 셀 중 기본이 되는 주요 셀 정보 (Object) - Ver. 2.13 이상 사용 가능
- selectedItems : 선택된 아이템들을 요소로 갖는 배열(Array-Object)
selectedItems 는 배열이며, 배열의 개별 아이템에 대한 객체는 다음 요소를 갖습니다.
primeCell 의 요소 또한 다음과 같습니다.
- rowIndex : 행(Row)의 인덱스
- columnIndex : 열(Column)의 인덱스
- dataField : 선택 열(Column)이 출력하고 있는 그리드 데이터의 필드명
- headerText : 선택 열(Column)의 헤더 텍스트
- editable : 선택 열(Column)의 수정 가능 여부
- value : 선택 셀의 현재 그리드 값
- rowIdValue : rowIdField 로 지정한 키에 대한 값. 즉, 행의 고유값 (rowIdField 설정 선행 필수)
- item : 선택 행 아이템들을 갖는 Object
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
AUIGrid.bind(myGridID, "selectionChange", function( event ) {
// 다수의 선택 셀 중 기본이 되는 주요 셀 정보
const primeCell = event.primeCell; // 선택된 대표 셀
console.log("현재 셀 : ( " + primeCell.rowIndex + ", " + primeCell.headerText + " ), 값 : " + primeCell.value);
});
Also See : simplifySelectionEvent
|
selectionConstraint
| Type : Event Version: 3.0.8.3
셀렉션 변경 전에 셀렉션 제한(통제)를 체크 할 때 발생하는 이벤트입니다.
이 이벤트는 사용자가 셀 클릭이나 방향키 이동을 통해 셀렉션 변경을 주 목적으로 행한 경우만 발생합니다.
즉, 검색(serach)나 셀 수정 등과 같이 주 목적이 따로 있을 때 그 결과로 셀렉션이 변경되는 경우 이벤트는 발생 하지 않습니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- 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 를 반환하면 사용자의 셀렉션 변경을 막습니다.
|
sorting
| Type : Event Version: 2.7
사용자가 정렬(Sorting)을 설정하거나 변경, 해제 시 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- 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 );
});
|
treeLazyRequest
| Type : Event Version: 2.12
트리 lazyLoading 모드를 사용하는 경우(treeLazyMode=true) 특정 트리 행(Row)의 열기/닫기 아이콘을 눌렀을 때 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- rowIndex : 해당 아이템의 rowIndex
- depth : 트리 아이템의 depth 즉, 최상위 브랜치 아이템이 1 depth 이며 아래로 내려갈 수록 depth 1씩 증가함
- item : 열기/닫기의 대상이 된 브랜치(branch) 행(Row) 아이템 객체 (Object)
- response : 응답으로 설정할 함수(Function)
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
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
});
관련 데모 보기
|
treeOpenChange
| Type : Event Version: 2.7
트리 그리드 일 때 브랜치(branch) 아이템의 열기/닫기을 클릭하여 열기/닫기 상태 변경 시 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- 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);
});
이 이벤트는 사용자에 의해 열기/닫기 아이콘을 클릭 한 경우만 발생합니다.
|
undoRedoChange
| Type : Event Version: 2.7
수정 편집 가능한 그리드에서 실행 취소(Undo), 다시 실행(Redo) 또는 커맨드 스택의 변화가 생긴 경우 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- 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
| Type : Event Version: 2.12.5
updateRow 메소드를 통해 사용자가 행(Row)을 수정한 경우 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- rowIndex : 행(Row) 인덱스
- columnIndexes : 수정된 열(Column) 인덱스들(배열)
- values : 수정된 값들(배열)
- headerTexts : 수정된 열(Column)의 헤더 텍스트들(배열)
- item : 해당 행(Row)에 출력되고 있는 행 아이템 객체 (Object)
- dataFields : 행(Row) 아이템에서 수정된 열(Column)이 출력되고 있는 데이터의 KeyField들(배열)
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
AUIGrid.bind(myGridID, "updateRow", function( event ) {
console.log("rowIndex : " + event.rowIndex + ", columnIndexes : " + event.columnIndexes + " updateRow");
});
|
updateRows
| Type : Event Version: 2.12.5
updateRows, updateRowsById 메소드를 통해 사용자가 행(Row)을 수정한 경우 발생하는 이벤트입니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- items : 변경된 행(Row) 아이템 객체 (Array-Object)
이 이벤트를 핸들링하는 방법은 다음과 같습니다.
AUIGrid.bind(myGridID, "updateRows", function( event ) {
console.log( "items : " + JSON.stringify(event.items) );
});
|
vScrollChange
| Type : Event Version: 2.7
그리드의 수직 스크롤(세로 스크롤)이 있는 경우, 수직 스크롤의 값이 변경되었을 때 발생하는 이벤트입니다.
사용자가 마우스 휠이나 다른 특정 행위로 수직 스크롤이 변경되면 발생합니다.
이벤트 핸들러로 전달되는 파라메터의 event 객체 요소는 다음과 같습니다.
- type : 이벤트 유형
- pid : 사용자에 의해 작성된 그리드의 부모 DIV ID (샘플 상의 myGridID 와 일치함)
- 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 + ")" );
});
주의 : 이 이벤트 핸들러에서 무리한 작업을 하면 그리드 스크롤링 시 성능이 저하됩니다.
|