syidaxgrid
홈 가격 내 정보

GRID FEATURE · PRO

값 채우기

채우기 핸들은 기준 범위의 값을 복사하거나 규칙을 확장합니다. 손잡이를 드래그하는 UI와 fillRange API는 편집 가능 여부·검증·이력을 함께 고려합니다.

Markdown 원문 Features

동작 원리와 선택 기준

한 숫자를 아래로 복사하는 경우와 두 숫자의 차이를 따라 연속값을 만드는 경우를 구분해서 사용자에게 보여 주세요.

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

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

예제 1. 사용자 채우기 활성화

범위 선택과 편집 가능한 수량 열에 채우기 핸들을 제공합니다.

javascript
grid.rangeSelection = true;
grid.enableFillHandle = true;
grid.columnDefs = grid.columnDefs.map(col => col.field === 'quantity' ? { ...col, editable: true } : col);

결과 확인: 선택 가장자리 손잡이를 드래그해 값을 채울 수 있습니다. 숫자·문자열과 fillHandleMode에 따라 복사·연속값 결과가 달라집니다.

예제 2. 수량 반복 입력

수량 5인 셀 하나를 기준으로 아래 세 셀까지 채웁니다. 같은 값을 반복하는 동작인지 숫자 규칙 확장인지 결과를 먼저 확인합니다.

결과 확인: 각 대상 수량과 합계가 함께 바뀌어야 합니다. 잘못 채웠다면 실행 취소로 되돌립니다.

예제 3. 금지된 셀이 섞인 범위

편집 불가 열 또는 검증을 통과하지 못하는 대상이 섞일 때 처리 결과를 확인합니다.

javascript
grid.addEventListener('fillStart', event => console.log('시작', event.detail));
grid.addEventListener('fillEnd', event => console.log('종료', event.detail));

결과 확인: 시작 이벤트만으로 성공이라 판단하지 않습니다. 종료 보고서와 실제 변경 셀을 보고 취소·제외·거절을 구분합니다.

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

그룹 제목·상세 패널·미로드 자리표시자는 안정적인 데이터 행이 아니므로 쓰기 대상이 될 수 없습니다. 전체 범위가 그대로 쓰였다고 가정하지 마세요.

자동 채우기가 서버 저장까지 처리하지는 않습니다. 하나의 채우기로 많은 변경 이벤트가 발생할 수 있으므로 저장 요청을 묶는 전략을 정합니다.

함께 읽기