GridBase

GridBase는 GridView와 TreeView의 기반 클래스(Base Class)이다.

Signature:

export declare abstract class GridBase 

Remarks

GridBase 의 모든 속성과 method 는 이를 상속한 하위 클래스들에서만 호출할 수 있다.

[하위 클래스]

GridView

TreeView

Events

Constructors

Properties

Methods

Construct Desc

(constructor)

Constructs a new instance of the GridBase class

Events Desc

onCellButtonClicked

사용자가 데이터 셀 내부의 action 버튼을 클릭했을 때 호출한다.

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

index - 데이터 셀이 포함된 아이템의 위치정보

column - 데이터 셀에 연결된 컬럼

Example:

gridView.onCellButtonClicked =  function (grid, index, col) {
     console.log(index);
};

onCellClicked

그리드 셀이 클릭되었음을 알리는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

clickData - 클릭된 셀 정보

Example:

gridView.onCellClicked = function (grid, clickData) {
     console.log(clickData);
}

onCellDblClicked

그리드 셀이 더블 클릭되었음을 알리는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

clickData - 클릭된 셀 정보

Example:

gridView.onCellDblClicked = function (grid, clickData) {
     console.log(clickData);
}

onCellEdited

수정이나 추가 중인 편집 아이템의 한 필드값이 편집 완료되었음을 알리는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

itemIndex - 편집 중인 행의 순서

row - 편집 중인 행의 고유 번호

field - 방금 편집된 필드의 인덱스

Example:

gridView.onCellEdited = function (grid, itemIndex, row, field) {
     console.log('Edit done! at ' + itemIndex + ', ' + field);
}

onCellItemClicked

그리드 셀에 포함된 엘리먼트가 클릭되었음을 알리는 콜백

Remarks:

이 이벤트 내에서 클릭을 처리했다면 반드시 false를 리턴해야 element의 기본 동작을 실행하지 않는다.

[매개변수 목록]

grid - GridBase 컨트롤

index - 클릭된 데이터 셀의 위치정보

clickData - 클릭된 셀 정보

Example:

gridView.onCellItemClicked = function (grid, index, clickData) {
     console.log(clickData);
     return true;
}

onCellPasting

셀에 붙여넣기를 결정하는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

index - 클릭된 데이터 셀의 위치정보

value - 붙여넣기 중인 데이터 값

[반환값] - false를 반환하면 그 셀에는 붙여넣기가 되지 않는다.

Example:

gridView.onCellPasting = function (grid, index, value) {
     if (value === 'hello') {
         return false;
     }
};

onColumnCheckedChanged

사용자의 컬럼 헤더 체크박스를 클릭을 알리는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

column - 컬럼 오브젝트

checked - 체크 여부

Example:

gridView.onColumnCheckedChanged =  function (grid, col, chk) {
     console.log(col.name + "was checked as: " + chk);
};

onColumnPropertyChanged

Warning: This API is now obsolete.

컬럼의 속성 중 width, displayIndex, visible 속성값이 변경되었음을 알리는 콜백 GridBase.onLayoutPropertyChanged로 대체

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

column - 변경된 컬럼의 정보

property - 컬럼의 displayWidth, displayIndex, visible 속성 중 변경된 것

value - 변경된 값이 전달된다.

Example:

gridView.onColumnPropertyChanged = function (grid, column, property, newValue, oldValue) {
 
        console.log(column + "s props werer changed!");
}

onCommandStackChanged

CommandStack이 바뀌었음을 알리는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

undoable - 뒤로

redoable - 앞으로

Example:

gridView.onCommandStackChanged =  function (grid, undoable, redoable) {
     if (undoable === true) {
         console.log('You can undo now!');
     }
};

onContextMenuItemClicked

setContextMenu() 를 통해 추가한 컨텍스트 메뉴 항목 클릭을 알리는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

item - 클릭된 메뉴 항목의 정보

clickData - 클릭 된 아이템의 정보

Example:

gridView.onContextMenuItemClicked =  function (grid, item, clickData) {
     console.log(clickData);
};

onContextMenuPopup

좌표와 함께 ContextMenu 표시를 결정하는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

x - ContextMenu 가 호출된 x좌표값

y - ContextMenu 가 호출된 y좌표값

clickData - 클릭 된 아이템의 정보

menu - menuName

rightClick - 오른쪽 버튼 클릭여부

[반환값] - false를 반환하면 컨텍스트 메뉴가 표시되지 않는다. 또 menuName을 return하는 경우 해당 menu가 표시된다.

Example:

gridView.onContextMenuPopup =  function (grid, x, y, clickData, menu, rightClick) {
     console.log(clickData);
};

onCopy

control + c 키로 복사하기를 결정하는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

selection - 선택 영역 정보

event - 이벤트 정보 (ClipboardEvent (opens in a new tab))

[반환값] - false를 반환하면 복사하기가 취소된다.

Example:

gridView.onCopy = function(grid, selection, event) {
     let data = JSON.stringify(grid.getSelectionData());
     if (data) {
     	data = 'onCopy\r\n' + data;
     	if (window.clipboardData) {
     		window.clipboardData.setData("Text", data);
     	} else {
     		event.clipboardData.setData('text/plain', data);
     	}
     }
     return false;
}

onCurrentChanged

그리드의 focus cell 의 위치 변경을 알리는 콜백

Remarks:

변경되기 직전에는 onCurrentChanging 을 호출

[매개변수 목록]

grid - GridBase 컨트롤

newIndex - 변경된 셀 위치정보

Example:

gridView.onCurrentChanged =  function (grid, newIndex) {
     console.log(newIndex);
}

onCurrentChanging

그리드의 focus cell 의 위치 변경을 결정하는 콜백

Remarks:

변경된 후에는 onCurrentChanged 를 호출한다.

[매개변수 목록]

grid - GridBase 컨트롤

oldIndex - 변경 전 셀 위치정보

newIndex - 변경 되는 셀 위치정보

[반환값] - callback 함수에서 명시적으로 false를 반환하면 current가 변경되지 않음

