# 셀과 행 편집

셀 편집은 하나의 값을 즉시 수정하고 전체 행 편집은 여러 필드를 하나의 행 작업으로 확정합니다. editor는 입력 UI를, editable은 쓰기 가능 여부를 지정합니다.

Canonical: https://grid.syidax.com/ko/docs/features/cell-editing/

<a id="understand"></a>

## 동작 원리와 선택 기준

숫자·날짜·목록·체크박스 편집기마다 저장값의 타입을 정하세요. 파서는 입력을 값으로 바꾸고 검증은 허용 범위를 검사합니다.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

- [설치와 연결 · 공통 예제 데이터](https://grid.syidax.com/ko/docs/guides/getting-started.md)

<a id="example-1"></a>

## 예제 1. 숫자와 기본 Select 편집

수량은 음수가 아닌 숫자, 상태는 정해진 목록으로 입력합니다.

```javascript
grid.columnDefs = [
  { field: 'quantity', editable: true, editor: 'number', min: 0, step: 1 },
  { field: 'status', editable: true, editor: 'select', options: [
    { value: 'open', label: '진행 중' }, { value: 'done', label: '완료' }
  ] }
];
```

결과 확인: 화면 라벨과 저장값을 구분합니다. 완료를 선택하면 원본에는 done이 저장되는 구성입니다.

<a id="example-2"></a>

## 예제 2. 행 단위 확정

표시 중인 주문의 편집을 시작한 뒤 수량을 임시로 바꾸고 확정합니다.

```javascript
const started = await grid.startRowEdit('ORD-0001');
if (started) {
  await grid.stageRowEditCell('quantity', 25);
  console.log(await grid.stopRowEdit('commit'));
}
```

결과 확인: 행 편집 시작이 거절되면 다음 작업을 진행하지 않습니다. 확정 보고서를 통해 실제 적용 결과를 읽습니다.

<a id="example-3"></a>

## 예제 3. 편집 취소와 결과 구독

사용자가 취소하면 미확정 값을 버리고 실제 변경 결과만 저장 처리에 사용합니다.

```javascript
await grid.stopRowEdit('cancel');
grid.addEventListener('cellValueChanged', event => console.log(event.detail));
grid.addEventListener('rowValueChanged', event => console.log(event.detail));
```

결과 확인: 셀별 변경과 행 전체 확정 이벤트를 중복 서버 저장으로 처리하지 않도록 앱에서 역할을 정합니다.

<a id="pitfalls"></a>

## 조합할 때와 문제를 해결할 때

표시된 그룹 제목·상세 행·미로드 자리표시자는 일반 데이터 행 편집과 다릅니다. 안정적인 ID와 편집 가능한 열이 필요합니다.

검증 실패 시 편집 세션이 유지될 수 있습니다. 확정 버튼을 눌렀다는 사실만으로 성공 메시지를 표시하지 마세요.

<a id="related-api"></a>

## 이 기능에 사용하는 API

- [editType](https://grid.syidax.com/ko/docs/options/editType.md) — 한 셀씩 편집할지 한 행의 여러 셀을 묶어 편집할지 선택합니다.
- [cellEditor](https://grid.syidax.com/ko/docs/columns/cellEditor.md) — 사용자 정의 셀 편집기를 선언합니다. 기본 편집기 종류는 editor로 선택합니다.
- [editable](https://grid.syidax.com/ko/docs/columns/editable.md) — 이 열의 편집을 허용합니다. 행별 권한·검증 정책은 추가로 적용됩니다.
- [editor](https://grid.syidax.com/ko/docs/columns/editor.md) — 텍스트·숫자·날짜·선택·체크박스 등 기본 편집기 종류를 지정합니다.
- [valueParser](https://grid.syidax.com/ko/docs/columns/valueParser.md) — 입력 문자열을 저장할 타입으로 변환합니다. 숫자·날짜 등의 정규화에 사용합니다.
- [valueSetter](https://grid.syidax.com/ko/docs/columns/valueSetter.md) — 변환된 값을 원본 행에 반영하는 사용자 저장 로직입니다. 변경 여부의 반환 계약을 확인하세요.
- [options](https://grid.syidax.com/ko/docs/columns/options.md) — 선택형 편집기의 값과 표시 라벨 목록입니다. 일부 선택지를 disabled로 막을 수 있습니다.
- [min](https://grid.syidax.com/ko/docs/columns/min.md) — 숫자·날짜 편집에서 허용하는 최솟값입니다.
- [max](https://grid.syidax.com/ko/docs/columns/max.md) — 숫자·날짜 편집에서 허용하는 최댓값입니다.
- [step](https://grid.syidax.com/ko/docs/columns/step.md) — 숫자 입력의 증가·감소 단위입니다.
- [decimals](https://grid.syidax.com/ko/docs/columns/decimals.md) — 숫자 편집의 소수 자릿수를 정합니다.
- [nullable](https://grid.syidax.com/ko/docs/columns/nullable.md) — 편집 값으로 null을 허용할지 지정합니다.
- [allowEmpty](https://grid.syidax.com/ko/docs/columns/allowEmpty.md) — 편집 중 빈 값을 허용할지 지정합니다. 필수 입력 검증과 함께 확인합니다.
- [storeAs](https://grid.syidax.com/ko/docs/columns/storeAs.md) — 날짜 편집 결과를 Date 객체 또는 ISO 문자열 중 어떤 형태로 저장할지 정합니다.
- [rows](https://grid.syidax.com/ko/docs/columns/rows.md) — 여러 줄 텍스트 편집기의 기본 표시 줄 수입니다.
- [maxRows](https://grid.syidax.com/ko/docs/columns/maxRows.md) — 여러 줄 편집기가 늘어날 수 있는 최대 줄 수입니다.
- [cols](https://grid.syidax.com/ko/docs/columns/cols.md) — 여러 줄 텍스트 편집기의 표시 폭 기준입니다.
- [maxLength](https://grid.syidax.com/ko/docs/columns/maxLength.md) — 텍스트 편집에 허용할 최대 길이입니다.
- [startRowEdit](https://grid.syidax.com/ko/docs/methods/startRowEdit.md) — 지정한 행 ID의 전체 행 편집을 시작합니다.
- [stopRowEdit](https://grid.syidax.com/ko/docs/methods/stopRowEdit.md) — 현재 행 편집을 확정하거나 취소하고 처리 보고서를 반환합니다.
- [stageRowEditCell](https://grid.syidax.com/ko/docs/methods/stageRowEditCell.md) — 현재 편집 중인 행의 열에 대기 값을 설정합니다.
- [getActiveEditTransaction](https://grid.syidax.com/ko/docs/methods/getActiveEditTransaction.md) — 현재 진행 중인 셀 편집 트랜잭션을 읽습니다. 편집 중이 아니면 null입니다.
- [commitActiveEdit](https://grid.syidax.com/ko/docs/methods/commitActiveEdit.md) — 현재 셀 편집을 확정하고 성공 여부를 반환합니다.
- [cancelActiveEdit](https://grid.syidax.com/ko/docs/methods/cancelActiveEdit.md) — 현재 셀 편집을 취소하고 실행 여부를 반환합니다.
- [getCellEditorInstance](https://grid.syidax.com/ko/docs/methods/getCellEditorInstance.md) — 현재 마운트된 셀 편집기 인스턴스와 문맥을 읽습니다. 편집기가 없으면 null입니다.
- [cellEditingRequested](https://grid.syidax.com/ko/docs/events/cellEditingRequested.md) — 셀 편집을 요청했을 때 발생합니다. 이후 취소·확정·값 변경 이벤트와 흐름을 구분합니다.
- [cellEditingCancelled](https://grid.syidax.com/ko/docs/events/cellEditingCancelled.md) — 셀 편집이 취소되었을 때 발생합니다. 서버 저장 성공으로 처리하지 마세요.
- [cellEditingCommitted](https://grid.syidax.com/ko/docs/events/cellEditingCommitted.md) — 셀 편집이 확정되었을 때 발생합니다. 실제 값 변경은 cellValueChanged도 함께 확인합니다.
- [rowValueChanged](https://grid.syidax.com/ko/docs/events/rowValueChanged.md) — 전체 행 편집의 값 변경 결과를 알립니다. 한 행에 대한 저장 단위를 구성할 때 사용합니다.
- [rowEditStart](https://grid.syidax.com/ko/docs/events/rowEditStart.md) — 전체 행 편집이 시작되었을 때 발생합니다.
- [rowEditStop](https://grid.syidax.com/ko/docs/events/rowEditStop.md) — 전체 행 편집이 끝났을 때 발생합니다. 확정과 취소를 구분합니다.

<a id="next"></a>

## 함께 읽기

- [행·열·ID의 관계](https://grid.syidax.com/ko/docs/guides/concepts.md)
- [결과와 이벤트 연결](https://grid.syidax.com/ko/docs/guides/data-event-access.md)
- [Features에서 살펴보기](https://grid.syidax.com/grid/cell-editing) — 직접 체험 가능한 범위는 해당 가이드에 안내되어 있습니다.