[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

셀 컨텍스트 설정

리포트 시트에서 컨텍스트는 매우 중요한 개념이며, 보고서 레이아웃에 영향을 미칩니다. 기본적으로 모든 컨텍스트에서 하위 셀의 데이터를 필터링하고, 모든 하위 셀은 컨텍스트와 함께 반복되기 때문입니다.

템플릿 셀에서 컨텍스트를 설정하려면 Spread.Report.TemplateSheet 클래스의 setTemplateCell 메서드에서 context 속성을 사용하면 됩니다.

하나의 셀에 대해 설정할 수 있는 컨텍스트는 다음 두 가지입니다:

  • 수직 컨텍스트(Vertical context): 셀의 왼쪽에 있는 수직 spill 방향의 셀을 수직 컨텍스트로 사용합니다.

  • 수평 컨텍스트(Horizontal context): 셀의 위쪽에 있는 수평 spill 방향의 셀을 수평 컨텍스트로 사용합니다.

참고:

셀이 수직 및 수평 컨텍스트를 모두 가지고 있다면, 이는 교차 셀이 되며 교차 보고서(cross-report)를 생성할 때 사용됩니다.

템플릿 셀은 설정된 컨텍스트 값에 따라 다르게 동작할 수 있습니다.

컨텍스트

값

결과

Horizontal

None

셀에 수평 컨텍스트가 없음을 의미합니다.

셀 이름

해당 셀을 수평 컨텍스트로 사용합니다.

기본값/Undefined

위쪽의 수평 확장 셀을 수평 컨텍스트로 사용합니다.

Vertical

None

셀에 수직 컨텍스트가 없음을 의미합니다.

셀 이름

해당 셀을 수직 컨텍스트로 사용합니다.

기본/Undefined

왼쪽의 수직 확장 셀을 수직 컨텍스트로 사용합니다.

참고: 셀의 수직 및 수평 컨텍스트 값이 기본값 또는 미정의로 설정되어 있고, 왼쪽(수직) 또는 위쪽(수평)에 spill 셀이 없는 경우, 해당 셀은 계층 구조의 루트 노드를 컨텍스트로 사용합니다.

템플릿 시트에서 컨텍스트 설정 방법:

  1. 데이터 매니저에서 테이블 소스를 정의합니다.

  2. 템플릿 셀에 type과 binding 옵션을 설정합니다.

  3. 템플릿 셀에 context 속성을 설정합니다.

다음은 셀에 수직 및 수평 컨텍스트를 설정하는 코드 샘플입니다:

// 수직 컨텍스트를 셀로 설정
templateSheet.setTemplateCell(1, 1, {
    type: 'Group',
    binding: `Orders[customerId]`,
    context: {
        vertical: 'A1',
    },
});
// 수직 컨텍스트를 None으로 설정
templateSheet.setTemplateCell(1, 1, {
    type: 'Group',
    binding: `Orders[customerId]`,
    context: {
        vertical: 'None',
    },
});

// 수평 컨텍스트를 셀로 설정
templateSheet.setTemplateCell(1, 1, {
    type: 'Group',
    binding: `Orders[customerId]`,
    spillDirection: 'Horizontal',
    context: {
        horizontal: 'A1',
    },
});
// 수평 컨텍스트를 None으로 설정
templateSheet.setTemplateCell(1, 1, {
    type: 'Group',
    binding: `Orders[customerId]`,
    spillDirection: 'Horizontal',
    context: {
        horizontal: 'None',
    },
});

// 셀에 수직 및 수평 컨텍스트 모두 설정
templateSheet.setTemplateCell(1, 1, {
    type: 'Summary',
    aggregate: 'Sum',
    binding: `Sales[Sales]`,
    context: {
        vertical: 'A2',
        horizontal: 'B1',
    },
});

특정 예제들과 함께 셀 컨텍스트 설정하는 방법에 대해 알아보겠습니다.

예제 1: 수직 컨텍스트를 None으로 설정

아래 예제에서 셀 A2와 B2는 모두 Group 셀입니다. A2는 CustomerId, B2는 EmployeeId 필드에 바인딩되어 있습니다.

B2의 수직 컨텍스트는 'None'으로 설정되어 있으므로, A2와 B2는 서로 영향을 주지 않고 각각 수직으로 데이터를 spill합니다.

templateSheet.setTemplateCell(1, 0, {  // cell A2
     type: 'Group',
     binding: 'Orders[CustomerId]'
});
templateSheet.setTemplateCell(1, 1, {  // cell B2
     type: 'Group',
     binding: 'Orders[EmployeeId]',
     context: {
         vertical: 'None'
     }
})
reportSheet.refresh();

위 코드의 출력 결과는 아래와 같습니다.

image

예제 2: 수직 컨텍스트를 기본값(Default)으로 설정

A2와 C2가 Group 셀이며, 각각 CustomerId와 EmployeeId에 바인딩되어 있습니다. C2는 수직 컨텍스트를 설정하지 않았기 때문에, 왼쪽에 위치한 A2 셀을 수직 컨텍스트로 사용하게 됩니다.

templateSheet.setTemplateCell(1, 0, {  // cell A2
     type: 'Group',
     binding: 'Orders[CustomerId]'
});
templateSheet.setTemplateCell(1, 2, {  // cell C2
     type: 'Group',
     binding: 'Orders[EmployeeId]'
})
reportSheet.refresh();

위 코드의 출력 결과는 아래와 같습니다.

image

예제 3: 수직 컨텍스트를 셀 이름으로 설정

A2는 CustomerId, B3는 EmployeeId에 바인딩되어 있으며, B3의 수직 컨텍스트는 A2로 지정되어 있습니다.

따라서 B3 셀은 A2를 수직 컨텍스트로 따라가며 데이터를 spill합니다.

templateSheet.setTemplateCell(1, 0, {  // A2
          type: 'Group',
          binding: 'Orders[CustomerId]'
});
templateSheet.setTemplateCell(2, 1, {  // B3
          type: 'Group',
          binding: 'Orders[employeeId]',
          context: {
              vertical: 'A2',
          }
})
reportSheet.refresh();

위 코드의 출력 결과는 아래와 같습니다.

image