Example:

gridView.onCurrentChanging =  function (grid, oldIndex, newIndex) {
     console.log(oldIndex);
     console.log(newIndex);
     // return false; 를 하는 경우 위치 변경이 되지 않는다.
};

onCurrentRowChanged

데이터 행의 위치가 변경됨을 알리는 콜백

Remarks:

onCurrentChanged의 경우 선택된 cell의 itemIndex가 변경되는 경우 발생된다. 그러나 onCurrentRowChanged 의 경우 선택된 cell의 데이터 행의 index가 변경되는 경우에 발생한다.

[매개변수 목록]

grid - GridBase 컨트롤

oldRow - 변경 전 데이터 행의 위치

newRow - 변경 후 데이터 행의 위치, -1인 경우 신규행이거나 또는 dataProvider가 비워진 경우이다.

Example:

gridView.onCurrentRowChanged =  function (grid, oldRow, newRow) {
     console.log("oldRow => ", oldRow, "newRow => ", newRow);
};

onDataLoadComplated

dataProvider.setRows()를 실행한 이후 그리드 refresh가 완료된 후 발생하는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

Example:

gridView.onDataLoadComplated =  function (grid) {
     console.log("Grid DataLoadComplated")
};

onEditCanceled

사용자가 편집중 ESCAPE 키를 입력하거나 cancel() 이 호출되어 편집이 취소됨을 알리는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

index - 편집이 취소된 데이터 셀의 위치정보

Example:

gridView.onEditCanceled = function (grid, index) {
     console.log("Edit Cannceled at " + index.column);
}

onEditChange

아이템이 사용자의 Key 입력 등으로 값이 변경되었음을 알리는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

index - 현재 focus 된 셀의 위치정보

value - 편집 중인 셀의 데이터 값

Example:

gridView.onEditChange = function (grid, index, value) {
     console.log("grid.onEditChange driven, " + index.column + ' at ' + index.dataRow + ' was replaced by value: ' + value);
}

onEditCommit

사용자 입력이 셀에 반영함을 결정하는 콜백

Remarks:

편집 중인 셀에서 다른 셀로 이동하거나 또는 commitEditor() 를 호출하면 발생한다. setValue() 등 사용자 코드로 변경될때는 발생하지 않는다.

[매개변수 목록]

grid - GridBase 컨트롤

index - 변경된 셀의 위치 정보

oldValue - 편집전 셀의 데이터 값

newValue - 편집후 셀의 데이터 값

[반환값] - false 를 반환 시 셀에 반영되지 않는다.

Example:

gridView.onEditCommit = function (grid, index, oldValue, newValue) {
     if (newValue === '') {
         return false;
     }
     console.log(oldValue + 'was changed to ' + newValue);
}

onEditRowChanged

사용자 입력으로 변경된 값이 행에 반영되었음을 알리는 콜백

Remarks:

pasteOptions.noEditEvent 가 true 면 발생하지 않는다.

[매개변수 목록]

grid - GridBase 컨트롤

itemIndex - 변경된 행의 순서

row - 변경된 행의 고유 번호

field - 변경된 필드의 인덱스

oldValue - 편집전 셀의 데이터 값

newValue - 편집후 셀의 데이터 값

Example:

gridView.onEditRowChanged = function (grid, itemIndex, dataRow, field, oldValue, newValue) {
    let v = grid.getValue(itemIndex, field);
    console.log("onEditRowChanged, " + field + ": " + oldValue + " => " + newValue);
};

onEditRowPasted

그리드 셀에 붙여넣기 했음을 알리는 콜백

Remarks:

여러 행을 붙여넣기 할때는 onRowsPasted 참조

[매개변수 목록]

grid - GridBase 컨트롤

itemIndex - 변경된 행의 순서

row - 변경된 행의 고유 번호

fields - 필드의 인덱스들

oldValues - 편집전 셀의 데이터 값들

newValues - 편집후 셀의 데이터 값들

Example:

gridView.onEditRowPasted = function (grid, itemIndex, row, fields, oldValues, newValues) {
    console.log('Row pasted!: {' + newValues.join() + '}');
};

onEditSearch

검색을 했음을 알리는 콜백

Remarks:

SearchCellEditor에서 searchLenght 와 searchDelay 조건이 만족하면 발생한다. 또는 Ctrl+Enter 키 또는 Enter 키를 입력시 발생한다.

[매개변수 목록]

grid - GridBase 컨트롤

index - 변경된 셀 위치정보

text - 셀에 입력된 값

Example:

gridView.onEditSearch = function (grid, index, text) {
     console.log(text + ' was searched!');
}

onErrorClicked

그리드에 발생한 에러창을 클릭했음을 알리는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

error - 에러 메세지

Example:

gridView.onErrorClicked = function (grid, error) {
    console.log(error);
}

onFiltering

필터링을 결정하는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤 [반환값] - 기본값: true, 필터링 실행 여부를 지정한다. false 를 반환하면 필터링은 취소된다.

Example:

gridView.onFiltering = function (grid) {
     return false;
}

onFilteringChanged

컬럼에 필터들이 설정되어 있고, 그 필터의 상태가 변경되었음을 알리는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

column - 필터링된 컬럼 정보

filter - 해당 필터의 정보

Example:

gridView.onFilteringChanged = function (grid, column, filter) {
     console.log('Filter changed!');
}

onGetEditValue

셀 편집이 완료되었을 때 셀의 위차와 편집결과를 갖고 있는 콜백

Remarks:

DropDownCellEditor, SearchCellEditor, MultiCheckCellEditor의 경우 editResult.text에는 labels에 해당하는 값이 출력되고 editResult.value에는 values에 해당하는 값이 출력된다.

DateCellEditor의 경우에는 editResult.text에는 editor의 datetimeFormat으로 Formatting된 값이 출력되고 editResult.value에는 Date객체가 출력된다.

다른 Editor의 경우 text와 value에 동일한 값이 출력된다.

EditResult 의 형태로 출력된다.

[매개변수 목록]

grid - GridBase 컨트롤

