New to Kendo UI for Vue? Start a free 30-day trial
External Form
The data of the Kendo UI for Vue Native Grid can be edited by using an external form.
Example
View Source
Change Theme:
Setup
The following example utilizes the Kendo UI for Vue Dialog as a modal form for editing the data of the Grid.
- When a record is in edit mode, show the container and pass the edited item to the DialogContainer component.
<dialog-container v-if="productInEdit" :data-item="productInEdit" @save="save" @cancel="cancel">
</dialog-container>- Inside DialogContainer, bind the editors to the value of the row data with v-model.
<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>- 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.
