행 그룹

Row grouping은 데이터 행들을 하나 이상의 지정한 컬럼의 값을 기준으로 구분시켜 계층적인 구조로 표시합니다. 컬럼 헤더를 panel 영역으로 드래깅하면 그 컬럼으로 grouping 합니다. 또는 GridView.groupBy() 함수를 호출해서 grouping할 수도 있습니다.

그룹핑 하기

컬럼 헤더를 panel 영역으로 드래깅하면 그 컬럼으로 grouping 합니다.
또는 GridView.groupBy() 함수를 호출해서 grouping할 수도 있습니다.

var fieldNames = [];
$("input[name='chkFieldName']:checked").each(function() {
  fieldNames.push($(this).val());
});
gridView.groupBy(fieldNames);

그룹핑 이벤트

Row grouping되면 Javascript 그리드의 onGrouping(), onGroupingChanged() 이벤트가 발생됩니다.

• onGrouping()
• onGroupingChanged()

gridView.onGrouping = function(grid) {
  alert("onGrouping 이벤트가 발생했습니다. true를 반환합니다.");
  return true;
};

gridView.onGroupingChanged = function(grid) {
  alert(
    "onGroupingChanged : isGrouped = " +
      grid.isGrouped() +
      ", isMergedGrouped  = " +
      grid.isMergedGrouped()
  );
};

푸터와 그룹 푸터에 요약값 표시

dataType이 "number"인 경우 요약값을 표시할 수 있습니다. 표시할 수 있는 요약값은 SummaryType에서 확인하세요.

아래 데모는 나이 컬럼은 평균값, 만기금액은 합계로 계산하였습니다.

var columns = [
  ...
  {
    name: "Age",
    fieldName: "Age",
    type: "data",
    width: "40",
    header: {
      text: "나이"
    },
    groupFooter: {
      expression: "avg",
      numberFormat: "#,##0.0",
      styleName: "right-column"
    },
    footer: {
      expression: "avg",
      numberFormat: "#,##0.0",
      styleName: "right-column"
    },
    styleName: "right-column"
  },
  {
    name: "SaveMaturity",
    fieldName: "SaveMaturity",
    type: "data",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "만기금액"
    },
    groupFooter: {
      expression: "sum",
      numberFormat: "#,##0",
      styleName: "right-column"
    },
    footer: {
      expression: "sum",
      numberFormat: "#,##0",
      styleName: "right-column"
    },
    styleName: "right-column"
  },
  ...
];

gridView.setColumns(columns);

그룹 푸터 값 표시

아래 옵션들의 설정에 따라 각 행 그룹들은 그룹 푸터를 표시할 수 있습니다.
그룹 푸터에 표시하는 텍스트는 GridBase.setRowGroup 함수에 전달되는 설정 개체의 footerStatement 값으로 지정합니다.
또한, summary mode를 통해 각 행 그룹의 푸터에 표시할 수 있는 값의 종류를 지정할 수도 있습니다.

gridView.setRowGroup({
  footerStatement: "${groupValue}"
});

그룹 헤더 값 표시

아래 옵션들의 설정에 따라 각 행 그룹들은 그룹 헤더를 표시할 수 있습니다.
그룹 헤더에 표시하는 텍스트는 GridBase.setRowGroup 함수에 전달되는 설정 개체의 headerStatement 값으로 지정합니다.
headerStatement의 기본값은 "${groupField}: ${groupValue} - ${rowCount} rows" 입니다.

headerStatement 속성으로는 아래와 같은 값들을 설정할 수 있습니다.

• groupField
• fieldHeader
• groupColumn
• columnHeader
• columnFooter
• groupValue
• rowCount

gridView.setRowGroup({
  headerStatement: "${groupField}: ${groupValue} - ${rowCount} rows"
});