New to Kendo UI for Vue? Start a free 30-day trial

External Form

The data of the KendoVue 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.

  1. 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>
  1. 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>
  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.

In this article

Not finding the help you need?