# 셀 컨텍스트 메뉴

셀의 우클릭 메뉴는 현재 위치를 대상으로 복사·행 복사·내보내기 같은 작업을 제공합니다. 반복 사용 기능은 툴바나 키보드 접근도 함께 제공하는 것이 좋습니다.

Canonical: https://grid.syidax.com/ko/docs/features/context-menu/

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

## 동작 원리와 선택 기준

contextMenuItemsCallback을 설정하면 기본 메뉴에 추가되는 것이 아니라 기본 목록을 대체합니다. 기본 작업도 필요하면 반환 목록에 포함시키거나 별도의 버튼으로 제공합니다.

이 기능을 제품에서 사용하려면 Pro 패키지와 유효한 라이선스가 필요합니다. 설정 이름이 같더라도 Community에서 Pro 기능이 활성화되는 것은 아닙니다.

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

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

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

## 예제 1. 기본 우클릭 메뉴

옵션만 켜면 기본 항목을 사용합니다.

```javascript
grid.contextMenu = true;
```

결과 확인: 셀을 우클릭하여 대상 셀·행에 맞는 기본 작업을 확인합니다.

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

## 예제 2. 업무 전용 메뉴

메뉴 문구는 앱의 작업 목적을 설명하고 실제 작업은 action에서 처리합니다.

```javascript
grid.contextMenuItemsCallback = () => [{
  id: 'inspect-order', label: '주문 정보 확인',
  action: context => console.log(context),
}];
```

결과 확인: 기본 항목 대신 한 개의 업무 메뉴가 보입니다. context의 행과 열을 읽고 앱 상세 화면으로 연결할 수 있습니다.

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

## 예제 3. 메뉴 구성 사전 확인

첫 표시 행의 제품 셀에 적용될 메뉴를 읽습니다.

```javascript
console.log(await grid.getContextMenuItems({ rowIndex: 0, field: 'product' }));
```

결과 확인: 조건에 따라 disabled 처리한 항목과 실제 표시 항목을 확인합니다. 메뉴를 숨기는 것만으로 서버 권한 검사를 대신하지 않습니다.

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

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

사용자 정의 메뉴의 action에서 화면 인덱스를 장기 보관하지 마세요. 작업을 시작할 때 안정적인 행 ID를 읽습니다.

우클릭을 사용할 수 없는 환경에서도 핵심 작업이 가능하도록 접근 경로를 제공합니다.

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

## 이 기능에 사용하는 API

- [contextMenu](https://grid.syidax.com/ko/docs/options/contextMenu.md) — 셀 우클릭 메뉴를 표시합니다. 기본 복사·행 복사·CSV 작업을 사용하거나 콜백으로 목록을 대체할 수 있습니다.
- [contextMenuItemsCallback](https://grid.syidax.com/ko/docs/options/contextMenuItemsCallback.md) — 셀 우클릭 메뉴 목록을 반환합니다. 설정하면 기본 메뉴에 추가되는 것이 아니라 전체 기본 목록을 대체합니다.
- [getContextMenuItems](https://grid.syidax.com/ko/docs/methods/getContextMenuItems.md) — 특정 표시 행·필드에 적용할 우클릭 메뉴 목록을 계산합니다.
- [contextMenuItemClicked](https://grid.syidax.com/ko/docs/events/contextMenuItemClicked.md) — 셀 우클릭 메뉴 항목을 실행했을 때 발생합니다. 항목 ID와 대상 셀 위치를 읽습니다.

<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/context-menu) — 직접 체험 가능한 범위는 해당 가이드에 안내되어 있습니다.