In order for the user to directly insert a new row in the existing ones, insertable of the grid GridBase.editOptions should be specified as true. Also, in order to append after the final row, appendable should be specified as true. The default values of the properties are both false.
First, in order to insert a row, you should move the focus to the row of the insert location and type insert (ctr+alt+I in mac) key. After typing, you can move the focus to another row with using arrow keys or mouse to commit inserting like Row Updating.
In the example below, it sets the default value with using DataColumn.defaultValue and defaultExpression properties.
(Please refer to Expression Overview page about the rand operator, etc.)
The entered row data will be transferred to GridDataSet, and after inserting the data row, GridDataSet.onRowInserted event will be fired. In addition, similarly to Row Updating, GridBase.onInserting event will be fired before start inserting the grid row, and if explicitly return false within this event handler, Row Inserting will be unable to get started.
grdMain.onInserting = function (grid, rowIndex) {
if ($('#chkEventInsertable').is(':checked')) {
return false;
}
};
If appendable is true, you can press down key in the last row to start appending the rows. The others like the event are the same as the case of inserting.
Also, like calling GridBase.edit to start Row Updating, you can call GridBase.insert and GridBase.append to start Row Inserting and Appending separately, and after Row Appending is committed and the data row is created with the value transferred to the data set, GridDataSet.onRowInserted event will be fired.
dsMain.onRowInserted = function (ds, row) {
console.log('Data row inserted at ' + row);
};