syidaxgrid
홈 가격 내 정보

GRID FEATURE

행 드래그

관리형 행 드래그는 사용자가 정한 순서를 Grid 데이터 순서에 반영합니다. 정렬 조건으로 정해진 표시 순서와 임의 순서 재배치는 충돌할 수 있습니다.

Markdown 원문 Features

동작 원리와 선택 기준

드래그 시작 전 데이터 모델과 그룹·피벗 상태의 허용 범위를 확인하세요. 다른 Grid로 이동하려면 드롭 대상 등록과 전송 결과 처리가 추가로 필요합니다.

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

예제 1. 드래그 손잡이 제공

제품 열에서 행을 잡을 수 있도록 설정합니다.

javascript
grid.rowDragManaged = true;
grid.columnDefs = grid.columnDefs.map(col => ({ ...col, rowDrag: col.field === 'product' }));
await grid.setSortModel([]);
await grid.setFilterModel(null);

결과 확인: 정렬·필터가 없는 목록에서 수동 순서를 시험할 수 있습니다. 헤더 이동 손잡이와 행 이동 손잡이는 다릅니다.

예제 2. 이동 결과를 저장 흐름에 연결

앱은 rowMoved 이벤트를 받아 변경된 순서를 서버에 보관하는 업무 처리를 구현합니다.

javascript
grid.addEventListener('rowMoved', event => console.log(event.detail));
console.log(await grid.getDragSafetyReport());

결과 확인: 이동 전 허용 상태와 이동 후 결과를 각각 확인합니다. 화면에서 성공한 이동이 서버에 자동 저장되지는 않습니다.

예제 3. 두 표 사이에 주문 분배

미배정 표와 담당자 표 사이에 이동하려면 대상의 드롭 영역을 등록하고 rowsTransferred 보고서를 확인합니다.

javascript
console.log(await grid.getDropZones());
grid.addEventListener('rowsTransferred', event => console.log(event.detail));

결과 확인: 복사와 이동 중 어떤 동작을 허용할지 앱이 정합니다. 양쪽에 동일 ID가 이미 있을 때 처리도 확인하세요.

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

필터로 일부 행만 보이는 상태에서 드래그한 결과를 전체 원본 순서로 오해하지 마세요. getDragSafetyReport와 rowDragCancel 사유로 거절 원인을 읽습니다.

계층 구조의 부모를 바꾸는 작업은 평면 순서 변경보다 많은 조건이 필요합니다. treeReparented와 reparentRows의 결과를 확인하고 순환 관계를 만들지 않습니다.

함께 읽기