Example of Inline Editing in ASP.NET MVC Data Grid Control

In this demo, you can edit the currently selected record by changing the state of the corresponding record to edit. You can carry out the following CRUD operations:

Add - To add a new record, click the add toolbar button.
Edit - To edit record, double click a cell.
Delete - To delete a record, click the toolbar delete button after selecting a row.
Update and Cancel - Save or discard changes by clicking the toolbar update and cancel button respectively.

By default, a new row will be added at the top of the grid. You can change it by setting editSettings.newRowPosition as Bottom

DEMO

SOURCE

Add New Row Position

Grid supports CRUD operations. This CRUD operations can be configured using editSettingsopens in a new tab. It also has the following modes to manipulate the datasource.

Normal
Dialog
Batch

In the normal edit mode, when you start editing the currently selected record is changed to edit state. You can edit any row by double clicking it or clicking the toolbar’s Edit button. You can change the row values and save edited data to the data source.

In order to add a new record easily, the grid content always displays a blank "add new row". You can enable this feature by setting the showAddNewRow property of editSettings to true.

More information on the inline editing can be found in this documentation sectionopens in a new tab.