External Form

Premium

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

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

   jsx

       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