들어가며

로우 그룹핑(row grouping)이란 특정 컬럼을 기준으로 그룹핑하는 것을 의미합니다. 즉, 해당 컬럼의 데이터값이 동일한 행을 묶는 것을 의미합니다. [A15 강좌],[A16 강좌]에서 로우 그룹핑(row grouping)에 대한 기본적인 이론과 사용방법을 배웠습니다.
이 강좌에서는 rowGroup.header, rowGroup.footer, panel의 영역에 데이터를 표시하거나 rowGroup.bar영역의 너비를 조정하고 그룹핑시 rowGroup.header영역을 접거나 펼치는 방법에 대해 배워보겠습니다.

이론

RealGrid는 Grouping을 할 수 있습니다. gridView.setGroupingOptions()함수를 사용해서 그루핑된 영역에 대한 옵션을 설정할 수 있습니다. 그리고 그루핑의 영역 중에서 rowGroup.header, rowGroup.footer영역에 대한 옵션 설정으로 여러가지 값을 표시 할 수 있습니다.

우선 rowGroup의 모든 영역의 위치에 대해서 확인하고 넘어가겠습니다.
rowGroup의 모든 영역은 아래와 같습니다.

  • rowGroup.panel : panel에서 그루핑 된 컬럼들의 영역 입니다.
  • rowGroup.header : 데이터 셀에서 그루핑 된 컬럼의 정보가 보여지는 영역입니다.
  • fowGroup.footer : 데이터 셀에서 필드의 값에 대하여 연산 및 text를 보여줄 수 있는 영역입니다.
  • rowGroup.head : 컬럼의 header영역 앞이 head영역 입니다.
  • rowGroup.bar : rowGroup.head를 기준으로 아래로 표시되는 영역입니다.
  • rowGroup.headerBar : rowGroup.header영역 앞에 데이터 셀을 보거나 숨길 수 있도록 하는 영역입니다.
  • rowGroup.footerBar : rowGroup.footer영역 앞의 영역 입니다.
  • rowGroup.foot : rowGroup.head를 기준으로 제일 아래에 표시되는 영역 입니다.

RowGroupOptions

  • headerStatement : RowGroup 헤더에 표시할 문자열 format을 지정합니다.
  • expandedAdornments : RowGroup이 펼쳐진 상태일 때 rowGroup.header, rowGroup.footer영역의 표시 여부를 지정할 수 있습니다.
  • collapsedAdornments : RowGorup이 펼쳐지지 않은 상태일 때 rowGroup.header, rowGroup.footer영역의 표시 여부를 지정할 수 있습니다.
  • mergeExpander : expander 표시여부를 지정합니다.
  • mergeMode : 행 그루핑시 그루핑된 컬럼의 merge표현 여부를 지정합니다.
  • levelIndent : 그룹레벨간 들여쓰기 여백을 지정합니다.
    • levelIndent : 30 설정으로 rowGroup.bar영역의 너비를 설정할 수 있습니다.
  • summaryMode : 각 컬럼의 총 합계 또는 그룹핑된 그룹의 합계나 분산 등 에 대해서 자동으로 계산합니다.
    • rowGroup.footer영역에 합계, 평균, 분산 등 내용 표시방법을 설정할 때 사용합니다.
    • rowGroup.footer영역에 값을 표시하기 위해서 필드속성에서 footer에 groupExpression:”avg”와 같이 footer에 대하여 기본적으로 계산방법이 설정되어 있어야 합니다.
    • groupExpression에 값으로는 SummaryExpressionType에서 확인하실 수 있습니다.
    • groupExpression을 설정하지 않을 경우 rowGroup.footer영역에 계산방법에 대한 설정이 되어있지 않기 때문에 아래의 3가지 옵션이 적용되지 않습니다.
    • summaryMode : “none” 컬럼의 합계를 계산하지 않습니다.
    • summaryMode : “aggregate” 합,평균,최대값,최소값 등 산술적인 합계를 자동으로 계산합니다.
    • summaryMode : “statistaical” 분산, 표준편차 등 통계적 합계를 자동으로 계산합니다.

