SMART datagrid v1.4 > Examples
사용자가 데이터셀을 직접 편집해서 데이터행의 값을 수정하거나 추가할 수 있다. 우선 기존 행을 수정하는 방법부터 알아본다.
수정하고자 하는 행에 포함된 데이터셀로 포커스를 이동하고, F2 키를 입력하면 컬럼에 설정된 편집기가 표시된다. 편집기가 표시된 후 해당 셀이 수정 가능한 상태면 편집을 시작할 수 있다. 또는, 텍스트를 입력해서 편집기를 표시하면서 동시에 입력을 시작할 수도 있다. 편집기가 표시되기 직전에 onShowEditor 이벤트가 발생하는데, 이벤트 핸들러 내에서 명시적으로 false를 리턴하면 편집기가 표시되지 않고 셀 수정을 진행할 수 없다.
셀 편집을 완료하기 위해서는 Enter 키를 입력하거나, Tab 및 방향키, 혹은 마우스 클릭으로 입력 중인 셀을 벗어나면 된다. 셀 편집이 완료되면 onEditCommitted 이벤트가 발생한다. 편집이 정상적으로 완료되기 위해서는 Validation을 통과해야 한다. 아래 그리드에서 "year" 값이 2000 이상이 되도록 Validation을 설정했다.
기본적으로 SMART datagrid는 행 단위로 편집을 완료한다. 즉, 행 편집을 완료해야 입력된 값들을 데이터셋으로 전달한다. 행 편집을 완료하기 위해서는 방향키나 마우스 클릭으로 행 위치를 변경하거나, GridBase.commit 메소드를 직접 호출한다. 행 편집이 완료되면 GridBase.onEditRowCommitted 이벤트가 발생한다. 수정 행의 경우 EditOptions.updateByCell을 true로 지정하면 셀 단위로 행 편집을 완료할 수 있다.
편집기가 표시된 상태에서 Esc 키를 누르면 셀 편집이 취소되고, onEditCanceled 이벤트가 발생한다. 또, 편집 중인 행에서 편집기가 표시되지 않을 때 Esc 키를 누르면 행 편집이 취소된다. 행 편집이 완료되면 onEditRowCanceled 이벤트가 발생한다.
편집기의 최소 높이는 EditOptions.minEditorHeight 속성에서 22 픽셀로 설정되어 있다. 행 높이를 변경하고 테스트해 본다.
새로운 행을 삽입하고자 하는 위치에 포커스를 가져간 후 Insert 키를 입력하면 행 삽입이 시작된다. 셀 편집과 행 편집 완료 UI 및 이벤트는 행 수정과 동일하다. EditOptions.insertable이 true로 지정돼야 사용자가 행 삽입을 진행할 수 있다. 또, GridBase.insert를 호출해서 행 삽입을 시작 시킬 수도 있다.
마지막 행에 포커스가 있을 때, 아래 방향키를 입력하면 행 추가가 시작된다. appendable이 true로 지정돼야 사용자가 행 삽입을 진행할 수 있다. 또, GridBase.append를 직접 호출해서 행 추가를 시작 시킬 수도 있다.