
# row status

RealGrid can manage the state of rows. You can check whether this row is an edited row, an added row, a deleted row, or a row that was added and then deleted. In order to manage the state of a row, the checkStates property value among the properties of [dataProviderOptions](/refs/Class/DataProviderBase#setoptions) must be set to true. The default value is true, so no special settings are required.

RealGrid automatically manages row status based on user actions (add, modify, delete). RealGrid can also manage row states arbitrarily according to the developer's intent.

#### Types of [RowState](/refs/realgrid#rowstate)

`none`: A state that does not change after being loaded.
`created` : Status of the newly added row.
`updated` : The value of one or more fields has changed since it was loaded. The `created` row will not change to `updated` when its value changes.
`deleted` : Status of a row that has been deleted after being loaded.
`createAndDeleted` : The status of the row that was added and then deleted.

The state `deleted` or `createAndDeleted` can only be had if the value of dataProvider.options.softDeleting is true . If softDeleting = false, when deleting a row, it is immediately deleted from the dataProvider without changing the row status.

```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' }, checkded: 'true' },
  { 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
  },
  checkBar: {
    visible: true
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        gridView.setFocus();
      });
  }
}, {
  fields
});

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

function btnSetRowState() {
  const curr = gridView.getCurrent();
  const rbRowState = document.getElementsByName("rbRowState");
  let state;
  for (let i = 0; i < rbRowState.length; i++) {
    if (rbRowState[i].checked) {
      state = rbRowState[i].value;
    }
  }
  dataProvider.setRowState(curr.dataRow, state, true);
}

function btnSetRowStates() {
  const dataRows = gridView.getCheckedRows();
  const rbRowState = document.getElementsByName("rbRowState");
  let state;
  for (let i = 0; i < rbRowState.length; i++) {
    if (rbRowState[i].checked) {
      state = rbRowState[i].value;
    }
  }
  dataProvider.setRowStates(dataRows, state, true);
}

function btnRowStateArray() {
  let rows = null;
  const rbRowState = document.getElementsByName("rbRowStateArray");
  let state;
  for (let i = 0; i < rbRowState.length; i++) {
    if (rbRowState[i].checked) {
      state = rbRowState[i].value;
    }
  }

  if (!state || state === "all") {
    rows = dataProvider.getAllStateRows();
  } else {
    rows = dataProvider.getStateRows(state);
  }
  alert(JSON.stringify(rows));
}

function btnRowStateCount() {
  const rbRowState = document.getElementsByName("rbRowStateCount");
  let state;
  for (let i = 0; i < rbRowState.length; i++) {
    if (rbRowState[i].checked) {
      state = rbRowState[i].value;
    }
  }
  const count = dataProvider.getRowStateCount(state);
  alert(count);
}
```

#### Changing row status by user input

The status of the row can be changed by modifying the value displayed in the grid or by entering the key below.
`Ctrl` + `Del` (windows), `ctrl` + `fn` + `backspace` (mac): Delete current line or selected lines.
`Ins`: Insert a row at the current position
`Down Arrow`: Add row from last row

#### Changing row status by API

You can change the state of a row using [dataProvider.setRowState](/refs/realgrid#rowstate#row), [dataProvider.setRowStates](/refs/realgrid#rowstate#row).

**Row Status**

```js
var curr = gridView.getCurrent();
var state = $(':radio[name="rbRowState"]:checked').val();
dataProvider.setRowState(curr.dataRow, state, true);
```

```js
var dataRows = gridView.getCheckedRows();
var state = $(':radio[name="rbRowState"]:checked').val();
dataProvider.setRowStates(dataRows, state, true);
```

#### Get row number by row status

Get an array of row numbers of rows with status.

```js
var rows = null;
var state = $(':radio[name="rbRowStateArray"]:checked').val();
if (!state || state == "all") {
   rows = dataProvider.getAllStateRows(); // RowState.NONE is not included.
} else {
   rows = dataProvider.getStateRows(state);
}
alert(JSON.stringify(rows));
```

#### Get number of changed rows

Get the number of rows with status.

```js
var state = $(':radio[name="rbRowStateCount"]:checked').val();
var count = dataProvider.getRowStateCount(state);
alert(count);
```