syidaxgrid
홈 가격 내 정보

GRID FEATURE · PRO

서버 측 행 모델

서버가 그룹·피벗을 계산하고 펼친 그룹 경로별로 행을 공급하는 모델입니다. 이미 받은 로컬 행을 groupBy로 묶는 방식과 데이터 책임이 다릅니다.

Markdown 원문 Features

동작 원리와 선택 기준

serverSideDatasource의 getRows는 요청과 성공·실패 콜백을 별도 인수로 받습니다. Infinite datasource의 params.success 형태와 혼동하지 마세요.

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

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

예제 1. 그룹 요청 연결

서버는 요청에 포함된 그룹 경로·필터·정렬을 해석해 rows와 rowCount를 반환하도록 준비합니다.

javascript
grid.serverSideDatasource = { getRows: async (request, success, fail) => {
  try {
    const response = await fetch('/api/orders/groups', { method: 'POST',
      headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(request) });
    if (!response.ok) throw new Error('조회 실패');
    success(await response.json());
  } catch { fail(); }
}};

결과 확인: 처음에는 최상위 데이터, 그룹을 펼치면 해당 경로의 데이터가 공급됩니다. API의 ServerSideGetRowsParams와 Result를 서버 계약으로 함께 검토하세요.

예제 2. 일부 데이터만 로드된 선택

아직 내려받지 않은 주문까지 선택 대상으로 삼으려면 서버 선택 상태를 사용합니다.

javascript
console.log(await grid.getServerSideSelectionState());
console.log(await grid.getServerGroupSelectionState());

결과 확인: 표시된 행 ID 목록과 서버 전체 선택 규칙을 구분할 수 있습니다. 앱의 일괄 처리 API도 이 선택 규칙을 이해해야 합니다.

예제 3. 캐시와 처리 결과 조사

그룹을 펼쳐도 비어 보일 때 어떤 저장소가 로드되었는지 확인합니다.

javascript
console.log(await grid.getServerSideStoreState());
console.log(await grid.getServerPivotResultColumns());

결과 확인: 그룹 저장소 상태와 서버가 공급한 피벗 열을 따로 확인합니다. 서버 집계 열 이름이 응답 데이터 키와 맞는지도 검사하세요.

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

일반 클라이언트 applyTransaction으로 아직 내려받지 않은 서버 행을 모두 바꾸려 하지 마세요. 서버 변경과 서버 전용 트랜잭션·재조회 흐름을 사용합니다.

그룹 수와 리프 주문 수, 피벗 결과 열과 원본 열을 구분해서 응답하세요. 펼침 경로의 잘못된 rowCount는 로딩과 선택에도 영향을 줍니다.

함께 읽기