
# Edit grid

RealGrid2's powerful editing features have the advantage of allowing users to edit data directly in the grid. Changed data is immediately stored in the DataProvider, and the changed data can also be sent to the server using the event (callback) function at the time of change.

The option to set the edit function is [EditOptions](/refs/Interface/EditOptions#editable) and the function to set this option is [setEditOptions()](/refs/Class/GridBase#seteditoptions) in GridView.

## Modify data

By default, RelaGrid2 has the option to directly edit cell data, so editing is possible by entering a different value using the keyboard on the cell or double-clicking the cell with the mouse. However, at this time, the `readonly` property of the column must be set to `false`.

For detailed practice on data modification, refer to the [Cell Data Modification](/guides/crud/set-values) guide.

## Add or insert data rows

To add a new row at the end of the data or insert a new row between existing rows, you must modify the EditOptions property as shown below.

- Add new line at the end: [EditOptions.appendable](/refs/Interface/EditOptions#appendable)
- Insert new row between existing rows: [EditOptions.insertable](/refs/Interface/EditOptions#insertable)

```js
gridView.editOptions.insertable = true;
gridView.editOptions.appendable = true;
```

```js
document.addEventListener('DOMContentLoaded', function () {
  // 설치
  const container = document.getElementById('realgrid');
  const provider = new RealGrid.LocalDataProvider(false);
  const gridView = new RealGrid.GridView(container);
  gridView.setDataSource(provider);

  gridView.editOptions.insertable = true;
  gridView.editOptions.appendable = true;

  // 필드 생성
  provider.setFields([
    {
      fieldName: "KorName",
      dataType: "text",
    },
    {
      fieldName: "Gender",
      dataType: "text",
    },
    {
      fieldName: "Age",
      dataType: "number",
    },
  ]);

  // 컬럼 생성
  gridView.setColumns([
    {
      name: "KorNameColumn",
      fieldName: "KorName",
      width: "100",
      header: {
        text: "이름",
      },
    },
    {
      name: "GenderColumn",
      fieldName: "Gender",
      width: "70",
      header: {
        text: "성별",
      },
    },
    {
      name: "AgeColumn",
      fieldName: "Age",
      width: "60",
      numberFormat: "00",
      header: {
        text: "나이",
      },
    },
  ]);

  // 데이터 채우기
  provider.setRows([
    {
      KorName: "박영호",
      Gender: "남",
      Age: "71",
    },
    {
      KorName: "조일형",
      Gender: "남",
      Age: "62",
    },
    {
      KorName: "김덕중",
      Gender: "여",
      Age: "53",
    },
    {
      KorName: "국영석",
      Gender: "남",
      Age: "63",
    },
    {
      KorName: "성노식",
      Gender: "남",
      Age: "66",
    },
    {
      KorName: "김진영",
      Gender: "남",
      Age: "29",
    },
    {
      KorName: "전우수",
      Gender: "여",
      Age: "73",
    },
  ]);
  
});
```

For a detailed demo on adding and modifying data, see the [Add or Insert Data](/guides/crud/insert) guide.

## Delete data row

There are two ways to delete data from the grid: physically deleting it from the DataProvider or hiding the deleted data from the GridView.

Deleting from the grid is possible by setting the [EditOptions.editable](/refs/Interface/EditOptions#deletable) option to `true`.

How to delete a row from grid

- Delete by pressing `Ctrl`+`Del` (windows) or `ctrl` + `fn` + `backspace` (mac).
- Use GridView’s [deleteSelection()](/refs/Class/GridBase#deleteselection) function
- Use the DataProvider's [removeRow()](/refs/Class/LocalDataProvider#removerow) or [removeRows()](/refs/Class/LocalDataProvider#removerows) function

There is this.

For a demo on deletion, see the [Data Deletion](/guides/crud/delete) guide.