SMART datagrid v1.4 > Examples
데이터행을 수정하는 방법은 여러가지 있지만, 이 번 예제에서는 사용자 입력으로 기존 행의 값들을 변경하는 방법을 알아본다. DataLudi의 그리드 내 편집 기능을 활용하면 기존 데스크탑과 유사한 사용자 입력 UI를 구현할 수 있다.
사용자가 직접 데이터셀을 편집하고 행을 수정하기 위해서는 먼저 GridBase.editOptions의 readOnly를 false로 updatable을 true(모두 기본값)로 설정돼야 한다. 편집하려는 행의 데이터셀에 포커스를 옮기고, F2 키를 입력해서 편집기를 미리 표시하거나 바로 텍스트 키를 입력하면 셀 편집이 시작된다.
편집 후 행 수정을 완료하기 위해서는 위아래 화살표 키나 마우스로 행을 이동시키면 된다. 또, Esc 키를 누르면 편집을 취소할 수 있다. 행 수정이 시작되면 row indicator 셀에 수정 마크가 표시되고, 편집을 완료해서 실제 행 수정이 됐다면, row indicator 상태 셀의 색상이 변한다.
행 수정이 완료되면 데이터셋의 onRowUpdated 이벤트가 발생한다. 데이터셋 행 수정 전에는 onRowUpdating 이벤트가 발생하는 데, 이 이벤트 핸들러 내에서 명시적으로 false를 리턴하면 행 수정이 취소된다.
또, 그리드 수준에서 행 수정을 시작하지 못하게 할 수도 있다. 그리드의 onUpdating 이벤트 핸들러 내에서 명시적으로 false를 리턴하면 수정을 시작할 수 없다.
grdMain.onUpdating = function (grid, rowIndex) {
if ($('#chkEventUpdatable').is(':checked')) {
return false;
}
};
사용자 입력 대신 GridBase.edit 메소드를 호출해서 행 수정을 시작할 수도 있다.