New to KendoReact? Start a free 30-day trial

External Form

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

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

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

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

        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
                });
            }
            ...
        }

In this article

Not finding the help you need?