위 옵션중에서 mergeMode, mergeExpander, expandedAdornments, collapsedAdornments에 대한내용은 다음 강좌인 [B2-3 강좌]에서 자세히 배우겠습니다. 이번 강좌에서는 headerStatement옵션과 panel영역의 grouping에 관련된 옵션 설정 방법에 대해서 알아보도록 하겠습니다.

우선 rowGroup.header영역에 표시하기 위한 옵션중 headerStatement은 type이 string이며 값의 format형식은 ${설정값}입니다. 헤더에 표시할 문자열을 format해서 문자열 값을 rowGroup.header영역에 보여주는 gridView.setRowGroup()함수의 RowGroupOptions중에서 headerStatement옵션을 사용해서 RowGrouping에 설정하여 문자열을 rowGroup.header영역에 표시하게 됩니다.

rowGroup.header영역에 표시할 수 있는 headerStatement옵션에 기본 초기 설정 값으로는 “${groupField}: ${groupValue} - ${rowCount} rows”로 설정 되어있지만 원하는 속성으로 바꾸어서 사용하실 수 있습니다. headerStatement옵션에 대한 설정값은 아래와 같습니다.

rowGroup 영역

우선 이 강좌를 연습하기 전에 RealGrid의 Style Regions에서 rowGroup영역들을 이해하는 것이 좋습니다. Style Resion에서 rowGroup관련 영역은 아래와 같습니다.

  • rowGroup.panel
    panel에서 그룹핑 된 컬럼들의 영역 입니다.
  • rowGroup.header
    데이터 셀에서 그룹핑 된 컬럼의 정보가 보여지는 영역입니다.
  • fowGroup.footer
    데이터 셀에서 필드의 값에 대하여 연산 및 text를 보여줄 수 있는 영역입니다.
  • rowGroup.head
    컬럼의 header영역 앞이 head영역 입니다.
  • rowGroup.bar
    rowGroup.head를 기준으로 아래로 표시되는 영역입니다.
  • rowGroup.headerBar
    rowGroup.header영역 앞에 데이터 셀을 보거나 숨길 수 있도록 하는 영역입니다.
  • rowGroup.footerBar
    rowGroup.footer영역 앞의 영역 입니다.
  • rowGroup.foot
    rowGroup.head를 기준으로 제일 아래에 표시되는 영역 입니다.

header에 값 표시하기

rowGroup.header영역에 값을 표시하기 위해 headerStatement속성에 값을 지정합니다. 이 속성에 값을 지정하는 형식은 ${설정값}입니다. 여기서 $는 jQuery와는 아무런 관련이 없습니다.
headerStatement속성에는 초기값이 지정되어 있으며 그 값은 “${groupField}: ${groupValue} - ${rowCount} rows”입니다.

  • headerStatement: “문자”
    • 모든 rowGroup.header영역에 문자라는 문자열 값을 표시합니다.
    • 문자열 안에 문자는 모든 영역에 같은 문자가 표시 되지만 아래와 같은 설정으로 해당하는 format값들로 표시할 수 있습니다.
  • headerStatement: “${groupField}”
    • 기준 필드의 이름name값을 표시합니다.
  • headerStatement: “${fieldHeader}”
    • 필드header값을 표시합니다.
  • headerStatement: “${groupColumn}”
    • 컬럼name값을 표시합니다.
  • headerStatement: “${columnHeader}”
    • 컬럼 헤더의 "text"를 표시합니다
  • headerStatement: “${groupValue}”
    • 그룹데이터값을 표시합니다.
  • headerStatement: “${rowCount}”
    • 데이터행개수를 표시합니다.
  • headerStatement: “${groupField}: ${groupValue} - ${rowCount} rows”
    • 간단한 수식을 사용하여 계산된 값을 표시합니다.
    • 문자열 “ “안에 영역에 문자를 넣어서 표시할 수 있습니다.

