editing

Configures editing.

Type:

Object

The widget can allow a user to add, update and delete data. To control which of these operations are allowed, use the allowAdding, allowUpdating and allowDeleting options. Editing can be carried out in different modes, which are detailed in the mode option's description.

NOTE
Before allowing a user to add, update, and delete, make sure that your data source supports these actions.

View Demo

See Also
Show Example:
AngularJS
Knockout
jQuery

In this example, you can perform all kinds of data modifications available in the DataGrid widget: row editing, insertion and removal. These operations are conducted in the batch edit mode. All these settings are specified using the fields of the editing configuration object.


                                    

                                    

In this example, you can perform all kinds of data modifications available in the DataGrid widget: row editing, insertion and removal. These operations are conducted in the batch edit mode. All these settings are specified using the fields of the editing configuration object.


                                    

                                    

In this example, you can perform all kinds of data modifications available in the DataGrid widget: row editing, insertion and removal. These operations are conducted in the batch edit mode. All these settings are specified using the fields of the editing configuration object.


                                    

                                    

allowAdding

Specifies whether a user can add new rows.

Type:

Boolean

Default Value: false
See Also
Show Example:
AngularJS
Knockout
jQuery

In this example, you can change the value of the allowAdding option at runtime using the check box below. If this option is true, the grid is supplied with a button that inserts a new record into the grid. Otherwise, this button is hidden, and you cannot insert records into the grid.


                                    

                                    

In this example, you can change the value of the allowAdding option at runtime using the check box below. If this option is true, the grid is supplied with a button that inserts a new record into the grid. Otherwise, this button is hidden, and you cannot insert records into the grid.


                                    

                                    

In this example, you can change the value of the allowAdding option at runtime using the check box below. If this option is true, the grid is supplied with a button that inserts a new record into the grid. Otherwise, this button is hidden, and you cannot insert records into the grid.


                                    

                                    

allowDeleting

Specifies whether a user can delete rows.

Type:

Boolean

Default Value: false

Show Example:
AngularJS
Knockout
jQuery

In this example, you can change the value of the allowDeleting option at runtime using the check box below. If this option is true, the grid is supplied with an additional column that contains "Delete" buttons enabling you to delete grid records. Otherwise, this column is hidden, and the grid records cannot be deleted.


                                    

                                    

In this example, you can change the value of the allowDeleting option at runtime using the check box below. If this option is true, the grid is supplied with an additional column that contains "Delete" buttons enabling you to delete grid records. Otherwise, this column is hidden, and the grid records cannot be deleted.


                                    

                                    

In this example, you can change the value of the allowDeleting option at runtime using the check box below. If this option is true, the grid is supplied with an additional column that contains "Delete" buttons enabling you to delete grid records. Otherwise, this column is hidden, and the grid records cannot be deleted.


                                    

                                    

allowUpdating

Specifies whether a user can update rows.

Type:

Boolean

Default Value: false

Show Example:
AngularJS
Knockout
jQuery

In this example, you can change the value of the allowUpdating option at runtime using the check box below. If this option is true, the grid is supplied with an additional column that contains "Edit" buttons enabling you to edit grid records. Otherwise, this column is hidden, and the grid records cannot be edited.


                                    

                                    

In this example, you can change the value of the allowUpdating option at runtime using the check box below. If this option is true, the grid is supplied with an additional column that contains "Edit" buttons enabling you to edit grid records. Otherwise, this column is hidden, and the grid records cannot be edited.


                                    

                                    

In this example, you can change the value of the allowUpdating option at runtime using the check box below. If this option is true, the grid is supplied with an additional column that contains "Edit" buttons enabling you to edit grid records. Otherwise, this column is hidden, and the grid records cannot be edited.


                                    

                                    

editEnabled

Deprecated

Use the allowUpdating option instead.

editMode

Deprecated

Use the mode option instead.

form

Configures the form. Used only if editing.mode is "form" or "popup".

Default form editors depend on the columns' configuration. If the generated form does not meet your requirements, and you need to reorganize form items or set other form parameters, specify it in the form option. To link a form item with a grid column, assign identical values to the form.items.dataField and columns.dataField options.

NOTE

There are some form parameters that you cannot specify using this option:

See Also
Show Example:
jQuery

insertEnabled

Deprecated

Use the allowAdding option instead.

mode

Specifies how a user edits data.

Type:

String

Default Value: 'row'
Accepted Values: 'row' | 'batch' | 'cell' | 'form' | 'popup'

The following list points out the differences in editing modes.

  • Row
    A user edits one row at a time. The widget saves changes when the row leaves the editing state. See Row Mode.
  • Batch
    A user edits data cell by cell. The widget does not save changes until a user clicks the global "Save" button. See Batch Mode.
  • Cell
    Differs from the batch mode in that the widget saves changes when the cell leaves the editing state. See Cell Mode.
  • Form
    On entering the editing state, a row becomes a form with editable fields. The widget saves changes after a user clicks the "Save" button. See Form Mode.
  • Popup
    Differs from the form mode in that the form with editable fields is placed in a popup window. See Popup Mode.

When using the widget as an ASP.NET MVC Control, specify this option using the GridEditMode enum. This enum accepts the following values: Row, Batch, Cell, Form and Popup.

Row Editing Demo Batch Editing Demo Cell Editing Demo Form Editing Demo

Show Example:
AngularJS
Knockout
jQuery

In this example, you can try all edit modes presented in the DataGrid widget. To change the current edit mode, choose the required item from the drop-down menu under the grid.


                                    

                                    

In this example, you can try all edit modes presented in the DataGrid widget. To change the current edit mode, choose the required item from the drop-down menu under the grid.


                                    

                                    

In this example, you can try all edit modes presented in the DataGrid widget. To change the current edit mode, choose the required item from the drop-down menu under the grid.


                                    

                                    

popup

Configures the popup. Used only if editing.mode is "popup".

The popup always contains a form, whose items are used for editing. The popup object contains options that customize the popup itself (see their list in the Popup Configuration section). To customize the form items, use the form option.

View Demo

removeEnabled

Deprecated

Use the allowDeleting option instead.

texts

Contains options that specify texts for editing-related UI elements.

Type:

Object

Show Example:
AngularJS
Knockout
jQuery

In this example, several options of the editing.texts configuration object are changed.


                                    

                                    

In this example, several options of the editing.texts configuration object are changed.


                                    

                                    

In this example, several options of the editing.texts configuration object are changed.