Editing

Editing is a basic functionality of the Kendo UI Grid wrapper for Vue and allows you to manipulate the way the Grid renders its data.

To configure the editing functionality of the native Vue Grid by Kendo UI, refer to the native Vue Grid by Kendo UI documentation.

Getting Started

To configure the dataSource for CRUD (Create, Read, Update, Destroy) data operations, use the built-in CRUD support of the Kendo UI DataSource component:

1. Create a dataSource object instance and configure the CRUD operations and the model for it by using :transport-read-url, :transport-update-url, :transport-destroy-url, :transport-create-url, the type, and so on.
2. Set the editable property of the Grid and reference the dataSource instance.

To enable the insertion of new records, enable the relevant option in the toolbar of the Kendo UI Data Grid wrapper for Vue. To enable the deletion of items, include a delete command column. For more information on editing, refer to the documentation of the Kendo UI Grid for jQuery.

Edit Modes

The Kendo UI Grid wrapper for Vue supports the following edit modes:

• Batch edit mode
• Inline edit mode
• Popup edit mode
• Validator edit mode
• Custom editing

Batch Editing

The following example demonstrates how to enable batch-editing operations by setting batch to true and using the data source settings of the Kendo UI Grid wrapper for Vue.

Inline Editing

The following example demonstrates how to perform inline editing by setting editable to inline.

Popup Editing

The following example demonstrates how to edit or insert new items by using a popup form and setting editable to popup.

Validator Editing

The following example demonstrates how to define any validation rule by setting the validation option of the data source schema-model-fields configuration. As a result, when the user edits a value in the Product Name column, the Grid forces a check for the first capital letter for the column.

Setting Custom Editors

The following example demonstrates how to implement a Kendo UI DropDownList as a custom column editor for the Grid by specifying the editor field of the Category column. The value of this field points to a Vue method which instantiates the column editor for the corresponding column cells.

Suggested Links

• Kendo UI Grid for jQuery
• API Reference of the Grid Widget
• Editing in the Native Vue Grid by Kendo UI