Add or insert rows

There are two ways to add/insert rows in RealGrid.

How to add in DataProvider
How to add in GridView

There are some differences between the two methods. The biggest difference is that in GridView, you can cancel adding a row by pressing the ESC key until the row is committed(). If a row has been completely added by commit(), it must be deleted by deleting the row. Another difference is that when adding rows in the DataProvider, pre-specified data can be added as well. Take a look at the demo below:

Check event occurrence order for events that occur when adding/inserting rows.

Add/Insert Rows in DataProvider

You can add a row to DataPrvoider using a blank row or information pre-entered by the developer. When a new row is added to the DataProvider, it is immediately reflected in the grids associated with it.

Functions for adding data

These are functions that can add one row to DataPrvoider using information entered by the user.

Add data row

Adds a new row at a specific row position in LocalDataProvider.

function insertEmptyRow() {
   var row = gridView.getCurrent().dataRow;
   dataProvider.insertRow(row, {});
   //gridView.showEditor(); //When you want to immediately display the editor
}
 
function insertRow() {
   var row = gridView.getCurrent().dataRow;
   var values = {KorName: "New name", Gender: "New gender", Phone: "New phone number", KorCountry: "New investment country"};
   dataProvider.insertRow(row, values);
   //gridView.showEditor(); //When you want to immediately display the editor
}

Add a new row after the last row in LocalDataProvider.

function addEmptyRow() {
   var dataRow = dataProvider.addRow({});
   gridView.setCurrent({dataRow: dataRow}); //Move focus to added row
   //setTimeout(function(){gridView.showEditor();}, 10); //When you want to immediately display the editor
}
 
function addRow() {
   var values = {KorName: "New name", Gender: "New gender", Phone: "New phone number", KorCountry: "New investment country"};
   var dataRow = dataProvider.addRow(values);
   gridView.setCurrent({dataRow: dataRow}); //Move focus to added row
   //setTimeout(function(){gridView.showEditor();}, 10); //When you want to immediately display the editor
}

Add/Insert row in GridView

If the grid's editOptions.insertable is true, the user can start inserting rows with the Insert key. If editOptions.appendable is true, you can start adding rows with the down arrow key on the last row. Pressing the Esc key while editing a cell cancels editing the cell, and pressing the Esc key while not editing a cell cancels adding a row.

It also allows developers to initiate inserting/adding users via javascript methods.

Insert/Appendable Settings

To enable insertion and addition in a grid, the insertable and appendable properties must be set to true using setEditOptions(). What you need to be aware of is that if this property is true, a blank row will be added when the user presses the Insert key or the down arrow key in the last row of the grid.

gridView.setEditOptions({
   insertable: true;
   appendable: true
});

Insert row

When editOptions.insertable is true, the user can insert rows with the Insert key. You can also insert a row with Shift + Insert Key, in which case a row will be added below the currently selected row.

Inserting a row via beginInsertRow()

function btnBeginInsertRow() {
   var curr = gridView.getCurrent();
   gridView.beginInsertRow(Math.max(0, curr.itemIndex));
   //setTimeout(function(){gridView.showEditor();}, 10); //When you want to immediately display the editor
}
 
function btnBeginInsertRowShift() {
   var curr = gridView.getCurrent();
   gridView.beginInsertRow(Math.max(0, curr.itemIndex), true);
   //setTimeout(function(){gridView.showEditor();}, 10); //When you want to immediately display the editor
}

Add row

When editOptions.appendable is true, the user can add a row using the Down Arrow key in the last row.

Inserting a row via beginAppendRow()

function btnBeginAppendRow() {
   gridView.beginAppendRow();
   //setTimeout(function(){gridView.showEditor();}, 10); //When you want to immediately display the editor
}

Scroll sync Delete row