그리고 GroupingOptions에서는 panel에 메시지를 표시할 수 있으며 그루핑을 할 수 없도록 할 수도 있습니다.

footer영역 메시지 표시

  • summaryMode
    • summaryMode속성을 이용해 footer영역에 메시지를 표시하거나 컬럼의 계산결과를 표시 할 수 있습니다.

Panel영역에 메시지 표시

  • prompt
    • type은 string형식으로 문자열의 내용을 panel에 표시할 수 있습니다.

그루핑된 항목 일렬배치

  • linear : panel영역에 표시되는 column의 배치 방향을 결정합니다.
    • linear : true 설정으로 panel영역에 표시되는 column들을 일렬로 배치할 수 있습니다.

그루핑시 펼침 여부

  • expandWhenGrouping : 그루핑시 그룹의 펼침 여부를 지정합니다.
    • expandWhenGrouping : false로 설정할 경우 그루핑시 모든 데이터 필드가 접힌상태로 보여집니다.

그룹핑 못하게 하기

  • enabled
    • 그룹핑의 가/부를 결정하는 옵션입니다. 기본값은 true로 설정되어 그룹핑이 가능하지만 false로 설정하면 그룹핑을 할 수 없는 상태가 됩니다.

bar영역의 너비 변경

  • levelIndent
    • levelIndent속성에 숫자값을 입력하면 rowGroup.bar영역의 너비를 설정할 수 있습니다.

실습

