도형 렌더러
Shape 셀 렌더러는 그리드에 포함되어 있는 몇 개의 shape 아이콘 중 하나를 텍스트와 같이 표시합니다.
도형 렌더러의 표시 방법
- callback을 사용하여 shape명을 리턴하면 표시할 수 있습니다.
- shapeMap기능을 이용하여 아이콘을 표시할 수 있습니다. (아이콘맵에서 'EUR', 'USD'만 지정하여 2개의 이미지만 표시됨).
//css 설정
.rgsample-shape-blue .rg-shape-renderer-shape {
fill: blue;
}
//렌더러 설정
var columns = [
{
name: "KorName",
fieldName: "KorName",
width: "80",
renderer: {
type: "shape",
shape: "star"
},
header: {
text: "도형의 종류"
}
},
{
name: "Gender",
fieldName: "Gender",
width: "100",
renderer: {
type: "shape",
shapeMap: {
"남": "plus",
"여": "minus"
},
shapeHeight: 15,
shapeWidth: 15
},
header: {
text: "Shape Map"
}
},
{
name: "Month",
fieldName: "Month",
width: "70",
renderer: {
type: "shape",
shapeCallback: function (grid, cell) {
var value = cell.value;
var retValue;
if (value < 10) {
retValue = 'downarrow';
} else if (value < 20) {
retValue = 'itriangle';
} else if (value < 30) {
retValue = 'triangle';
} else {
retValue = 'uparrow';
}
return retValue;
},
shapeHeight: 15,
shapeWidth: 15
},
header: {
text: "Shape Callback"
},
styleName: "right-column"
},
... 생략 ...
];
gridView.setColumns(columns);
//동적 스타일 적용
gridView.columnByName("Gender").styleCallback = function (column, cell) {
if (cell.value == '남') return "rgsample-shape-blue";
};
gridView.columnByName("Month").styleCallback = function (column, cell) {
if (cell.value < 20) return "right-column rgsample-shape-blue";
};도형의 위치 지정
shapeLocation을 지정해서 아이콘이 표시될 위치를 지정할 수 있습니다. 지정할 수 있는 shapeLocation은 "left", "right", "top", "bottom", "leftedge", "rightedge", "topedge","bottomedge", "center" 입니다.
var columns = [
... 생략 ...
{
name: "shape1",
fieldName: "Gender",
width: "100",
renderer: {
type: "shape",
shapeCallback: function (grid, cell) {
var sex = cell.value == '남' ? 'plus' : 'minus';
return sex;
},
shapeLocation: "left", //<---
shapeHeight: 15,
shapeWidth: 15
},
header: {
text: "LEFT"
}
},
... 생략 ...
];
gridView.setColumns(columns);