SYIDAX / DATA GRID

셀 컨텍스트 메뉴 PRO

우클릭 또는 키보드로 셀 작업 메뉴를 엽니다.

시작하기
셀 컨텍스트 메뉴샘플 주문 데이터
120 rows
Grid를 불러오는 중입니다…

옵션

아래 항목을 바꾸면 Grid와 코드에 바로 반영됩니다.

최근 결과

제품명이나 수량 셀에서 마우스 오른쪽 버튼을 누르세요. 셀에 포커스를 두고 Shift+F10을 사용할 수도 있습니다.

코드 보기
현재 미리보기

사용 가이드

#

셀 위에서 우클릭해 그 셀이나 행에 관련된 작업을 빠르게 선택할 때 사용합니다.

직접 해보기

  1. 셀 메뉴 열기

    제품명이나 수량 셀에서 마우스 오른쪽 버튼을 누르세요. 셀에 포커스를 두고 Shift+F10을 사용할 수도 있습니다.

  2. 현재 대상 확인

    메뉴를 연 셀과 행이 원하는 주문인지 확인한 뒤 필요한 메뉴 항목을 선택하세요.

  3. 메뉴 닫기와 재열기

    Escape로 닫고 다른 셀에서 다시 여세요. 앱에서는 대상 행에 맞는 업무 메뉴를 추가할 수 있습니다.

확인할 결과

Grid의 셀 컨텍스트 메뉴가 열리고 선택한 항목을 처리할 수 있습니다.

현재 예제의 메뉴 항목과 앱이 추가한 업무 항목은 다를 수 있습니다. 승인·삭제 같은 업무 처리는 메뉴 표시만으로 구현되지 않습니다.

알아두면 쉬운 용어

컨텍스트 메뉴
현재 선택한 대상과 관련된 작업 목록입니다.
contextMenuItemClicked
사용자가 선택한 메뉴 항목을 알려 주는 이벤트입니다.

제품에 이 기능을 적용하려면 Pro 런타임과 유효한 라이선스가 필요합니다.

API reference

#

나머지 속성2
Attribute / Property타입 / 기본값설명
PRO
contextMenu
boolean기본값 falserender a right-click context menu popup. The default menu is copy-cell / copy-row / export-csv; a host `contextMenuItemsCallback` customizes it.
PRO
contextMenuItemsCallback
( ctx: ContextMenuContext<GridRow>, ) => ContextMenuItem<GridRow>[]기본값 undefinedhost callback returning the menu items for a right-click. When set it REPLACES the default items (the host can call the built-in ids or supply items with a custom `action`).
이벤트1
이벤트detail 타입설명
PRO
{ id: string; rowIndex: number; field?: string }fires when a context-menu item is chosen.
메서드1
메서드 / 인수반환 타입설명
PRO
target: { rowIndex: number; field?: string }
Promise<ContextMenuItem[]>Build the default context-menu items for a cell.