실습을 통하여 GroupingOptionsRowGroupOptions의 설정방법을 알아보겠습니다.

  1. 버튼을 클릭하면 panel영역에 그룹핑 전에 표시할 메시지를 설정하기 위해 아래 코드를 추가합니다.

     $("#btnprompt").on("click", function(){
         gridView.setGroupingOptions({
             prompt : "panel영역 메시지"
         });
     })
  2. 버튼을 클릭하면 직업과 성별 컬럼을 그룹핑 하기위해 아래 코드를 추가합니다.

     $("#btnFieldsGroup").on("click", function(){
         gridView.groupBy(["field1", "field2"]);
     })
  3. 버튼을 클릭하면 panel영역의 직업과 성별 컬럼을 일렬로 배치하기 위해 아래 코드를 추가합니다.

     $("#btnLinear").on("click", function(){
         gridView.setGroupingOptions({
             linear : true
         });
     })
  4. 버튼을 클릭하면 rowGroup.header영역에 field값이 표시하기 위해 아래 코드를 추가합니다.

     $("#btnGroupField").on("click", function(){
         gridView.setRowGroup({
             headerStatement: "${groupField}"
         });
     })
  5. rowGroup.header영역에 fieldHeader의 내용을 표시하기 위해 fields코드에 header코드를 추가합니다.

     var fields = [
         {
             fieldName: "field1",
             header: "fieldName: field1"
         },
         {
             fieldName: "field2",
             header: "fieldName: field2"
         }...
  6. 버튼을 클릭하면 5번에서 설정한 필드의 header값이 rowGroup.header영역에 표시하기 위해 아래 코드를 추가합니다.

     $("#btnFieldHeader").on("click", function(){
         gridView.setRowGroup({
             headerStatement: "${fieldHeader}"
         });
     })
  7. 버튼을 클릭하면 컬럼의 name이 rowGroup.header영역에 표시하기 위해 아래 코드를 추가합니다.

     $("#btnGroupColumn").on("click", function(){
         gridView.setRowGroup({
             headerStatement: "${groupColumn}"
         });
     })
  8. 버튼을 클릭하면 rowGroup.header영역에 컬럼의 헤더에 “text”값을 표시하기 위해 아래 코드를 추가합니다.

     $("#btnColumnHeader").on("click", function(){
         gridView.setRowGroup({
             headerStatement: "${columnHeader}"
         });
     })
  9. 버튼을 클릭하면 rowGroup.header영역에 그룹의 데이터값을 표시하기 위해 아래 코드를 추가합니다.

     $("#btnGroupValue").on("click", function(){
         gridView.setRowGroup({
             headerStatement: "${groupValue}"
         });
     })
  10. 버튼을 클릭하면 rowGroup.header영역에 행의 개수를 표시하기 위해 아래 코드를 추가합니다.

    $("#btnRowCount").on("click", function(){
        gridView.setRowGroup({
            headerStatement: "${rowCount}"
        });
    })
  11. 버튼을 클릭하면 rowGroup.bar영역의 너비를 설정하기 위해 아래 코드를 추가합니다.

    $("#btnlevelIndent").on("click", function(){
        gridView.setRowGroup({
            levelIndent : 30
        });
    })
  12. 버튼을 클릭하면 rowGroup.footer영역에 값을 계산하지 않기위해 아래 코드를 추가합니다.

    $("#btnsummaryMode").on("click", function(){
        gridView.setRowGroup({
            summaryMode : "none"
        });
    })
  13. 버튼을 클릭하면 그룹핑을 할 때 모든 필드가 접힌상태로 나오도록 하기위해 아래 코드를 추가합니다.

    $("#btnexpandWhenGrouping").on("click", function(){
        gridView.setGroupingOptions({
            expandWhenGrouping : false
        });
    })
  14. 버튼을 클릭하면 그룹핑을 할 수 없도록 설정하기 위해 아래 코드를 추가합니다.

    $("#btnGroupenabled").on("click", function(){
        gridView.setGroupingOptions({
            enabled : false
        });
    })

실행화면

  1. 버튼을 클릭하여 panel영역에 설정한 메시지로 표시해 줍니다. panel영역의 메시지가 변경 되었는지 확인합니다.

  2. 버튼을 클릭하여 직업컬럼과 성별컬럼을 그룹상태로 만들어 줍니다.
    직업,성별컬럼이 그룹상태가 되었는지 확인합니다.

  3. 버튼을 클릭하여 panel영역의 컬럼들을 일렬로 배치시켜줍니다. 컬럼들의 배치가 일렬로 되었는지 확인합니다.

  4. 버튼을 클릭하여 rowGroup.header영역에 필드의 이름을 표시합니다. 해당영역에 FIELD1, FIELD2가 표시되는지 확인합니다.

  5. 버튼을 클릭하여 rowGroup.header영역에 필드header값을 표시합니다. 해당영역에 필드에 설정했던 헤더값 fieldName:field1이 표시되는지 확인합니다.

  6. 버튼을 클릭하여 rowGroup.header에 컬럼의 name값을 표시합니다. 해당영역에 col1, col2가 표시되는지 확인합니다.

실행예를 잘 확인 할 수 있게 실습 버튼 중간에 위치 시켰습니다.

  1. 버튼을 클릭하여 컬럼의 헤더text를 표시합니다. 해당영역에 컬럼의 헤더에 “text”인 직업,성별이 표시되는지 확인합니다.

  2. 버튼을 클릭하여 그룹의 데이터값을 표시합니다. 해당영역에 데이터셀의 값이 표시되는지 확인합니다.

  3. 버튼을 클릭하여 데이터 행의 개수를 표시합니다.

  4. 버튼을 클릭하여 rowGroup.bar영역의 너비를 30으로 변경해줍니다. 영역의 너비를 확인합니다.

  5. 버튼을 클릭하면 rowGroup.footer영역의 값을 계산하지 않습니다. 해당 영역에 값이 표시되지 않는 것을 확인합니다.

  6. 버튼을 클릭고 그룹핑하면 모든 필드가 접힌상태로 그룹핑됩니다. 다른 컬럼을 그룹핑하여 결과를 확인합니다.

  7. 버튼을 클릭하면 그룹핑을 할 수 없도록 설정합니다. 그룹핑을 시도하여 결과를 확인합니다.

전체 소스코드

SCRIPT

<link rel="stylesheet" href="/css/bootstrap.css">
<script type="text/javascript" src="/script/jquery-1.112.min.js"></script>
<script type="text/javascript" src="/script/bootstrap.min.js"></script>
<!--realgrid-->
<script type="text/javascript" src="/script/dlgrids_eval.js"></script>
<script type="text/javascript" src="/script/realgridjs.js"></script>

<script>
var gridView;
var dataProvider;

$(document).ready( function(){
    RealGridJS.setTrace(false);
    RealGridJS.setRootContext("/script");
    
    dataProvider = new RealGridJS.LocalDataProvider();
    gridView = new RealGridJS.GridView("realgrid");
    gridView.setDataSource(dataProvider);
    
    //필드 배열 객체를  생성합니다.
    var fields = [
        {
            fieldName: "field1",
            header: "fieldName: field1"
        },
        {
            fieldName: "field2",
            header: "fieldName: field2"
        },
        {
            fieldName: "field3"
        },
        {
            fieldName: "field4"
        },
        {
            fieldName: "field5"
        },
        {
            fieldName: "field6"
        },
        {
            fieldName: "field7"
        },
        {
            fieldName: "field8"
        },
        {
            fieldName: "field9"
        },
        {
            fieldName: "field10"
        }
    ];
    //DataProvider의 setFields함수로 필드를 입력합니다.
    dataProvider.setFields(fields);
    
    //필드와 연결된 컬럼 배열 객체를 생성합니다.
    var columns = [
        {
            name: "col1",
            fieldName: "field1",
            header : {
                text: "직업"
            },
            width : 60
        },
        {
            name: "col2",
            fieldName: "field2",
            header : {
                text: "성별"
            },
            width: 50
        },
        {
            name: "col3",
            fieldName: "field3",
            header : {
                text: "이름"
            },
            footer: {
                text: "평균=>",
                groupText: "평균=>"
            },
            width: 80
        },
        {
            name: "col4",
            fieldName: "field4",
            header : {
                text: "국어"
            },
            footer: {
                styles: {
                    textAlignment: "near",
                    numberFormat: "0"
                },
                text: "평균",
                expression: "avg",
                groupExpression: "avg"
            },
            width: 80
        },
        {
            name: "col5",
            fieldName: "field5",
            header : {
                text: "수학"
            },
            footer: {
                styles: {
                    textAlignment: "near",
                    numberFormat: "0"
                },
                text: "평균",
                expression: "avg",
                groupExpression: "avg"
            },
            width: 80
        },
        {
            name: "col6",
            fieldName: "field6",
            header : {
                text: "민법"
            },
            footer: {
                styles: {
                    textAlignment: "near",
                    numberFormat: "0"
                },
                text: "평균",
                expression: "avg",
                groupExpression: "avg"
            },
            width: 80
        },
        {
            name: "col7",
            fieldName: "field7",
            header : {
                text: "한국사"
            },
            footer: {
                styles: {
                    textAlignment: "near",
                    numberFormat: "0"
                },
                text: "평균",
                expression: "avg",
                groupExpression: "avg"
            },
            width: 80
        },
        {
            name: "col8",
            fieldName: "field8",
            header : {
                text: "영어"
            },
            footer: {
                styles: {
                    textAlignment: "near",
                    numberFormat: "0"
                },
                text: "평균",
                expression: "avg",
                groupExpression: "avg"
            },
            width: 80
        },
        {
            name: "col9",
            fieldName: "field9",
            header : {
                text: "과학"
            },
            footer: {
                styles: {
                    textAlignment: "near",
                    numberFormat: "0"
                },
                text: "평균",
                expression: "avg",
                groupExpression: "avg"
            },
            width: 80
        },
        {
            name: "col10",
            fieldName: "field10",
            header : {
                text: "사회"
            },
            footer: {
                styles: {
                    textAlignment: "near",
                    numberFormat: "0"
                },
                text: "평균",
                expression: "avg",
                groupExpression: "avg"
            },
            width: 80
        }
    ];
    //컬럼을 GridView에 입력 합니다.
    gridView.setColumns(columns);

   var data = [
       ["배우", "여자", "전도연", "0", "70", "90", "70", "60", "100", "80"],
       ["가수", "여자", "이선희", "1", "33", "90", "70", "60", "100", "80"],
       ["배우", "여자", "하지원", "2", "100", "90", "70", "60", "100", "80"],
       ["가수", "여자", "박정현", "3", "90", "90", "70", "60", "100", "80"],
       ["배우", "여자", "전지현", "4", "100", "90", "70", "60", "100", "80"],
       ["가수", "남자", "성시경", "7", "100", "100", "100", "100", "100", "100"],
       ["가수", "남자", "신해철", "8", "100", "100", "100", "100", "100", "100"],
       ["가수", "남자", "윤상", "9", "100", "100", "100", "100", "100", "100"],
       ["가수", "남자", "윤종신", "10", "100", "100", "100", "100", "100", "100"],
       ["가수", "여자", "이소라", "11", "100", "100", "100", "100", "100", "100"],
       ["배우", "여자", "강소라", "12", "100", "100", "100", "100", "100", "100"],
       ["가수", "남자", "타블로", "13", "100", "100", "100", "100", "100", "100"],
       ["가수", "남자", "이승환", "14", "100", "100", "100", "100", "100", "100"],
       ["가수", "남자", "토이", "15", "100", "100", "100", "100", "100", "100"]
     ];
    dataProvider.setRows(data);
    
    //panel영역 메시지 
    $("#btnprompt").on("click", function(){
        gridView.setGroupingOptions({
            prompt : "panel영역 메시지"
        });
    })   
    
    //작업컬럼 단일그룹
    $("#btnFieldsGroup").on("click", function(){
        gridView.groupBy(["field1","field2"]);
    });

    //panel영역 일렬배치
    $("#btnLinear").on("click", function(){
        gridView.setGroupingOptions({
            linear : true
        });
    })

    //필드의 이름
    $("#btnGroupField").on("click", function(){
        gridView.setRowGroup({
            headerStatement: "${groupField}"
        });
    })
    
    //필드header값
    $("#btnFieldHeader").on("click", function(){
        gridView.setRowGroup({
            headerStatement: "${fieldHeader}"
        });
    })
    
    //컬럼의 이름
    $("#btnGroupColumn").on("click", function(){
        gridView.setRowGroup({
            headerStatement: "${groupColumn}"
        });
    })
    
    //컬럼 헤더 text
    $("#btnColumnHeader").on("click", function(){
        gridView.setRowGroup({
            headerStatement: "${columnHeader}"
        });
    })
    
    //그룹 데이터의 값
    $("#btnGroupValue").on("click", function(){
        gridView.setRowGroup({
            headerStatement: "${groupValue}"
        });
    })
    
    //데이터행의 개수
    $("#btnRowCount").on("click", function(){
        gridView.setRowGroup({
            headerStatement: "${rowCount}"
        });
    })

    //rowGroup.bar너비
    $("#btnlevelIndent").on("click", function(){
        gridView.setRowGroup({
            levelIndent : 30
        });
    })

    //계산하지 않기
    $("#btnsummaryMode").on("click", function(){
        gridView.setRowGroup({
            summaryMode : "none"
        });
    })
    
    //필드 접기 
    $("#btnexpandWhenGrouping").on("click", function(){
        gridView.setGroupingOptions({
            expandWhenGrouping : false
        });
    })
    
    //그룹핑 여부
    $("#btnGroupenabled").on("click", function(){
        gridView.setGroupingOptions({
            enabled : false
        });
    })

});     
</script>

HTML

1. <button type="button" class="btn btn-primary btn-xs" id="btnprompt">panel영역 메시지</button>버튼을 클릭하여 panel영역에 설정한 메시지로 표시해 줍니다. panel영역의 메시지가 변경 되었는지 확인합니다.

2. <button type="button" class="btn btn-primary btn-xs" id="btnFieldsGroup">직업, 성별컬럼으로 그룹잡기</button>버튼을 클릭하여 직업컬럼과 성별컬럼을 그룹상태로 만들어 줍니다. 직업,성별컬럼이 그룹상태가 되었는지 확인합니다.

3. <button type="button" class="btn btn-primary btn-xs" id="btnLinear">panel영역 일렬배치</button>버튼을 클릭하여 panel영역의 컬럼들을 일렬로 배치시켜줍니다. 컬럼들의 배치가 일렬로 되었는지 확인합니다.

4. <button type="button" class="btn btn-primary btn-xs" id="btnGroupField">필드의 이름</button>버튼을 클릭하여 rowGroup.header영역에 필드의 이름을 표시합니다. 해당영역에 FIELD1, FIELD2가 표시되는지 확인합니다.

5. <button type="button" class="btn btn-primary btn-xs" id="btnFieldHeader">필드header값</button>버튼을 클릭하여 rowGroup.header영역에 필드header값을 표시합니다. 해당영역에 필드에 설정했던 헤더값 fieldName:field1이 표시되는지 확인합니다.

6. <button type="button" class="btn btn-primary btn-xs" id="btnGroupColumn">컬럼의 이름</button>버튼을 클릭하여 rowGroup.header에 컬럼의 name값을 표시합니다. 해당영역에 col1, col2가 표시되는지 확인합니다.

<p style="font-size: small;">실행예를 잘 확인 할 수 있게 실습 버튼 중간에 위치 시켰습니다.</p>
<div id="realgrid" style="width: 100%; height: 300px;"></div>
<p></p>

7. <button type="button" class="btn btn-primary btn-xs" id="btnColumnHeader">컬럼 헤더text</button>버튼을 클릭하여 컬럼의 헤더text를 표시합니다. 해당영역에 컬럼의 헤더에 "text"인 직업, 성별이 표시되는지 확인합니다.

8. <button type="button" class="btn btn-primary btn-xs" id="btnGroupValue">그룹 데이터의 값</button>버튼을 클릭하여 그룹의 데이터값을 표시합니다. 해당영역에 데이터셀의 값이 표시되는지 확인합니다.

9. <button type="button" class="btn btn-primary btn-xs" id="btnRowCount">데이터 행의 개수</button>버튼을 클릭하여 데이터 행의 개수를 표시합니다.

10. <button type="button" class="btn btn-primary btn-xs" id="btnlevelIndent">rowGroup.bar영역 너비</button>버튼을 클릭하여 rowGroup.bar영역의 너비를 30으로 변경해줍니다. 영역의 너비를 확인합니다.

11. <button type="button" class="btn btn-primary btn-xs" id="btnsummaryMode">rowGroup.footer영역 계산하지않기</button>버튼을 클릭하면 rowGroup.footer영역의 값을 계산하지 않습니다. 해당 영역에 값이 표시되지 않는 것을 확인합니다.

12. <button type="button" class="btn btn-primary btn-xs" id="btnexpandWhenGrouping">필드 접기</button>버튼을 클릭고 그룹핑하면 모든 필드가 접힌상태로 그룹핑됩니다. 다른 컬럼을 그룹핑하여 결과를 확인합니다.

13. <button type="button" class="btn btn-primary btn-xs" id="btnGroupenabled">그룹핑 불가능</button>버튼을 클릭하면 그룹핑 불가 상태로 설정합니다. 그룹핑을 시도하여 결과를 확인합니다.

데모 사이트


API 참조