컬럼 동적 스타일
컬럼 동적 스타일은 styleCallback이 지정된 컬럼에만 값에 따라 스타일이 적용됩니다.
※ styleCallback안에서 시간이 오래 걸리는 연산이나 setValue()등 값을 변경하는 행위를 하면 안됩니다.
자신의 컬럼 셀 값 참조
값이 "남"인 경우에 오렌지 색으로 표시.
var columns = [
...생략...
{
name: "Gender",
fieldName: "Gender",
width: "55",
header: {
text: "성별",
styleName: "orange-column"
},
styleCallback: function(grid, dataCell){
var ret = {}
if(dataCell.value == '남'){
ret.styleName = "orange-column"// ret.style = {background:"#ffff00"} 직접 스타일 적용 가능
}
return ret;
}
},
...생략...
];
gridView.setColumns(columns);다른 컬럼 셀 값을 참조
성별 컬럼의 값이 "남"이고 나이 컬럼의 값이 60~70인 경우 오렌지색, 편집불가 처리
var columns = [
...생략...
{
name: "Age",
fieldName: "Age",
width: "55",
header: {
text: "나이",
styleName: "orange-column"
},
styleCallback: function(grid, dataCell){
var ret = {}
var gender = grid.getValue(dataCell.index.itemIndex, "Gender")
if( (gender == '남') && (dataCell.value >= 50 && dataCell.value <= 60)){
ret.styleName = "orange-column";
ret.editable = false;
}
return ret;
}
},
...생략...
];
gridView.setColumns(columns);체크 렌더러에서 동적 적용
신규 행의 경우 체크가 가능하고 기존 행의 경우 체크가 불가능하게 처리.
var columns = [
...생략...
{
name: "Bool2",
fieldName: "Bool2",
width: "60",
editable: false,
renderer: {
type: "check",
trueValues: "Y,y,YES,yes",
falseValues: "N,n,NO,no"
},
header: {
text: "체크",
styleName: "orange-column"
},
styleCallback: function(grid, dataCell){
var ret = {};
ret.renderer = {
type: "check",
trueValues: "Y,y,YES,yes",
falseValues: "N,n,NO,no",
editable: dataCell.item.itemState == "appending" || dataCell.item.rowState == "created"
}
return ret;
}
},
...생략...
];
gridView.setColumns(columns);