상단 요약 표시(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에 설정합니다. OrderID컬럼은 데이터행수/2, Quantity컬럼은 체크한 행들의 합계를 표시합니다. (표시하고 싶은 값을 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;
    }
  }
}, {
    ...
}, {
  "name": "Quantity",
  "fieldName": "Quantity",
  "width": "100",
  "header": {
      "text": "Quantity",
      "styleName": "orange-column"
  },
  "headerSummary": {
    "numberFormat": "#,##0.#",
    valueCallback: function (grid, column, childIndex, summary, value) {
      var prod = grid.getDataSource();
      var checkedRows = grid.getCheckedRows();
      var sum = 0;
 
      checkedRows.forEach(function(e) {
        sum += prod.getValue(e, column.fieldName);
      });
 
      return sum;
    }
  },
  "footer": {
      "expression": "sum",
      "numberFormat": "#,##0"
  }
}, {
    ...
}];

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"
  }]
}, {
    ...
}];

여러 Header Summary 행의 개별 행 colSpan

여러 행으로 구성된 Header Summary를 각 행마다 colSpan 할 수 있습니다. 이 경우 레이아웃을 사용하여야 하며 colSpan된 셀의 text는 첫번째 컬럼(Country 컬럼)에 설정합니다.

gridView.setHeaderSummaries({
  visible:true,
  items:[
    {
      //styleName: "blue-column",   개별 css 스타일 적용 필요시
      height: 40
    }, 
    {
      height: 40
    }
  ]
});

columns

var columns = [{
  "name": "Country",
  "fieldName": "Country",
  "width": "100",
  "header": {
    "text": "Country"
  }
  "summaries": [{
    "text": "합계 ==>  ",
  }, {
    "text": "평균 ==>  ",
  }]
}, {
  ...
}, {
  "name": "Quantity",
  "fieldName": "Quantity",
  "width": "100",
  "header": {
      "text": "Quantity"
  },
  "summaries": [{
    "expression": "sum",
    "numberFormat": "#,##0.00"
  }, {
    "expression": "avg",
    "numberFormat": "#,##0.00"
  }]
}, {
    ...
}];

layout

방법 1.

gridView.layoutByColumn("Country").summaryUserSpans = [{ colspan: 3 }, { colspan: 3}];

방법 2.

var layout1 = [
  {
    column: "Country",
    summaryUserSpans: [{ colspan: 3 }, { colspan: 3}]
  },
  "CompanyName",
  "QuantityPerUnit", 
  "Quantity",
  "OrderID",
  "CustomerID",
  "EmployeeID",
  "OrderDate",
  "Phone",
  "ProductName"
];
 
gridView.setColumnLayout(layout1);

여러 Header Summary 행의 rowSpan, colSpan

여러 행으로 구성된 Header Summary를 rowSpan, colSpan 할 수 있습니다. 이 경우 레이아웃을 사용하여야 하며 span된 셀의 text는 첫번째 컬럼(Country 컬럼)에 설정합니다.

gridView.setHeaderSummaries({
  visible:true,
  items:[
    {
      //styleName: "blue-column",   개별 css 스타일 적용 필요시
      height: 40
    }, 
    {
      height: 40
    }
  ]
});

columns

var columns = [{
  "name": "Country",
  "fieldName": "Country",
  "width": "100",
  "header": {
    "text": "Country"
  },
  "summaries": [{
    "text": "합계/평균 ==>"
  }]
}, {
  ...
}, {
  "name": "Quantity",
  "fieldName": "Quantity",
  "width": "100",
  "header": {
      "text": "Quantity"
  },
  "summaries": [{
    "expression": "sum",
    "numberFormat": "#,##0.00"
  }, {
    "expression": "avg",
    "numberFormat": "#,##0.00"
  }]
}, {
    ...
}];

layout

방법 1.

gridView.layoutByColumn("Country").summaryUserSpans = [{ rowspan: 2, colspan: 3 }];

방법 2.

var layout1 = [
  {
    column: "Country",
    summaryUserSpans: [{ rowspan: 2, colspan: 3 }]
  },
  "CompanyName",
  "QuantityPerUnit", 
  "Quantity",
  "OrderID",
  "CustomerID",
  "EmployeeID",
  "OrderDate",
  "Phone",
  "ProductName"
];
 
gridView.setColumnLayout(layout1);

컬럼 푸터 HTML Template 컬럼 헤더 HTML Template