External Form

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

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.

   Copy Code    {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.

   Copy Code    <form onSubmit={this.preventDefault}>
           <div style={{ marginBottom: '1rem' }}>
               <label>
                   Employee<br />
                   <input
                       type="text"
                       name="name"
                       className="k-textbox"
                       value={this.props.itemInEdit.name || ''}
                       onChange={this.onInputChange}
                   />
               </label>
           </div>
           <div style={{ marginBottom: '1rem' }}>
               <label>
                   Position<br />
                   <input
                       type="text"
                       name="position"
                       className="k-textbox"
                       value={this.props.itemInEdit.position || ''}
                       onChange={this.onInputChange}
                   />
               </label>
           </div>
           <div>
               <label>
                   <input
                       type="checkbox"
                       name="fullTime"
                       checked={this.props.itemInEdit.fullTime || false}
                       onChange={this.onInputChange}
                   />
                   Full Time
               </label>
           </div>
       </form>

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.

   Copy Code    export default class EditingDialog extends React.Component {
           onInputChange = (event) => {
               const { itemInEdit } = this.props;
               const input = event.target;
   
               // Will call the `onItemChange` function from the app.
               this.props.onChange.call(undefined, {
                   ...itemInEdit,
                   [input.name]: input.type === 'checkbox' ? input.checked : input.value
               });
           }
       }
   
       class App extends React.Component {
           onItemChange = (itemInEdit) => {
               this.setState({
                   itemInEdit
               });
           }
           ...
       }

Suggested Links

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