상단 요약 표시(Header Summary)
그리드의 끝에 위치한 footer와 함께 각 컬럼의 합계 및 통계에 대한 값을 그리드 시작 위치에 표시 합니다. gridView.headerSummaries.visible = true로 설정하면 footer와 같은 기능을 가진 bar가 시작 위치에 표시되는 것을 확인 할 수 있습니다.
Column Header Summary
상단에 표시되는 요약을 설정하는 방법은 column.headerSummary 속성에 설정합니다. footer에 요약하는 설정 방법과 동일합니다.
function btnShowHeaderSummary() {
gridView.headerSummaries.visible = true;
}
function btnHideHeaderSummary() {
gridView.headerSummaries.visible = false;
}
var columns = [{
...
}, {
"name": "QuantityPerUnit",
"fieldName": "QuantityPerUnit",
"width": "100",
"header": {
"text": "Quantity / Unit"
},
"headerSummary": {
"text": "합계: "
}
}, {
"name": "Quantity",
"fieldName": "Quantity",
"width": "100",
"header": {
"text": "Quantity"
},
"headerSummary": {
"expression": "sum",
"numberFormat": "#,##0"
},
"footer": {
"expression": "sum",
"numberFormat": "#,##0"
}
}, {
...
}];
Column Header Summary의 동적 계산
상단에 표시되는 요약을 개발자가 계산하여 표시하고 싶은 경우는 column.headerSummary.valueCallback에 설정합니다.
(표시하고 싶은 값을 return 하여 처리합니다.)
var columns = [{
...
}, {
"name": "OrderID",
"fieldName": "OrderID",
"width": "80",
"header": {
"text": "Order ID"
},
"headerSummary": {
valueCallback: function (grid, column, childIndex, summary, value) {
//표시하고 싶은 값을 return
return grid.getSummary("OrderID", "count") / 2;
}
}
}, {
...
}];
Header Summary 여러 행 표시
상단 요약을 여러 행으로 표시할 수 있습니다.
- options
gridView.setHeaderSummaries({
visible:true,
items:[
{
//styleName: "blue-column", 개별 css 스타일 적용 필요시
height: 40
},
{
height: 40
}
]
});
- columns
var columns = [{
...
}, {
"name": "QuantityPerUnit",
"fieldName": "QuantityPerUnit",
"width": "100",
"header": {
"text": "Quantity / Unit"
},
"summaries": [{
"text": "합계 ==> ",
}, {
"text": "평균 ==> ",
}]
}, {
"name": "Quantity",
"fieldName": "Quantity",
"width": "100",
"header": {
"text": "Quantity"
},
"summaries": [{
"expression": "sum",
"numberFormat": "#,##0.00"
}, {
"expression": "avg",
"numberFormat": "#,##0.00"
}]
}, {
...
}];