External Form

Premium

Updated on Jan 8, 2026

The data of the KendoReact TreeList can be edited by using an external form.

Change Theme

Theme

Loading ...

Setup

The following example utilizes the KendoReact Dialog as a modal form for editing the data of the TreeList.

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

   jsx

       {this.state.itemInEdit &&
           <EditingDialog
               itemInEdit={this.state.itemInEdit}
               onChange={this.onItemChange}
               save={this.save}
               cancel={this.cancel}
           />
       }

2. Inside EditingDialog, bind the editors to the value of the row data.

   jsx

       <FormElement>
           <FieldWrapper>
               <Label editorId={'Employee'} className={'k-form-label'}>
                   {'Employee'}
               </Label>
               <div className={'k-form-field-wrap'}>
                   <Field name={'name'} id={'Employee'} component={TextBox} />
               </div>
           </FieldWrapper>
           <FieldWrapper>
               <Label editorId={'Position'} className={'k-form-label'}>
                   {'Position'}
               </Label>
               <div className={'k-form-field-wrap'}>
                   <Field name="position" id={'Position'} component={TextBox} />
               </div>
           </FieldWrapper>
           <FieldWrapper>
               <Label editorId={'fullTime'} className={'k-checkbox-label'}>
                   <div className={'k-form-field-wrap'}>
                       <Field name="fullTime" id={'fullTime'} component={Checkbox} />
                   </div>
                   {'Full Time'}
               </Label>
           </FieldWrapper>
       </FormElement>

3. Handle the change events of the editors. To update the TreeList edited item, update the itemInEdit property in the application state of the TreeList.

   jsx

       const EditingDialog = (props) => {
           const onInputChange = (event) => {
               const { itemInEdit } = props;
               const input = event.target;
   
               // Will call the `onItemChange` function from the app.
               props.onChange({
                   ...itemInEdit,
                   [input.name]: input.type === 'checkbox' ? input.checked : input.value
               });
           }
       }
   
       const App = () => {
           const [itemInEdit, setItemInEdit] = useState(null);
   
           const onItemChange = (itemInEdit) => {
               setItemInEdit(itemInEdit);
           }
           ...
       }

Suggested Links

• API Reference of the TreeList
• API Reference of the TreeListToolbar
• API Index of the TreeList