Editing Basics

Updated on Jun 29, 2026

The native Vue Grid by Kendo UI enables you to create, update, and delete data records.

Getting Started with Editing

To enable editing in the Grid:

1. Set the editField prop to the name of the boolean field that marks a row as active (for example, 'inEdit').
2. Handle the onRowclick event to set the clicked row as the active edit row.
3. Handle the onItemchange event to update the data when the user edits a cell value.
4. Configure the editor property on columns that require a specific input type ('date', 'numeric', or 'boolean').

The following example demonstrates a basic inline editing setup. Clicking a row opens it for editing, changing a cell value updates the data immediately, and the Add new toolbar button prepends a blank row in edit mode.

Change Theme

Theme

Loading ...

Edit Modes and Options

• Inline edit mode
• Inline editing with custom editors
• In-cell edit mode

Suggested Links

• API Reference of the Grid
• API Index of the Grid