
# Add or insert rows

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

1. How to add in DataProvider
2. 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](/guides/events/event-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.

- [addRow(values)](/refs/Class/LocalDataProvider#addrow)
- [insertRow(row, values)](/refs/Class/LocalDataProvider#insertrow)

#### Add data row


```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: {
    insertable: true,
    appendable: 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;

dataProvider.onRowInserting = function(provider, row) {
  console.log("1. onRowInserting event row = " + row);
};
dataProvider.onRowInserted = function(provider, row) {
  console.log("2. onRowInserted event row = " + row);
};
dataProvider.onRowCountChanged = function(provider, count) {
  console.log("3. onRowCountChangedEvent count = " + count);
};

function insertEmptyRow() {
  var row = gridView.getCurrent().dataRow;
  dataProvider.insertRow(row, {});
}

function insertRow() {
  var row = gridView.getCurrent().dataRow;
  var values = {KorName: "New Name", Gender: "New Gender", Phone: "New Phone", KorCountry: "New Investment Country"};
  dataProvider.insertRow(row, values);
}

function addEmptyRow() {
  var dataRow = dataProvider.addRow({});
  gridView.setCurrent({dataRow: dataRow});
}

function addRow() {
  var values = {KorName: "New Name", Gender: "New Gender", Phone: "New Phone", KorCountry: "New Investment Country"};
  var dataRow = dataProvider.addRow(values);
  gridView.setCurrent({dataRow: dataRow});
}
```

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

```js
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.

```js
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](/refs/Interface/EditOptions#edit).insertable is true, the user can start inserting rows with the Insert key. If [editOptions](/refs/Interface/EditOptions#edit).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.

```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: {
    insertable: true,
    appendable: 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;

dataProvider.onRowInserting = function(provider, row) {
  console.log("1. onRowInserting event row = " + row);
};
dataProvider.onRowInserted = function(provider, row) {
  console.log("2. onRowInserted event row = " + row);
};
dataProvider.onRowCountChanged = function(provider, count) {
  console.log("3. onRowCountChangedEvent count = " + count);
};

function insertEmptyRow() {
  var row = gridView.getCurrent().dataRow;
  dataProvider.insertRow(row, {});
}

function insertRow() {
  var row = gridView.getCurrent().dataRow;
  var values = {KorName: "New Name", Gender: "New Gender", Phone: "New Phone", KorCountry: "New Investment Country"};
  dataProvider.insertRow(row, values);
}

function addEmptyRow() {
  var dataRow = dataProvider.addRow({});
  gridView.setCurrent({dataRow: dataRow});
}

function addRow() {
  var values = {KorName: "New Name", Gender: "New Gender", Phone: "New Phone", KorCountry: "New Investment Country"};
  var dataRow = dataProvider.addRow(values);
  gridView.setCurrent({dataRow: dataRow});
}
```

#### Insert/Appendable Settings

To enable insertion and addition in a grid, the insertable and appendable properties must be set to true using [setEditOptions()](/refs/Class/GridBase#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.

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

#### Insert row

When [editOptions](/refs/Interface/EditOptions#edit).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()](/refs/Class/GridView#begininsertrow)

```js
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](/refs/Interface/EditOptions#edit).appendable is true, the user can add a row using the `Down Arrow` key in the last row.

Inserting a row via [beginAppendRow()](/refs/Class/GridView#beginappendrow)

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