Modify row data

If the grid's gridView.editOptions.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()) and when they are completed stored in the DataProvider (dataProvider.onRowUpdated()). You can specify .

Developers can also allow the user to start editing via the GridView.beginUpdateRow() method.

To enable editing in a grid, you can use setEditOptions() to set the editable and updatable properties to true. The default value for that property is true.

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

For events that occur during editing, check Event occurrence order.

Start editing

Edit via beginUpdateRow()

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(), updateRows(), and updateRowsByDataRow.

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);
}

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);
}

Delete row Get row/cell data