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

셀 상태 변경

StarCell 상태(Cell States)는 사용자가 수행하는 다양한 동작에 따라 셀이 어떻게 반응할지를 나타냅니다. 리포트 시트(ReportSheet)에서는 리포트가 생성됨에 따라 해당 셀 상태의 범위가 변경됩니다.

템플릿 시트(TemplateSheet)에서 다양한 셀 상태를 설정할 수 있지만, Preview 렌더 모드에서만 그 효과가 더 명확하게 나타납니다.

참고:

  • 템플릿 시트에서 cellStates가 설정된 셀이 확장되지 않은 셀일 경우, 리포트 시트에서 해당 cellStates의 범위 크기는 변하지 않지만, 확장 기준이 되는 좌상단 셀에 따라 위치 오프셋(offset)이 발생할 수 있습니다.

  • 템플릿 시트에서 cellStates가 설정된 셀이 확장된 셀일 경우, 리포트 시트에서 해당 cellStates의 범위는 템플릿 셀의 확장 방식에 따라 크기가 변경되며, 이 경우에도 위치 오프셋이 발생할 수 있습니다.

다음 코드는 사용자가 셀 위에 마우스를 올리거나 셀을 선택했을 때 다양한 스타일을 적용하는 방법을 보여줍니다. 이 예시에서는 템플릿 시트에 설정한 셀 상태가 현재 셀 확장 방식에 맞춰 확장되므로, 하나의 행과 두 개의 열에만 스타일을 설정했더라도, 실제 리포트 시트에서는 모든 행으로 상태가 확장됩니다.

// Cell States 추가
const cfs = templateSheet.conditionalFormats;

// 마우스 오버 시 배경색을 "연한 파란색(light blue)"으로 설정
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.hover, new GC.Spread.Sheets.Style('lightblue'), [new GC.Spread.Sheets.Range(3, 0, 1, 3)]);

// 셀 선택 시 배경색을 "연한 회색(light grey)"으로 설정
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.selected, new GC.Spread.Sheets.Style('lightgrey'), [new GC.Spread.Sheets.Range(3, 0, 1, 3)]);

위 코드의 출력 결과는 다음과 같습니다:


image