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.
To configure the
dataSource for CRUD (Create, Read, Update, Destroy) data operations, use the built-in CRUD support of the Kendo UI DataSource component:
- Create a
dataSourceobject instance and configure the CRUD operations and the model for it by using
:transport-create-url, the type, and so on.
- Set the
editableproperty of the Grid and reference the
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.
The Kendo UI Grid wrapper for Vue supports the following edit modes:
The following example demonstrates how to enable batch-editing operations by setting
true and using the data source settings of the Kendo UI Grid wrapper for Vue.
The following example demonstrates how to perform inline editing by setting
The following example demonstrates how to edit or insert new items by using a popup form and setting
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.
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.