index - 편집된 셀의 위치정보

editResult - 편집된 셀의 text와 value를 속성으로 갖는 단순한 객체, 셀 편집기의 종류에 따라 출력되는 값이 달라진다.

Example:

gridView.onGetEditValue = function (grid, index, editResult) {
     console.log(editResult);
}

onGridActivated

그리드가 선택되었음을 알리는 콜백

Remarks:

grid를 전역변수에 저장해서 사용하는 것이 좋다.

[매개변수 목록]

grid - GridBase 컨트롤

Example:

gridView.onGridActivated = function (grid) {
     alert('Selected!');
}

onHideEditor

편집이 완료되고 편집기가 사라진 것을 알리는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

index - 편집된 셀의 위치정보

Example:

gridView.onHideEditor = function (grid, index) {
     console.log("onHideEditor:" + index.itemIndex + "," + index.column);
}

onItemAllChecked

사용자가 checkBar의 Header를 클릭하여 전체선택, 해제를 하거나 또는 checkAll true / false 을 입력하여 전체선택, 해제를 했음을 알리는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

checked - 체크가 되었으면 true, 해제가 되었으면 false가 출력

Example:

gridView.onItemAllChecked = function (grid, checked) {
    console.log('All checked as ' + checked);
};

onItemChecked

사용자가 checkBar의 체크박스를 클릭하거나 checkItem을 호출하여 체크를 변경했음을 알리는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

itemIndex - 체크된 데이터 행의 순서

checked - 체크가 되었으면 true, 해제되었으면 false가 출력

Example:

gridView.onItemChecked = function (grid, itemIndex, checked) {
    console.log('Checked as ' + checked + ' at ' + itemIndex);
};

onItemEditCancel

사용자가 행 편집을 취소를 결정하는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

itemIndex - 편집이 취소된 행의 순서

state - 편집 취소된 행의 상태이다. updating, inserting, appending 이 반환된다.

[반환값] - 기본값: true, false 를 반환하면 행 편집 취소가 취소된다. (계속 편집 상태)

Example:

gridView.onItemEditCancel = function (grid, itemIndex, state) {
     console.log(state);
     if (itemIndex % 5 === 0) {
         return false;
     }
}

onItemEditCanceled

사용자가 행 편집을 취소했음을 알리는 콜백

[매개변수 목록]

grid - GridBase 컨트롤

itemIndex - 편집이 취소된 행의 순서

state - 편집 취소된 행의 상태

Example:

gridView.onItemEditCanceled = function (grid, itemIndex, state) {
     console.log(state);
}

onItemsChecked

사용자가 checkBar의 체크박스를 클릭하거나 checkItem을 호출하여 체크를 변경했음을 알리는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

items - 체크된 데이터 행의 순서

checked - true: 체크, false: 해제

Example:

gridView.onItemsChecked = function (grid, items, checked){
    console.log(items.join() + ' are checked as ' + checked);
}

onKeyDown

키 입력을 결정하는 콜백

Remarks:

KeyDown 될 때 발생한다. 키를 입력하고 있는 동안 계속 발생된다.

[매개변수 목록]

grid - GridBase 컨트롤

event - KeyboardEvent

[반환값] - 키 입력을 금지할때 false 를 반환한다/

Example:

