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

1
2
3
4
5
6
7
8
gridView.onGrouping = function (grid){
  alert("onGrouping 이벤트가 발생했습니다. true를 반환합니다.");
  return true;
}

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

1
2
3
4
5
var statement = $('#selFooterStatement').val();
statement = statement ? statement : null;
gridView.setRowGroup({
  footerStatement: statement
});

1
2
3
4
var statement = $('#selHeaderStatement').val();
gridView.setRowGroup({
    headerStatement: statement
});

1
2
3
4
5
6
7
8
9
10
gridView.setGroupingOptions({
    enabled: true, 
    prompt: "컬럼 헤더를 이 곳으로 끌어다 놓으면 그 컬럼으로 그룹핑합니다.", 
    linear: false, 
    removeIncludeLower: false,
    expandWhenGrouping: true, 
    toast:{
        visible: true
    }
});

1
2
3
4
5
6
gridView.setRowGroup({
  summaryMode: "aggregate",
  sorting:true,
  footerStatement: "행 그룹핑된 컬럼의 풋터입니다.",
  footerCellMerge: true
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
gridView.setRowGroup({
  levels: [{
    headerStyles: {
      background: "#FF008800",
      foreground: "#FFFFFFFF",
      fontBold: true
    },
    footerStyles: {
      background: "#FF008800",
      foreground: "#FFFFFFFF",
      fontBold: true
    },
    headerBarStyles: {
      background: "#FF008800"
    },
    footerBarStyles: {
      background: "#FF008800"
    },
    barStyles: {
      background: "#FF008800"
    }
  },{
    headerStyles: {
      background: "#FF00CC00"
    },
    footerStyles: {
      background: "#FF00CC00"
    },
    headerBarStyles: {
     background: "#FF00CC00"
    },
    footerBarStyles: {
      background: "#FF00CC00"
    },
    barStyles: {
      background: "#FF00CC00"
    }
  },{
    headerStyles: {
      background: "#FF00FF00"
    },
   footerStyles: {
      background: "#FF00FF00"
   },
    headerBarStyles: {
      background: "#FF00FF00"
   },
   footerBarStyles: {
      background: "#FF00FF00"
    },
    barStyles: {
      background: "#FF00FF00"
   }
  },{
    headerStyles: {
      background: "#4400FF00"
    },
    headerBarStyles: {
      background: "#4400FF00"
   },
    barStyles: {
      background: "#4400FF00"
   }
  }] 
});