External Form

Updated on Jun 29, 2026

The data of the Kendo UI for Vue Native Grid can be edited by using an external form.

The following example utilizes the Kendo UI for Vue Dialog as a modal form for editing the data of the Grid.

Change Theme

Theme

Loading ...

Implementing External Form Editing

To implement the external form editing mode, follow these steps:

1. When a record is in edit mode, show the container and pass the edited item to the DialogContainer component.

html

 <dialog-container v-if="productInEdit" :data-item="productInEdit" @save="save" @cancel="cancel">
    </dialog-container>

1. Inside DialogContainer, bind the editors to the value of the row data with v-model.

html

<k-dialog @close="cancel">
                <div :style="{ marginBottom: '1rem' }">
                    <label>
                    Product Name<br />
                    <k-input
                        type="text"
                        :name="'ProductName'"
                        v-model= "productInEdit.ProductName"
                    ></k-input>
                    </label>
                </div>
                <div :style="{ marginBottom: '1rem' }">
                    <label>
                    Units In Stock<br />
                    <numerictextbox
                        :name="'UnitsInStock'"
                        v-model="productInEdit.UnitsInStock"
                    ></numerictextbox>
                    </label>
                </div>
                <div>
                    <label>
                        <input
                            type="checkbox"
                            :name="'Discontinued'"
                            v-model="productInEdit.Discontinued"
                        />
                        Discontinued product
                    </label>
                </div>
            <dialog-actions-bar>
                <button
                    class="k-button"
                    @click="cancel"
                >
                    Cancel
                </button>
                <button
                    class="k-button k-primary"
                    @click="save"
                >
                    Save
                </button>
            </dialog-actions-bar>
        </k-dialog>

1. To improve its performance, the Grid refreshes its data on each Update button click. To update the Grid on type, directly update the data state of the Grid on change.

Suggested Links

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