gridView.onKeyDown = function (grid, event) {
     console.log('You pressed... ' + "event);
}

onKeyPress

키가 입력되고 있음을 알리는 콜백

Remarks:

KeyPress 될 때 발생한다. 키를 입력하고 있는 동안 계속 발생된다.

[매개변수 목록]

grid - GridBase 컨트롤

event - KeyboardEvent

Example:

gridView.onKeypross = function (grid, event) {
     console.log('You are pressing... ' + event);
}

onKeyUp

키를 입력하였음을 알리는 콜백.

Remarks:

KeyUp 될 때 발생한다.

[매개변수 목록]

grid - GridBase 컨트롤

event - KeyboardEvent

Example:

gridView.onKeyUp = function (grid, event) {
     console.log('You pressed... ' + "event);
}

onLayoutCollapsed

그룹 Layout이 접혔음을 알리는 콜백

Remarks:

[매개변수 목록] grid - GridBase 컨트롤

layout - 접힌 그룹 layout

Example:

gridView.onLayoutCollapsed = function(grid, layout) {
    console.log("Layout Collapsed => " + layout.name)
}

onLayoutCollapsing

그룹 Layout 접기를 결정하는 콜백

Remarks:

false를 return 하면 접기가 취소된다. [매개변수 목록]

grid - GridBase 컨트롤

layout - 접는 그룹 layout

Example:

gridView.onLayoutCollapsing = function(grid, layout) {
    if (layout.name === "group0") {
        return false;
    }
}

onLayoutExpanded

그룹 Layout이 펼쳐졌음을 알리는 콜백

Remarks:

[매개변수 목록] grid - GridBase 컨트롤

layout - 펼칠 그룹 layout

Example:

gridView.onLayoutExpanded = function(grid, layout) {
    console.log("Layout Expanded => " + layout.name)
}

onLayoutExpanding

그룹 Layout 펼치기를 결정하는 콜백

Remarks:

false를 return 하면 펼치기가 취소된다. [매개변수 목록]

grid - GridBase 컨트롤

layout - 펼칠 그룹 layout

Example:

gridView.onLayoutExpanding = function(grid, layout) {
    if (layout.name === "group0") {
        return false;
    }
}

onLayoutPropertyChanged

Layout의 속성 중 displayWidth, displayIndex, visible 속성값이 변경되었음을 알리는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

layout - 변경된 layout의 정보

property - 컬럼의 displayWidth, displayIndex, visible 속성 중 변경된 것

newValue - 변경후 값이 전달된다.

oldValue - 변경전 값이 전달된다.

Example:

gridView.onLayoutPropertyChanged = function (grid, layout, property, newValue, oldValue) {
 
        console.log(layout + "s props werer changed!");
}

onLeftPosChanged

수평 스크롤 바의 위치가 변경됨을 알리는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

pos - 스크롤 중일때 그리드 왼쪽 위치

Example:

gridView.onLeftPosChanged = function (grid, pos) {
     console.log(pos + " was changed!");
}

onMenuItemClicked

추가한 팝업메뉴 항목의 클릭을 알리는 콜백

Remarks:

MenuItem에 callback 이 지정된 경우 호출되지 않는다.

[매개변수 목록]

grid - GridBase 컨트롤

item - MenuItem 객체

clickData - 클릭 된 아이템의 정보

Example:

gridView.onMenuItemClicked =  function (grid, item, clickData) {
     console.log(item.label + "was clicked.");
};

onPaste

그리드에 붙여넣기를 결정하는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

index - 셀 위치정보

event - 이벤트 정보 (ClipboardEvent (opens in a new tab))

[반환값] - false를 반환하면 붙여넣기가 취소된다.

Example:

gridView.onPaste = function (grid, index, event){
    console.log("Pasting Starts!");
}

onPasted

그리드에 붙여넣기 했음을 알리는 콜백

Remarks:

입력 편집기가 표시된 상태에서는 발생하지 않는다.

[매개변수 목록]

grid - GridBase 컨트롤

Example:

gridView.onPasted = function (grid){
    console.log("Pasted!");
}

onPopupMenuPopup

popup button을 클릭했을때 popupMenu표시를 결정하는 콜백

Remarks:

셀 popup버튼 또는 header의 popup버튼을 클릭했을때 호출된다. [매개변수 목록]

grid - GridBase 컨트롤

x - PopupMenu 가 호출된 x좌표값

y - PopupMenu 가 호출된 y좌표값

clickData - 클릭 된 아이템의 정보

[반환값] - false를 반환하면 팝업 메뉴가 표시되지 않는다. 또 menuName을 return하는 경우 해당 menu가 표시된다.

Example:

gridView.onPopupMenuPopup =  function (grid, x, y, clickData) {
     console.log(clickData);
};

onRowInserting

사용자가 Insert 키를 눌러 새로운 행을 삽입하거나, 마지막 행에서 아래 화살표를 눌러 행을 추가하는 것을 결정하는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

itemIndex - 행 삽입 위치의 순서

dataRow - 행 삽입 위치의 고유 id

[반환값] - 행 추가를 금지 시킬 때 사용자에게 표시할 메시지

Example:

gridView.onRowInserting = function (grid, itemIndex, dataRow) {
     console.log('Inserted: ' + dataRow + ' at ' + itemIndex);
}

onRowsDeleting

사용자가 Ctrl+Del 키를 누르거나 deleteSelection() 으로 삭제할 때, 실제 삭제를 결정하는 콜백

[매개변수 목록]

grid - GridBase 컨트롤

rows - 삭제하려는 행들의 데이터 행 순서들의 배열

[반환값] - null이 아닌 값을 반환하면 지정 텍스트를 표시하고 삭제를 취소한다.

Example:

gridView.onRowsDeleting = function (grid, rows) {
     console.log('Deleted: ' + rows.join());
}

onRowsPasted

여러 행을 붙여넣기 했음을 알리는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

items - 붙여넣기된 행들의 그리드에서의 순서

Example:

gridView.onRowsPasted = function (grid, items) {
    console.log('Rows pasted!: ' + items.join());
};

onScrollToBottom

사용자가 키보드나 스크롤 바 등을 조작하여 그리드에 마지막 행이 표시될 때 호출되는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

Example:

gridView.onScrollToBottom =  function (grid) {
    var data = {"SearchKey":"searchData"},
    $.ajax({
        url:"/loadData.do",
        data: data,
        type:"post",
        async:false,
        success: function (data, textStatus) {
            grid.fillJsonData(data.dataList, {fillMode:"append"});
        }
    })
});

onSearchCellButtonClick

SearchCellEditor 에서 버튼을 클릭했음을 알리는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

index - 클릭된 셀 위치정보

text - 셀에 입력된 값

Example:

gridView.onSearchCellButtonClick = function (grid, index, text) {
     console.log(text + ' button was clicked!');
}

onSelectionAdded

Warning: This API is now obsolete.

2.6.0 버전 이후 제거될 예정

선택 영역이 새로 추가됨을 알리는 콜백

Remarks:

변경 중인 선택 영역의 정보는 getSelectionData 함수로 알 수 있다. GridBase.getSelection().style 이 SelectionStyle.NONE 인 경우 발생하지 않는다.

[매개변수 목록]

grid - GridBase 컨트롤

selection - 선택 영역 정보

Example:

gridView.onSelectionAdded = function (grid, selection) {
     console.log(selection);
}

onSelectionChanged

사용자가 마우스나 키보드로 선택 영역의 크기를 변경했음을 알리는 콜백

Remarks:

변경 중인 선택 영역의 정보는 getSelectionData 함수로 알 수 있다. GridBase.displayOptions.selectionStyle 이 SelectionStyle.NONE 인 경우 발생하지 않는다.

[매개변수 목록]

grid - GridBase 컨트롤 selection - 선택 영역 정보

Example:

gridView.onSelectionChanged = function (grid) {
     console.log('Selection changed!');
}

onSelectionCleared

사용자가 마우스나 키보드로 선택 영역을 변경했을때 기존 선택 영역이 제거 되었음을 알리는 콜백

Remarks:

기존 선택영역이 없는 경우 발생하지 않는다.

[매개변수 목록]

grid - GridBase 컨트롤

Example:

gridView.onSelectionCleared = function (grid) {
     console.log('Selection cleared');
}

onSelectionEnded

Warning: This API is now obsolete.

2.6.0 버전 이후 제거될 예정

사용자가 마우스로 선택 영역 변경 완료를 알리는 콜백

Remarks:

변경된 선택 영역의 정보는 getSelection 함수로 알수 있고 선택영역의 데이터는 getSelectionData 함수로 알 수 있다. [매개변수 목록]

grid - GridBase 컨트롤 selection - 선택 영역 정보

Example:

gridView.onSelectionEnded = function (grid) {
     let cells = grid.getSelectionData();
     console.log(cells);
}

onShowEditCommand

mobile에서 표시되는 editCommand의 표시여부를 결정하는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

index - 편집기가 열리려는 셀의 위치정보

[반환값] - false 를 return하면 EditCommand가 표시되지 않는다.

onShowEditor

Cell 별로 열리는 Editor 의 표시를 결정하는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

index - 편집기가 열리려는 셀의 위치정보

props - 셀 편집기 설정 정보

attrs - 내부 편집기 element attributes. 사용자가 임의로 지정할 수 있는 값들.

[반환값] - false 를 return하면 Editor가 표시되지 않는다.

Example:

gridView.onShowEditor = function (grid, index, props, attrs) {
     console.log("onShowEditor:" + index.itemIndex + "," + index.column);
     if (index.column == "OrderID") {
	        props.textCase = 'upper';
     }
}

onShowHeaderTooltip

컬럼 헤더의 툴팁이 표시되었음을 알리는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

column - 툴팁이 표시될 컬럼 GroupHeader이면 해당 Group의 첫번째 Column

value - 툴팁에 표시될 값. 기본값으로 컬럼헤더 text가 전달된다.

layout - 툴팁이 표시될 컬럼의 layout

[반환값] - 툴팁에 표시할 값. 아무것도 return 하지 않으면 Tooltip이 표시되지 않는다.

Example:

gridView.onShowHeaderTooltip = function (grid, column, value, layout) {
    return 'header-tooltip: ' + value;
}

onShowTooltip

데이터 셀의 툴팁이 표시되었음을 알리는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤.

index - 마우스 포인터가 위치한 영역의 셀 위치정보

value - 마우스 포인터가 위치한 데이터

[반환값] - 툴팁에 표시할 값. 아무것도 return 하지 않으면 Tooltip이 표시되지 않는다.

Example:

gridView.onShowTooltip = function (grid, index, value) {
     if (index % 7 === 0) {
             return '7-multiple Row!'
     }
}

onSorting

정렬을 결정하는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

fields - 정렬하는 필드의 목록

direction - 각 필드에 대한 정렬 방식 목록

[반환값] - false 를 반환하면 정렬은 취소된다.

Example:

gridView.onSorting = function (grid) {
     if (fields.length > 5) {
         return false;
     }
}

onSortingChanged

정렬했음을 알리는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

Example:

gridView.onSortingChanged = function (grid) {
    console.log('Sorted! ');
}

onTopIndexChanged

수직 스크롤 바의 위치가 변경됨을 알리는 콜백

Remarks:

[매개변수 목록]

grid - GridBase 컨트롤

itemIndex - 스크롤 중일때 그리드 상단에 표시되는 itemIndex 값

Example:

gridView.onTopIndexChanged = function (grid, idx) {
     console.log(idx + "was changed!");
}

onTopIndexChanging

gridView.topIndex가 변경될때 호출되는 콜백

Remarks:

스크롤할때 사용자가 지정한 값만큼 이동할때 사용한다. 페이지에 보여지는 값 이상을 return하지 말아야 한다.

[매개변수 목록]

grid - GridBase 컨트롤

currentTop - 변경되기전 topIndex

delta - 변경값

focusing - 포커스 변경에 의해서 topIndex가 변경되는 경우 true

adjust - 그리드 내부에서 위치를 조정하는 경우 true

[반환값] - number를 return하면 해당 값만큼 topIndex를 이동한다.

Example:

var userSetTopItem = false;
grid.onTopIndexChanging = function(_grid, current, delta, focusing, adjust) {
// mergeCell을 block처럼 사용하는 경우 스크롤도 block단위로 이동하기 위해서 사용한다.
// setTopItem의 경우 이벤트에서는 구분할수 없기 때문에 외부에서 구분할수 있는 값을 주어야 한다.
// rowGrouping된 경우는 아래 코드를 그대로 사용할수는 없다.
 
    var fcnt = _grid.fixedOptions.rowCount;
    // 첫행으로 이동하거나 마지막행으로 이동되는 경우 또는 그리드 내부에서 위치를 보정하는 경우 'null'을 return하면 원래 이동하려는  delta값 만큼 이동한다.
    if (current + delta + _grid.fullItemCount() + fcnt >= _grid.getItemCount() || current + delta === 0 || (adjust && !focusing)) {
        console.log(current, delta, `scroll bottom or Top or adjust = ${adjust}`);
        return;
    }
 
    var top = current + delta;  // 그리드가 이동하려는 topIndex
    var items = _grid.getMergedItems(top + fcnt, "merge컬럼", true, true);  // 이동할 block의 items
    var curItems = _grid.getMergedItems(current + fcnt, "merge컬럼", true, true);  // 현재 top block의 items
 
    if (delta < 0 || top === items[0] + fcnt || userSetTopItem) {  // 위로 스크롤하거나 fixedRow가 있으면서 최상단으로 이동 또는 사용자가 setTopItem을 했을때
        top = items[0]; // 블록의 첫번째 행이 topIndex
    } else { // 아래쪽으로 스크롤 했을때
        top = items[0] === curItems[0] ? items[items.length - 1] + 1 : top = items[0]
    }
 
    return top - current - fcnt;
}
 
function setTop(index) {
    userSetTopItem = true;
    grid.setTopItem(index);
    userSetTopItem = false;
}

onValidateColumn

셀 편집을 완료하고 다른 셀로 이동할때 Javascript를 통한 사용자 검증 결과를 결정하는 콜백

Remarks:

해당 컬럼 값에 문제가 있다면 검증 에러와 에러 메시지를 그리드에 반환값으로 전달한다.

level과 message 값을 포함하는 오브젝트를 그리드에 전달하면 검증에 실패한 것으로 판단한다.

ValidationError 형태로 반환해야 한다.

[매개변수 목록]

grid - GridBase 컨트롤

column - 컬럼 오브젝트

inserting - true: 열 추가 중, false: 열 수정 중

value - 입력된 필드의 값

itemIndex - 셀편집된 행의 순서

dataRow - 셀편집된 행의 고유 번호.

[반환값] - ValidationError

Example:

gridView.onValidateColumn =  function (grid, column, inserting, value, itemIndex, dataRow) {
     if (column.name != "Knock Knock") {
         return {
             level: 'warning';
             messsage: "It's a dad joke! Do not " + JSON.stringify(column);
         }
     }
};

onValidateRow

Javascript를 통한 행 단위 사용자 검증 결과를 결정하는 콜백

Remarks:

해당 행의 값들에 문제가 있다면 검증 에러와 에러 메시지를 그리드에 반환값으로 전달한다.

level과 message 값을 포함하는 오브젝트를 그리드에 전달하면 검증에 실패한 것으로 판단한다.

ValidationError 형태로 반환해야 한다.

[매개변수 목록]

grid - GridBase 컨트롤

itemIndex - 검증하는 행의 순서

dataRow - 검증하는 행의 고유 번호

inserting - true: 열 추가 중, false: 열 수정 중

values - 입력된 필드들의 값

[반환값] - ValidationError

Example:

gridView.onValidateRow =  function (grid, itemIndex, dataRow, inserting, values) {
     if (dataRow % 2 === 0) {
         return {
             level: 'info';
             messsage: "even!";
         }
     }
};

onValidationFail

validation 실패시 발생하는 콜백

Remarks:

콜백함수에서 별도의 에러 처리가 가능하고, err 객체를 return 하면 자체 Validation 메세지가 표시되고 그 외의 경우 표시되지 않는다.

level과 message 값을 포함하는 오브젝트를 그리드에 전달하면 검증에 실패한 것으로 판단한다.

ValidationError 형태로 반환해야 한다.

[매개변수 목록]

grid - GridBase 컨트롤

itemIndex - 검증하는 행의 인덱스

column - 컬럼 오브젝트

error - 검증 결과

[반환값] - ValidationError

Example:

gridView.onValidationFail = function (grid, itemIndex, column, err) {
    console.log("onValidationFail:" + itemIndex + "," + JSON.stringify(column) + "," + JSON.stringify(err));
    if (column.name != "Mortal") {
        var editValue = grid.getEditValue();
        err.message = "입력된 "+editValue+" 는 잘못된 값입니다";
        return err;
    }
}

onWheel

Wheel Event가 발생했음을 알리는 콜백

Remarks:

Mouse Wheel을 돌리면 발생한다.

[매개변수 목록]

grid - GridBase 컨트롤

event - WheelEvent

[반환값] - Wheel Event를 무시하려면 false 를 반환한다/

Example:

gridView.onWheel = function (grid, event) {
     console.log('You wheeled... ' + "event);
}

Properties Desc

checkBar

그리드의 체크바에 관한 설정 모델

Remarks:

CheckBar 객체를 반환한다. CheckBar 속성을 가져오거나 설정할 수 있다.

Example:

gridView.checkBar.visibleOnly = true;

copyOptions

클립보드에 복사하는 것에 대한 설정 모델

Remarks:

CopyOptions 객체를 반환한다. CopyOptions 의 속성을 가져오거나 설정할 수 있다.

Example:

gridView.copyOptions.singleMode = true;

dataDropOptions

데이터 drag and drop 과 관련 된 설정 모델

Remarks:

dataDropOptions 를 반환한다. DataDropOptions 의 속성을 가져오거나 설정할 수 있다.

Example:

gridView.dataDropOptions.dropMode = 'copy';

disabled

그리드가 마우스/키보드 이벤트에 대하여 반응안함 상태

Remarks:

값 할당으로 변경할 수 있다.

Example:

gridView.disabled = true;

displayOptions

그리드 수준에서 관리되는 표시 정보들에 대한 설정 모델

Remarks:

DisplayOptions 객체를 반환한다. DisplayOptions 의 속성을 가져오거나 설정할 수 있다.

Example:

gridView.displayOptions.columnResizable = true;

editOptions

데이터 편집에 대한 설정 모델

Remarks:

EditOptions 객체를 반환한다. EditOptions 의 속성을 가져오거나 설정할 수 있다.

Example:

gridView.editOptions.deletable = true;

editorOptions

편집기에 대한 설정 모델

Remarks:

EditorOptions 객체를 반환한다. EditorOptions 의 속성을 가져오거나 설정할 수 있다.

Example:

gridView.editorOptions.yearDisplayFormat = "{Y}년";

filteringOptions

데이터 필터링에 대한 설정 모델

Remarks:

FilteringOptions 객체를 반환한다. FilteringOptions 의 속성을 가져오거나 설정할 수 있다.

Example:

gridView.filteringOptions.enabled = false;

filterPanel

fixedOptions

그리드의 고정 행 및 컬럼에 대한 설정 모델

Remarks:

FixedOptions 객체를 반환한다. FixedOptions 의 속성을 가져오거나 설정할 수 있다.

Example:

gridView.fixedOptions.colCount = 2;

footer

첫번째 푸터에 관한 설정 모델

Remarks:

GridFooter 객체를 반환한다. GridFooter 의 속성을 가져오거나 설정할 수 있다.

Example:

gridView.footer.styleName = 'custom-footer-1';

footers

푸터들에 관한 설정 모델

Remarks:

GridFooter 의 콜렉션 객체를 반환한다. GridFooterCollection 의 속성을 가져오거나 설정할 수 있다.

Example:

gridView.footers.visible = false;

formatOptions

데이터 필드 값의 변환 형식에 대한 설정 모델

Remarks:

FormatOptions 객체를 반환한다. FormatOptions 의 속성을 가져오거나 설정할 수 있다.

Example:

gridView.formatOptions.datetimeFormat = 'yyyy-mm-dd';

header

그리드의 헤더 영역에 관한 설정 모델

Remarks:

GridHeader 객체를 반환한다. GridHeader 의 속성을 가져오거나 설정할 수 있다.

Example:

gridView.header.showTooltip = true;

headerSummaries

그리드 헤더 영역에 표시되는 Header Summary 에 대한 컬렉션 설정 모델

Remarks:

HeaderSummary 의 콜렉션 객체를 반환한다. HeaderSummaryCollection 의 속성을 가져온다.

Example:

gridView.headerSummaries.visible = false;

headerSummary

그리드 헤더 영역에 표시되는 첫번째 Header Summary에 대한 설정 모델

Remarks:

HeaderSummary 객체를 반환한다. HeaderSummary 의 속성을 가져오거나 설정할 수 있다.

Example:

gridView.headerSummary.visible = false;

hideDeletedRows

그리드에 설정되어 있는 삭제된 행들의 숨김 여부

Remarks:

값 할당으로 변경할 수 있다.

Example:

gridView.hideDeletedRows = true;

mobileOptions

모바일 관련 설정 모델

Remarks:

mobileOptions 를 반환한다. MobileOptions 의 속성을 가져오거나 설정할 수 있다.

Example:

gridView.mobileOptions.longTapDuration = false;

pasteOptions

클립보드의 데이터를 붙여 넣는 것에 대한 설정 모델

Remarks:

PasteOptions 객체를 반환한다. PasteOptions 의 속성을 가져오거나 설정할 수 있다.

Example:

gridView.pasteOptions.enabled = false;

redoing

현재상태에서 재실행 가능 여부

Example:

gridView.redoing = false

rowIndicator

그리드의 인디케이터에 관한 설정 모델

Remarks:

RowIndicator 객체를 반환한다. RowIndicator 속성을 가져오거나 설정할 수 있다.

Example:

gridView.rowIndicator.displayValue = 'row';

scrollBarHeight

스크롤바의 높이를 변경

Example:

gridView.scrollBarHeight = 24;

scrollBarWidth

스크롤바의 너비를 변경

Example:

gridView.scrollBarWidth = 24;

sortingOptions

데이터 정렬에 대한 설정 모델

Remarks:

SortingOptions 객체를 반환한다. SortingOptions 의 속성을 가져오거나 설정할 수 있다.

Example:

gridView.sortingOptions.style = 'reverse';

sortMode

데이터 수정 이후 정렬 동작 모드

Remarks:

그리드에 설정되어 있는 SortMode 를 반환한다. 값 할당으로 변경할 수 있다.

Example:

gridView.sortMode = "explicit";

stateBar

그리드의 상태바에 관한 설정 모델

Remarks:

StateBar 객체를 반환한다. StateBar 속성을 가져오거나 설정할 수 있다.

Example:

gridView.stateBar.mark = 'image';

summaryMode

현재 그리드의 합계를 계산하는 방식

Remarks:

그리드에 설정되어 있는 SummaryMode 를 반환한다. 값 할당으로 변경할 수 있다.

Example:

gridView.summaryMode = "aggregate";

undoable

실행취소 기능 사용 가능 여부

Remarks:

값 할당으로 변경할 수 있다.

Example:

gridView.undoable = false

undoing

현재상태에서 실행취소 가능 여부

Example:

gridView.undoing = false

Methods Desc

activateAllColumnFilters

컬럼에 등록된 모든 필터들을 적용 또는 해제한다.

Example:

gridView.activateAllColumnFilters('행정구역별', true);

activateColumnFilters

컬럼에 등록된 필터들 중, filterNames 에 포함된 필터명을 갖는 필터들을 적용시키거나 해제한다.

Example:

gridView.activateColumnFilters('행정구역별', ['전'], true);

addColumn

설정된 컬럼들 외에 추가로 컬럼을 설정한다.

Example:

let col = {
     "name": "EmployeeID",
     "fieldName": "EmployeeID",
     "type": "data",
     "width": "90",
     "header": {
         "text": "Employee ID"
     }
}
 
gridView.addColumn(col);

addColumnFilters

컬럼에 하나 이상의 필터를 등록한다. column.autoFilter가 true인 경우 적용되지 않는다.

Example:

gridView.addColumnFilters('행정구역별', [{
         name: "전",
         criteria: "value = '전'"
     }, {
         name: "답",
         criteria: "value = '답'"
     }])

addLayout

Layout에 컬럼 또는 group을 추가한다.

Remarks:

layout이 설정되지 않은 경우 사용할수 없다. gridView.setColumnLayout을 이용해서 layout상태로 변경한후 사용해야 한다.

Example:

gridView.setColumnLayout([]); // 빈 layout을 추가한다.
 
const column1 = gridView.addColumn({fieldName: "field1", name: "col1"});
const column2 = gridView.addColumn({fieldName: "field2", name: "col2"});
const column3 = gridView.addColumn({fieldName: "field2", name: "col3"});
gridView.addLayout(column1); // gridView.addLayout("col1")
gridView.addLayout({name: "group0", items: [column2, column3]});

addLookupSource

lookup tree에서 사용할 LookupSource 를 추가 등록한다.

Remarks:

기존id에 추가를 원하는 경우는 fillLookupData() 를 사용한다.

Example:

let area3codes = {
     id:"area2code",
     levels:3,
     keys: [['11', '11010', '1101053'], ['11', '11010', '1101054']],
     values: ['사직동', '삼청동']
};
gridView.addLookupSource(area3codes);

addPopupMenu

그리드에 Popup Menu를 추가한다.

Remarks:

추가된 메뉴는 데이터셀 등에 연결할 수 있다.

Example:

let menu = [{
     label: "menu1 입니다.",
     children: [{
         label: "submenu1 입니다."
     }, {
         label: "submenu2 입니다."
     }]
 }, {
     label: "menu2 입니다",
 }, {
     label: "-"
 }, {
     label: "menu3 입니다",
     type: "check",
     checked: true,
     tag: "check_menu"
 }];
 
gridView.addPopupMenu('menu1', menu);

addSelection

그리드에서 선택할 영역을 추가한다.

Remarks:

selectionMode가 extended인 경우에만 추가된다.

Example:

let sel = {
     style: "block",
     startItem: 2,
     startColumn: "지목",
     endItem: 3,
     endColumn: "단위"
}
gridView.addSelection(sel);

addUserCellStyle

셀의 스타일을 지정한다.

Remarks:

셀의 스타일을 지정하기 위한 규칙을 만들수 없는 경우 스타일을 적용하기 위해 사용한다. column에 -1을 입력하면 행 전체에 적용된다.

applyCheckables

CheckBar에 Expression 기준으로 checkable을 적용한다.

Example:

gridView.applyCheckables();

autoFiltersRefresh

column.autoFilter가 true인경우 filter목록을 갱신한다.

Remarks:

autoFilter의 목록을 갱신할때 호출한다. 또는 사용자가 filter 아이콘을 클릭하면 자동으로 갱신된다.

beginUpdate

그리드와 관련된 속성들이 변경될 때마다 update lock 을 걸어 내부적인 변경 처리 호출을 지연시킨다.

Remarks:

endUpdate() 와 같이 사용한다.

Example:

gridview.beginUpdate();
try {
    gridview.displayOptions( { ... });
    gridview.selectOptions( { ... });
...
} finally {
    gridview.endUpdate();
}

cancel

현재 편집 중인 행의 편집을 취소한다.

Remarks:

편집 중이 아니라면 아무 일도 하지 않는다. 편집을 완료할 때는 commit() 을 호출해야 한다.

Example:

gridView.cancel();

cancelEditor

편집을 취소하고 편집기 창을 닫는다.

Example:

gridView.cancelEditor();

checkAll

그리드의 데이터행을 모두 체크,해제한다.

Remarks:

CheckBar 의 exclusive에 영향을 받지않는다.

Example:

gridView.checkAll();

checkItem

지정된 아이템을 체크하거나 해제한다.

Example:

gridView.checkItem(4);

checkItems

입력된 아이템 배열에 해당하는 아이템을 체크하거나 해제한다.

Example:

gridView.checkItems([1,2,3,4]);

checkRow

지정된 데이터 행을 체크하거나 해제한다.

Example:

gridView.checkRow(4);

checkRows

입력된 고유 행 번호들과 연결된 Item을 체크하거나 해제한다.

Example:

gridView.checkRows([1,2,3,4]);

clearColumnFilters

컬럼에 등록된 필터들을 제거한다. column.autoFilter가 true인 경우 적용되지 않는다.

Example:

gridView.clearColumnFilters();

clearCommandStack

Command Stack 을 초기화한다.

Example:

gridView.clearCommandStack();

clearCurrent

focus를 제거한다.

Example:

gridView.clearCurrent();

clearInvalidCells

값 검증에 실패한 셀 정보들을 삭제한다.

Remarks:

이 함수는 validateCells() 를 실행했을때 검증에 실패한 데이터의 목록을 지울때 사용한다.

Example:

gridView.validateCells();
gridView.clearInvalidCells();
let invalids = gridView.getInvalidCells(); // null

clearLookupData

지정된 SourceId에 해당하는 lookup source를 clear한다.

Example:

gridView.clearLookupData('area1code');

clearRowHeights

변경 적용한 개별 행 높이를 초기값으로 되돌린다.

Example:

gridView.clearRowHeights(true);

clearSelection

선택 영역을 모두 제거한다.

Example:

gridView.clearSelection();

closeList

필터박스 또는 DropDown Editor를 닫는다.

Example:

gridView.closeList();

closeLoading

로딩 애니메이션을 숨긴다.

Example:

gridView.closeLoading();

closeProgress

프로그레스 바를 닫는다.

Example:

gridView.closeProgress();

columnByField

필드 이름으로 지정되는 데이터필드에 연결되어 있는 첫 번째 컬럼 정보를 반환한다.

Example:

let col = gridView.columnByField('fieldName');

columnByName

컬럼 이름으로 컬럼 설정 정보를 반환한다.

Example:

let col = gridView.columnByName('colName');

columnByTag

입력된 tag값을 가지는 컬럼을 가져온다.

Remarks:

같은 tag를 갖는 컬럼이 하나 이상 존재하면 그 중 첫번째 컬럼을 반환한다. 해당하는 컬럼이 존재하지 않으면 null을 반환한다.

Example:

let col = gridView.columnByTag('tag');

columnsByTag

입력된 tag값을 가지는 컬럼들을 배열로 가져온다.

Example:

let cols = gridVeiw.columnsByTag('tag');

commit

편집 중인 행의 편집을 완료하고 DataProvider에 저장한다.

Example:

gridView.commit();

commitEditor

현재 편집기의 내용을 셀에 반영한다.

Remarks:

실행 후 onEditCommit, onEditRowChanged, onCellEditted 이벤트가 순차적으로 발생한다.

Example:

gridView.commitEditor();

copyToClipboard

선택한 영역에 포함된 셀들의 정보를 복사 혹은 반환한다.

Remarks:

선택된 영역이 여러개인경우 사용할수 없다.

Example:

let sel = gridView.getSelection();
let copied = gridView.copyToClipboard(sel);

deleteSelection

현재 선택 영역 안의 행들을 삭제한다.

Remarks:

EditOptions.deletable 이 false인 경우 작동하지 않는다.

Example:

gridView.deleteSelection(true);

destroy

그리드를 해제한다.

Example:

gridView.destroy();

endUpdate

update lock 을 풀고 그리드를 다시 그린다.

Remarks:

beginUpdate() 와 같이 사용한다.

Example:

beginUpdate() 참조

eraseSelection

선택 영역 안의 셀들의 값을 지운다. 즉, undefined로 값을 변경한다.

Remarks:

EditOptions.erasable이 false인 경우 작동하지 않는다.

Example:

gridView.eraseSelection();

existsCustomRenderer

사용자렌더러가 있는지 확인한다.

existsLookupData

지정된 lookupsource에 지정된 키가 존재하는지 여부를 반환한다.

Example:

gridView.existsLookupData('area1code', ['12']);

exportGrid

지정한 설정에 따라 현재 그리드의 모양과 데이터를 외부 문서로 내보낸다.

Example:

gridView.exportGrid({
     type: 'csv'
})