Telerik UI for Windows 8 HTML

From Q2 2013 RadGrid offers full editing capabilities. Thanks to its built-in DataSource, you can implement most editing scenarios by just adjusting the controls settings.

Editing can be performed in three modes - row editing, single cell editing and batch cell editing. All are handled automatically by the RadGrid and its DataSource.

By providing a model for the fields in RadGrid, you can define which of them are editable and also which should be validated. Then RadGrid automatically performs validation and notifies the user about missing or invalid values.

This help article will introduce you to the prerequisites needed to enable editing in RadGrid and the control's behavior in create, update and delete scenarios.


To take advantage of the automatic editing capabilities of RadGrid, you need to first set its dataSource properly. This includes setting its create, update and destroy options, and providing a proper model for your data. You can find more detailed instructions here: Configuring Data Editing

Enabling RadGrid Editing

To enable basic editing in RadGrid, you need to set its editable.enabled option to true. When you do so, the cell editing mode will be triggered. The following behaviors related to insert, update and delete will be observed:


The service column will appear, displaying a plus icon. Upon clicking it, a new row will appear in RadGrid for insert. You can control where the insert item will appear, using the editable.createAt property. It accepts "top" and "bottom" values. However, you should have in mind that the newly inserted record is added at the bottom of your defined data source, so after the insert is done, the row will appear at the bottom of the RadGrid control.

To submit the newly inserted item, the user needs to do the following, based on the edit mode:

  • mode: "cell": The user needs to double-tap a cell from another row to trigger a submit.

  • mode: "cellBatch": The user needs to double-tap a cell from another row. Then, when all edits are done, tap the Save Changes button in the service column to submit the batch edit. Until this button is pressed, a Cancel action will delete the new row.

  • mode: "row": The user needs to double-tap another row to trigger a submit.


On double-clicking a cell, it will become editable. On the left, there is a big X button, which will cancel any changes you apply to the cell content. If you decide to save the changes you have made, double click another cell.

If there is a properly defined model for the data, the edit control that is rendered in the cell will be determined by the data type of the underlying field. The possible scenarios are:

  • numeric fields use RadNumericBox.

  • date fields use RadDatePicker.

  • boolean fields use a checkbox.

  • string fields use a regular input.

If there are validation rules defined for a field, if the new valie does not fulfill them, a popup with validation message will appear and the cell will not exit edit mode, until its content is corrected.

Once a cell is edited, it is marked with a colored triangle at the top right corner. This way, the end-user can easily see which cells have been edited.

The behavior for this and other edit modes is described here: Edit Modes.


When you enable row editing in RadGrid (set editable.mode to "row") and the control enters edit mode, apart from the Cancel button, a Delete button appears. Its icon is a trash can and upon clicking it, a confirmation message will be displayed next to it. If the user taps the icon or the message, the record will be deleted.


Note that as of Q2 2013, when a cell or row is put in edit mode, selection is automatically disabled and all selected items are cleared. Once the cell editor is closed selection is turned back on without restoring previously selected items.

See Also