
# rowGroup API

A grid item is a display model in which one row of a DataProvider or the header or footer of a RowGrouping group is displayed as one line in a grid or tree.

#### rowGroup API

- `groupBy`: Executes Row Grouping at a level equal to the number of fields specified. If an empty array or null is specified as an argument, grouping is turned off.
- `isGrouped`: Checks if the grid is RowGrouping. (If grouping, returns true.)
- `isMergedGrouped`: Checks if the grid is in mergeMode.
- `getGroupFields`: Returns the index values of grouping fields in order.
- `getGroupFieldNames`: Returns the names of grouping fields in order. If orgName is set to true, the name defined in fieldSet is returned.
- `getGroupLevels`: Returns what level the group is currently grouped into.
- `getGroupLevel`: Returns the group level of the specified field. The first group level is 1. Returns 0 if not grouped by that field.
- `getGroupIndex`: Returns the index of the group item of the specified item.
- `isGroupItem`: Returns true if the specified item is a group item.
- `isParentVisible`: Returns whether the group item of the specified item is visible.
- `expandGroup`: Expands the specified group. If recursive is set to true, subgroups included in the group will be expanded. If force is set to true, even if it is already expanded, if recursive is set to true, subgroups are expanded.
- `collapseGroup`: Collapses the specified group. If recursive is set to true, descendant groups included in the group will also be collapsed.
- `expandParent`: Expands the group if the specified item is a footer.
- `collapseParent`: Collapses the group if the specified item is a row or footer.

```js
const fields = [
  { fieldName: 'KorName', dataType: 'text' },
  { fieldName: 'Gender', dataType: 'text' },
  { fieldName: 'Age', dataType: 'number' },
  { fieldName: 'Phone', dataType: 'text' },
  { fieldName: 'ProductId', dataType: 'text' },
  { fieldName: 'KorCountry', dataType: 'text' },
  { fieldName: 'OrderDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'CardNumber', dataType: 'text' },
  { fieldName: 'Monetary', dataType: 'text' },
  { fieldName: 'StartDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'EndDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'ToMonth', dataType: 'number' },
  { fieldName: 'Month', dataType: 'number' },
  { fieldName: 'Year', dataType: 'number' },
  { fieldName: 'InterestRate', dataType: 'number' },
  { fieldName: 'SaveCost', dataType: 'number' },
  { fieldName: 'SaveMaturity', dataType: 'number' },
  { fieldName: 'CurrentSave', dataType: 'number' }
];

const columns = [
  { name: 'KorName', fieldName: 'KorName', width: '60', header: { text: 'Name' } },
  { name: 'Gender', fieldName: 'Gender', width: '40', header: { text: 'Gender' } },
  { name: 'Age', fieldName: 'Age', width: '40', header: { text: 'Age' }, styleName: 'right-column' },
  { name: 'Phone', fieldName: 'Phone', width: '100', header: { text: 'Phone' } },
  { name: 'ProductId', fieldName: 'ProductId', width: '120', header: { text: 'Product ID' } },
  { name: 'KorCountry', fieldName: 'KorCountry', width: '100', header: { text: 'Investment Country' } },
  { name: 'OrderDate', fieldName: 'OrderDate', width: '100', header: { text: 'Order Date' } },
  { name: 'CardNumber', fieldName: 'CardNumber', width: '140', header: { text: 'Card Number' } },
  { name: 'Monetary', fieldName: 'Monetary', width: '40', header: { text: 'Currency' } },
  { name: 'StartDate', fieldName: 'StartDate', width: '100', header: { text: 'First Payment Date' } },
  { name: 'EndDate', fieldName: 'EndDate', width: '100', header: { text: 'End Date' } },
  { name: 'ToMonth', fieldName: 'ToMonth', width: '50', header: { text: 'Payment Count' }, styleName: 'right-column' },
  { name: 'Month', fieldName: 'Month', width: '50', header: { text: 'Remaining Count' }, styleName: 'right-column' },
  { name: 'InterestRate', fieldName: 'InterestRate', width: '50', numberFormat: '0.00', header: { text: 'Interest Rate' }, styleName: 'right-column' },
  { name: 'SaveCost', fieldName: 'SaveCost', width: '80', numberFormat: '#,##0', header: { text: 'Payment Amount' }, footer: { text: 'Total =>' }, styleName: 'right-column' },
  { name: 'SaveMaturity', fieldName: 'SaveMaturity', width: '80', numberFormat: '#,##0', header: { text: 'Maturity Amount' }, footer: { text: 'Total', expression: 'sum', groupExpression: 'sum' }, styleName: 'right-column' },
  { name: 'CurrentSave', fieldName: 'CurrentSave', width: '80', numberFormat: '#,##0', header: { text: 'Current Balance' }, styleName: 'right-column' }
];

const { gridView, dataProvider } = RealGrid.createGrid('realgrid', {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: 'No data to display.'
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  groupPanel: {
    visible: true
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data200.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;

function btnGroupBy() {
  gridView.groupBy(['KorName']);
}

function btnUnGroupBy() {
  gridView.groupBy([]);
}

function btnIsGrouped() {
  alert(gridView.isGrouped());
}

function btnIsMergedGrouped() {
  alert(gridView.isMergedGrouped());
}

function btnGetGroupFields() {
  alert(gridView.getGroupFields());
}

function btnGetGroupFieldNames() {
  alert(gridView.getGroupFieldNames(document.getElementById('chkOrgFieldName').checked));
}
```


```js
gridView.groupBy(["OrderID", "CustomerID"]);
```

```js
gridView.groupBy([]);
```

```js
alert(gridView.isGrouped());
```

```js
alert(gridView.isMergedGrouped());
```


```js
alert(gridView.getGroupFields());
```

```js
alert(gridView.getGroupFieldNames($("#chkOrgFieldName").is(":checked")));
```