
# Modify row data

If the grid's [gridView.editOptions](/refs/Interface/EditOptions#edit).editable is true, the user can edit the row. You can cancel cell editing by pressing the Esc key while editing, and if you press the Esc key while not editing a cell, row editing is canceled.
In addition, callbacks are made at the point when the edited values are delivered to the DataProvider ([dataProvider.onRowUpdating()](/refs/Class/LocalTreeDataProvider#onrowupdating)) and when they are completed stored in the DataProvider ([dataProvider.onRowUpdated()](/refs/Class/LocalTreeDataProvider#onrowupdated)). You can specify .

Developers can also allow the user to start editing via the [GridView.beginUpdateRow()](/refs/Class/GridView#beginupdaterow) method.

To enable editing in a grid, you can use [setEditOptions()](/refs/Class/GridBase#seteditoptions) to set the editable and updatable properties to true. The default value for that property is true.

```js
gridView.editOptions.editable = true;
gridView.editOptions.updatable = true;
```

> For events that occur during editing, check [Event occurrence order](/guides/events/event-order).

```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"
    }
  },
  {
    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"
    }
  },
  {
    name: "Month",
    fieldName: "Month",
    width: "50",
    header: {
      text: "Remaining Count"
    }
  },
  {
    name: "InterestRate",
    fieldName: "InterestRate",
    width: "50",
    numberFormat: "0.00",
    header: {
      text: "Interest Rate"
    }
  },
  {
    name: "SaveCost",
    fieldName: "SaveCost",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Payment Amount"
    },
    footer: {
      text: "Total =>"
    }
  },
  {
    name: "SaveMaturity",
    fieldName: "SaveMaturity",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Maturity Amount"
    },
    footer: {
      text: "Total",
      expression: "sum",
      groupExpression: "sum"
    }
  },
  {
    name: "CurrentSave",
    fieldName: "CurrentSave",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Current Balance"
    }
  }
];

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

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

function btnBeginUpdateRow() {
  var curr = gridView.getCurrent();
  gridView.beginUpdateRow(curr.itemIndex);
  gridView.showEditor();
  gridView.setFocus();
}

function btnUpdateRow() {
  gridView.commit(true);
  var curr = gridView.getCurrent();
  dataProvider.updateRow(curr.dataRow, {KorName: "Edit Name", Gender: "Edit", Age: 0, Phone: "Edit Phone", ProductId: "Edit Product ID", KorCountry: "Edit Investment Country"});
}

function btnUpdateRows() {
  gridView.commit(true);
  var curr = gridView.getCurrent();
  var datas = [
    {KorName: "EditName0", Gender: "Edit0", Age: 0, Phone: "EditPhone0", ProductId: "EditProductID0", KorCountry: "EditInvCountry0"},
    {KorName: "EditName1", Gender: "Edit1", Age: 1, Phone: "EditPhone1", ProductId: "EditProductID1", KorCountry: "EditInvCountry1"},
    {KorName: "EditName2", Gender: "Edit2", Age: 2, Phone: "EditPhone2", ProductId: "EditProductID2", KorCountry: "EditInvCountry2"},
    {KorName: "EditName3", Gender: "Edit3", Age: 3, Phone: "EditPhone3", ProductId: "EditProductID3", KorCountry: "EditInvCountry3"}
  ];
  dataProvider.updateRows(curr.dataRow, datas, 0);
}

function btnUpdateRowsByDataRow() {
  gridView.commit(true);
  var datas = {
    5: {KorName: "EditName5", Gender: "Edit6", Age: 6, Phone: "EditPhone6", ProductId: "EditProductID6", KorCountry: "EditInvCountry6"},
    7: {KorName: "EditName8", Gender: "Edit8", Age: 8, Phone: "EditPhone8", ProductId: "EditProductID8", KorCountry: "EditInvCountry8"}
  };
  dataProvider.updateRowsByDataRow(datas);
}
```

#### Start editing

Edit via [beginUpdateRow()](/refs/Class/GridView#beginupdaterow)

```js
function btnBeginUpdateRow() {
   var curr = gridView.getCurrent();
   gridView.beginUpdateRow(curr.itemIndex);
   gridView.showEditor();
   gridView.setFocus();
}
```

#### Modify row data, modify multiple row data

If you need to modify cell data, you can modify single column cell data using setValue(), etc., but you can also modify row data in batches using [updateRow()](/refs/Class/LocalDataProvider#updaterow), [updateRows()](/refs/Class/LocalDataProvider#updaterows), and [updateRowsByDataRow](/refs/Class/LocalDataProvider#updaterowsbydatarow).

```js
function btnUpdateRow() {
   var curr = gridView.getCurrent();
   dataProvider.updateRow(curr.dataRow, {KorName: "Edited Name", Gender: "Edited", Age: 0, Phone: "Edited Phone Number", ProductId: "Edited Product Number", KorCountry: "Edited Investment Country"} );
}

function btnUpdateRows() {
   var curr = gridView.getCurrent();
   vardatas = [
     {KorName: "Edited Name 0", Gender: "Edited 0", Age: 0, Phone: "Edited Phone Number 0", ProductId: "Edited Product Number 0", KorCountry: "Edited Investment Country 0"},
     {KorName: "Edited Name1", Gender: "Edited1", Age: 0, Phone: "Edited Phone Number1", ProductId: "Edited Product Number1", KorCountry: "Edited Investment Country 1"},
     {KorName: "Sujeong Name 2", Gender: "Sujeong 2", Age: 0, Phone: "Sujeong Phone Number 2", ProductId: "Sujeong Product Number 2", KorCountry: "Sujeong Investment Country 2"},
     {KorName: "Sujeong Name 3", Gender: "Sujeong 3", Age: 0, Phone: "Sujeong Phone Number 3", ProductId: "Sujeong Product Number 3", KorCountry: "Sujeong Investment Country 3"},
   ]

   dataProvider.updateRows(curr.dataRow, datas, 0);
}
```

```js
function btnUpdateRowsByDataRow() {
   var curr = gridView.getCurrent();
   vardata = {
     6: {KorName: "Sujeong Name 6", Gender: "Sujeong 6", Age: 6, Phone: "Sujeong Phone Number 6", ProductId: "Sujeong Product Number 6", KorCountry: "Sujeong Investment Country 6"},
     8: {KorName: "Sujeong Name 8", Gender: "Sujeong 8", Age: 8, Phone: "Sujeong Phone Number 8", ProductId: "Sujeong Product Number 8", KorCountry: "Sujeong Investment Country 8"}
   }

   dataProvider.updateRowsByDataRow(datas);
}
```