# External Form Edit Mode

The Kendo UI for Vue TreeList provides options for CRUD(create, read, update and delete) operation over the data it displays.

The current article covers the scenario in which the data of the TreeList component is edited using an external popup form.

## External Form Edit Mode Configuration

The below example demonstrates how we can configure the TreeList to work in `External form` edit mode.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/treelist/editing-external-form/source.txt)

The following example utilizes the Kendo UI for Vue [Dialog](https://www.telerik.com/kendo-vue-ui-develop/components/dialogs/dialog) as a modal form for editing the data of the TreeList. Here are some of the main points in the implementation of the above example:

1. When a record is in edit mode, show the editing dialog and pass the edited item to it.

   ```jsx
   <DialogContainer v-if="itemInEdit" 
       :data-item="itemInEdit"
       @change="onItemChange"
       @save="save" @cancel="cancel">
   </DialogContainer>
   ```

2. Define the template of the `DialogContainer`.

   ```jsx
   <KDialog @close="cancel">
     <div class="k-form k-form-horizontal">
       <div class="k-form-field">
         <label for="Employee" class="k-form-label">Employee Name</label>
         <div class="k-form-field-wrap">
           <KInput
             :style="{ width: '230px' }"
             :name="'Employee'"
             v-model="employeeInEdit.name"
           ></KInput>
         </div>
       </div>
       <div class="k-form-field">
         <label for="Position" class="k-form-label">Position</label>
         <div class="k-form-field-wrap">
           <KInput
             :style="{ width: '230px' }"
             :name="'Position'"
             v-model="employeeInEdit.position"
           ></KInput>
         </div>
       </div>
       <div class="k-form-field">
         <KLabel :editor-id="'FullTime'"> FullTime </KLabel>
         <div class="k-form-field-wrap">
           <span>
             <checkbox
               :name="'FullTime'"
               :id="'fullTime'"
               v-model="employeeInEdit.fullTime"
             />
           </span>
         </div>
       </div>
     </div>
     <DialogActionsBar>
       <KButton @click="cancel"> Cancel </KButton>
       <KButton :theme-color="'primary'" @click="save"> Save </KButton>
     </DialogActionsBar>
   </KDialog>
   ```

3. Handle the `save` and `cancel` events in the **DialogContainer.vue** file. To update the TreeList edited item, update the `itemInEdit` property in the application state of the TreeList.

   ```jsx
   cancel() {
       this.$emit('cancel');
   },
   save() {
       this.$emit('save', this.employeeInEdit);
   }
   ```

## Suggested Links

* [API Reference of the TreeList](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistprops)
* [API Reference of the TreeListToolbar](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelisttoolbarprops)
* [API Index of the TreeList](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api)