Environment

ProductProgress® KendoReact

Description

How to edit the TreeView nodes.

Solution

This can be achieved, by using the itemRender to render an input bound to the node value on click.

import React from 'react';
import ReactDOM from 'react-dom';

import { TreeView, processTreeViewItems, handleTreeViewCheckChange, moveTreeViewItem, TreeViewDragAnalyzer, TreeViewDragClue } from '@progress/kendo-react-treeview'
import '@progress/kendo-react-animation'

const tree = [{
  text: 'Furniture', expanded: true, items: [
    { text: 'Tables & Chairs' }, { text: 'Sofas' }, { text: 'Occasional Furniture' }]
}, {
  text: 'Decor', items: [
    { text: 'Bed Linen' }, { text: 'Curtains & Blinds' }, { text: 'Carpets' }]
}];

class App extends React.Component {
  render() {
    document.querySelector('.k-textbox')
    return (
      <TreeView
        data={tree}
        expandIcons={true}
        itemRender={this.itemRender}
        onExpandChange={this.onExpandChange}
        onItemClick={this.onItemClick}
      />
    );
  }

  handleChange = (e, item) => {
    item.text = e.target.value;
    this.forceUpdate();
  }

  handleBlur = (e, item) => {
    item.edit = false;
    this.forceUpdate();
  }

  itemRender = (props) => {
    if (props.item.edit) {
      return (
        <span>
          <input className='k-textbox'
            autoFocus
            value={props.item.text}
            onChange={(e) => this.handleChange(e, props.item)}
            onBlur={(e) => this.handleBlur(e, props.item)} />
        </span>
      )
    }
    return <span>{props.item.text}</span>
  }
  onItemClick = (event) => {
    event.item.edit = true;
    this.forceUpdate();
  }
  onExpandChange = (event) => {
    event.item.expanded = !event.item.expanded;
    this.forceUpdate();
  }
}

ReactDOM.render(
  <App />,
  document.querySelector('my-app')
);
 /