상단 요약 표시(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"
  }]
}, {
    ...
}];