SMART datagrid v1.4 > Examples
SMART datagrid 객체들의 속성이나 메쏘드를 사용할 때, 데이터셀의 위치를 지정해야 하는 경우가 많다. 데이터셀의 위치는 컬럼과 행 두 값으로 결정되고, CellIndex 객체가 두 값을 동시에 갖고 있으면 관련된 메쏘드나 속성에서 데이터셀의 위치 값으로 사용된다.
이 번 예제에서는 Column Grouping에서 사용한 필드와 컬럼 정의를 이용해서, CellIndex 가 사용되는 경우와, focusedIndex 속성으로 지정되는 포커스 셀의 위치를 변경하고, 변경 이벤트에 대응하는 방법을 알아본다.
아래 그리드에서 두꺼운 경계선의 상자가 표시되는 셀이 입력 포커스를 갖는 셀이며, GridBase.focusedIndex 속성이 그 셀의 위치값을 리턴한다. 키보드 입력을 시작하면 그 셀에서 편집기가 표시되고 변경이 시작된다. 셀 편집과 관련된 내용은 다른 예제에서 보다 자세히 설명한다.
GridBase.setFocusedIndex 메쏘드를 이용해 포커스 셀의 위치를 변경할 수 있다. 위의 "Change Focus" 버튼을 클릭하면 포커스 위치가 아래로 계속 이동한다.
var index = grdMain.focusedIndex();
index.rowIndex++;
grdMain.setFocusedIndex(index, true);
사용자가 키보드 및 마우스를 이용하거나 setFocusedIndex를 직접 호출해서 포커스 셀 위치가 변경되면 GridBase.onCurrentChanged 이벤트가 발생한다. 또, 변경되기 직전에 onCurrentChanging 이벤트가 발생하는데 이벤트 핸들러 내에서 Boolean false를 리턴하면 셀 위치가 변경되지 않는다.
grdMain.onCurrentChanging = function (grid, newIndex, oldIndex) {
return $('#chkChange')[0].checked;
};
grdMain.onCurrentChanged = function (grid, newIndex) {
$('#txtCurrent').text("(" + newIndex.rowIndex + ", " + newIndex.column.name() + ")");
};
데이터행 변경만 체크할 필요가 있는데 이 때는 onCurrentRowChanged 이벤트를 사용한다. 이 이벤트는 데이터행의 위치가 변경됐을 때만 발생한다. 자세한 설명은 GridBase.onCurrentRowChanged 도움말 토픽을 참조한다.
grdMain.onCurrentRowChanged = function (grid, oldRow, newRow) {
$('#txtCurrentRow').text('DataRow: ' + oldRow + ' -> ' + newRow);
};
데이터셀 등에서 마우스 클릭이나 더블클릭을 하면 이벤트가 발생하는 데, 이 때에도 해당 셀들의 위치 정보가 CellIndex 객체로 전달된다.
grid.onDataCellClicked = function (grid, index) {
$('#txtClicked').text("(" + index.rowIndex + ", " + index.column.name() + ") " + " clicked.");
};
grid.onDataCellDblClicked = function (grid, index) {
$('#txtClicked').text("(" + index.rowIndex + ", " + index.column.name() + ") " + " double clicked.");
};
방향키로 cell 이동후 ctrl+space 키 조합으로 onDataCellClicked 이벤트가 동작하는 것을 확인 할수 있다. keyCombinationToClicked