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;