셀 범위 선택 · Syidax Grid Docs

동작 원리와 선택 기준

범위 API의 행·열 인덱스는 표시 좌표입니다. 정렬이나 열 숨김 후 좌표가 같은 데이터를 가리킨다고 가정하지 마세요.

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

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

현재 보이는 첫 두 행과 첫 두 열을 선택하는 예입니다.

javascript

grid.rangeSelection = true;
console.log(await grid.setCanonicalRanges([{ anchorRow: 0, anchorCol: 0, focusRow: 1, focusCol: 1 }]));

결과 확인: 지정한 직사각형에 선택 표시가 생깁니다. 실행할 업무에 맞는 열이 실제 그 위치에 있는지 확인하세요.

사용자가 드래그한 뒤 정규화된 범위와 기존 범위를 비교해 읽습니다.

javascript

console.log(await grid.getCanonicalRanges());
console.log(await grid.getCellRanges());

결과 확인: 앵커와 끝점의 방향이 달라도 범위 의미를 해석할 수 있습니다. 사용하는 API의 좌표와 ID 계약을 따르세요.

선택 범위가 더 이상 유효하지 않은 데이터셋으로 전환할 때 지웁니다.

javascript

await grid.clearCellRanges();
grid.addEventListener('rangeSelectionChanged', event => console.log(event.detail));

결과 확인: 이전 주문의 범위가 새 데이터의 편집 대상으로 남지 않습니다. 행 체크박스 선택은 별도의 상태입니다.

병합 셀·그룹 행·고정 행이 포함된 범위는 일반 데이터 셀과 적용 규칙이 다를 수 있습니다. 결과 보고서에서 제외된 대상을 확인하세요.

상태 저장 후 데이터 순서가 바뀌면 표시 좌표만 저장한 범위는 잘못된 대상을 가리킬 수 있습니다. 복원 보고서를 확인합니다.