CellStyleCallback

동적 셀 스타일 변경을 위한 콜백

타입

export type CellStyleCallback = (grid: GridBase, model: GridCell) => string | ColumnStyleObject | ColumnSummaryStyleObject | undefined;

상세 설명

ColumnStyleObject 를 반환 할 때는 GridBase.setCellStyleCallback(), ValueColumn.styleCallback 에서 사용한다.

ColumnSummaryStyleObject 를 반환 할 때는 GridFooter.cellStyleCallback, HeaderSummary.cellStyleCallback 에서 사용한다.

문자열 반환 시 스타일 명으로 지정

[매개변수 목록]

grid - GridBase 컨트롤

model - 그리드의 셀

[반환값] - 동적 스타일을 부여하기 위한 오브젝트 혹은 스타일 클래스 명

예제 코드

const f1 = function(grid, model) {
     if (model.value > 5) return "rg-data-cell bold-cell";
     if (model.value < 0 && model.value > -10) {
         return {
             styleName: 'custom-negative-cell',
             renderer: {
                 type: 'bar',
                 absoluteValue: true
             }
         }
     }
}

const f2 = function(grid, model) {
     if (model.value > 10) {
         return {
             styleName: 'custom-summary-cell'
         }
     }
}

// 전체 데이터 셀에 적용
gridView.setCellStyleCallback(f1);

// 컬럼 별 적용
let column = gridView.columnByName('Price');
column.styleCallback = f1;

// 푸터 적용
gridView.footer.cellStyleCallback = f2;

// header summary 적용
gridView.headerSummary.cellStyleCallback = f2;