syidaxgrid
홈 가격 내 정보
SYIDAX / DATA GRID

행 단위 선택

체크박스와 행 선택으로 일괄 작업 대상을 지정합니다.

시작하기
행 단위 선택샘플 주문 데이터
120 rows
Grid를 불러오는 중입니다…

옵션

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

최근 결과

각 행 왼쪽 체크박스로 ORD-0001과 ORD-0003을 선택하세요. 선택한 행은 배경으로도 구분됩니다.

코드 보기
현재 미리보기

사용 가이드

#

여러 주문을 한꺼번에 처리할 대상을 고를 때 사용합니다. 체크한 행의 ID를 모아 앱의 일괄 작업에 전달할 수 있습니다.

직접 해보기

  1. 주문 두 개 선택

    각 행 왼쪽 체크박스로 ORD-0001과 ORD-0003을 선택하세요. 선택한 행은 배경으로도 구분됩니다.

  2. 선택 결과 확인

    코드 보기 바로 위의 최근 결과에서 selectionChanged를 보세요. 다른 행을 선택하면 새 선택 결과로 바뀝니다.

  3. 일부 선택 해제

    체크박스를 다시 눌러 한 행을 해제하세요. 헤더 체크박스는 현재 표시 범위의 선택에 사용할 수 있습니다.

확인할 결과

앱에서 선택된 주문 ID를 읽어 내보내기나 일괄 처리 대상을 정할 수 있습니다.

행을 선택하는 것만으로 삭제·승인·서버 저장이 실행되지는 않습니다. 업무 처리는 선택 결과를 받은 앱에서 연결합니다.

알아두면 쉬운 용어

selectionChanged
행 선택이 바뀌었을 때 보내는 이벤트입니다.
getSelectedRowIds
현재 선택한 행의 ID 목록을 읽는 메서드입니다.

핵심 API 예시

등록된 Grid 요소를 grid로 참조하는 앱 코드입니다.

await grid.selectRows(['ORD-0001','ORD-0003']);
console.log(await grid.getSelectedRowIds());

API reference

#

주요 속성

Attribute / Property타입 / 기본값설명
rowSelection		RowSelectionMode기본값 'none'Row selection mode.
getRowId		(row: Readonly<GridData>) => GridRowId기본값 undefinedOptional domain-stable row id extractor for selection persistence.
selectionCheckbox		boolean기본값 falseRender a selection checkbox column when multi-row selection is active.
나머지 속성2
Attribute / Property타입 / 기본값설명
showSelectionCheckbox		boolean기본값 false이름을 선택해 타입 계약을 확인하세요.
shiftClickAdditive		boolean기본값 falseAdd shift-click ranges to the existing multi-selection instead of replacing it.
이벤트1
이벤트detail 타입설명
GridSelectionChangedDetailFires when the row selection set changes.
메서드2
메서드 / 인수반환 타입설명
ids: Array<string | number>		Promise<void>Replace the current row selection.
Promise<ReadonlyArray<string | number>>Read the current selected row ids.
GridTab 이동 Enter 열기