Search results

Node Editing

The TreeView allows you to edit nodes by setting the allowEditing property to true. To directly edit the nodes in place, double click the TreeView node or select the node and press F2 key.

When editing is completed by focus out or by pressing the Enter key, the modified node’s text saves automatically. If you do not want to save the modified node’s text in TreeView node, press Escape key. It does not save the edited text to the TreeView node.

  • Node editing can also be performed programmatically by using the beginEdit method. On passing the node ID or element through this method, the edit textbox will be created for the particular node thus allowing us to edit it.

  • If you need to validate or prevent editing, the nodeEditing event can be used which is triggered before the TreeView node is renamed. On successfully renaming a node the nodeEdited event will be triggered.

In the following example, the first level node’s text cannot be changed, but all other level nodes’ text can be changed.

Source
Preview
index.tsx
index.html
index.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {enableRipple} from '@syncfusion/ej2-base';
enableRipple(true);
import {TreeViewComponent} from '@syncfusion/ej2-react-navigations';
import { NodeEditEventArgs } from '@syncfusion/ej2-navigations';

export default class App extends React.Component<{}, {}> {
  // define the JSON of data
  private hierarchicalData: { [key: string]: Object }[] = [
    {
      id: '01',
      name: 'Local Disk(C:)',
      expanded: true,
      subChild: [
        {
          id: '01-01',
          name: 'Program Files',
          subChild: [
            { id: '01-01-01', name: '7-Zip' },
            { id: '01-01-02', name: 'Git' },
            { id: '01-01-03', name: 'IIS Express' }
          ]
        },
        {
          id: '01-02',
          name: 'Users',
          expanded: true,
          subChild: [
            { id: '01-02-01', name: 'Smith' },
            { id: '01-02-02', name: 'Public' },
            { id: '01-02-03', name: 'Admin' }
          ]
        },
        {
          id: '01-03',
          name: 'Windows',
          subChild: [
            { id: '01-03-01', name: 'Boot' },
            { id: '01-03-02', name: 'FileManager' },
            { id: '01-03-03', name: 'System32' }
          ]
        }
      ]
    },
    {
      id: '02',
      name: 'Local Disk(D:)',
      subChild: [
        {
          id: '02-01',
          name: 'Personals',
          subChild: [
            { id: '02-01-01', name: 'My photo.png' },
            { id: '02-01-02', name: 'Rental document.docx' },
            { id: '02-01-03', name: 'Pay slip.pdf' }
          ]
        },
        {
          id: '02-02',
          name: 'Projects',
          subChild: [
            { id: '02-02-01', name: 'ASP Application' },
            { id: '02-02-02', name: 'TypeScript Application' },
            { id: '02-02-03', name: 'React Application' }
          ]
        },
        {
          id: '02-03',
          name: 'Office',
          subChild: [
            { id: '02-03-01', name: 'Work details.docx' },
            { id: '02-03-02', name: 'Weekly report.docx' },
            { id: '02-03-03', name: 'Wish list.csv' }
          ]
        }
      ]
    },
    {
      id: '03',
      name: 'Local Disk(E:)',
      icon: 'folder',
      subChild: [
        {
          id: '03-01',
          name: 'Pictures',
          subChild: [
            { id: '03-01-01', name: 'Wind.jpg' },
            { id: '03-01-02', name: 'Stone.jpg' },
            { id: '03-01-03', name: 'Home.jpg' }
          ]
        },
        {
          id: '03-02',
          name: 'Documents',
          subChild: [
            { id: '03-02-01', name: 'Environment Pollution.docx' },
            { id: '03-02-02', name: 'Global Warming.ppt' },
            { id: '03-02-03', name: 'Social Network.pdf' }
          ]
        },
        {
          id: '03-03',
          name: 'Study Materials',
          subChild: [
            { id: '03-03-01', name: 'UI-Guide.pdf' },
            { id: '03-03-02', name: 'Tutorials.zip' },
            { id: '03-03-03', name: 'TypeScript.7z' }
          ]
        }
      ]
    }
  ];

  public fields: Object = {
    dataSource: this.hierarchicalData,
    id: 'id',
    text: 'name',
    child: 'subChild'
  };

  public allowEditing: boolean = true;

  public editing(args: NodeEditEventArgs): void {
    //check whether node is root node or not
    if ((args as any).node.parentNode.parentNode.nodeName !== 'LI') {
      args.cancel = true;
    }
  }

  render() {
    return (
      // specifies the tag for render the TreeView component
      <TreeViewComponent
        fields={this.fields}
        allowEditing={this.allowEditing}
        nodeEditing={this.editing.bind(this) as any}
      />
    );
  }
}
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React TreeView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="style.css" rel="stylesheet"/>
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='treeparent'>
        <div id='sample'>
            <div id='loader'>Loading....</div>
        </div>
    </div>
</body>

</html>
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
import { TreeViewComponent } from '@syncfusion/ej2-react-navigations';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        // define the JSON of data
        this.hierarchicalData = [
            {
                id: '01',
                name: 'Local Disk(C:)',
                expanded: true,
                subChild: [
                    {
                        id: '01-01',
                        name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: '7-Zip' },
                            { id: '01-01-02', name: 'Git' },
                            { id: '01-01-03', name: 'IIS Express' }
                        ]
                    },
                    {
                        id: '01-02',
                        name: 'Users',
                        expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' }
                        ]
                    },
                    {
                        id: '01-03',
                        name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' }
                        ]
                    }
                ]
            },
            {
                id: '02',
                name: 'Local Disk(D:)',
                subChild: [
                    {
                        id: '02-01',
                        name: 'Personals',
                        subChild: [
                            { id: '02-01-01', name: 'My photo.png' },
                            { id: '02-01-02', name: 'Rental document.docx' },
                            { id: '02-01-03', name: 'Pay slip.pdf' }
                        ]
                    },
                    {
                        id: '02-02',
                        name: 'Projects',
                        subChild: [
                            { id: '02-02-01', name: 'ASP Application' },
                            { id: '02-02-02', name: 'TypeScript Application' },
                            { id: '02-02-03', name: 'React Application' }
                        ]
                    },
                    {
                        id: '02-03',
                        name: 'Office',
                        subChild: [
                            { id: '02-03-01', name: 'Work details.docx' },
                            { id: '02-03-02', name: 'Weekly report.docx' },
                            { id: '02-03-03', name: 'Wish list.csv' }
                        ]
                    }
                ]
            },
            {
                id: '03',
                name: 'Local Disk(E:)',
                icon: 'folder',
                subChild: [
                    {
                        id: '03-01',
                        name: 'Pictures',
                        subChild: [
                            { id: '03-01-01', name: 'Wind.jpg' },
                            { id: '03-01-02', name: 'Stone.jpg' },
                            { id: '03-01-03', name: 'Home.jpg' }
                        ]
                    },
                    {
                        id: '03-02',
                        name: 'Documents',
                        subChild: [
                            { id: '03-02-01', name: 'Environment Pollution.docx' },
                            { id: '03-02-02', name: 'Global Warming.ppt' },
                            { id: '03-02-03', name: 'Social Network.pdf' }
                        ]
                    },
                    {
                        id: '03-03',
                        name: 'Study Materials',
                        subChild: [
                            { id: '03-03-01', name: 'UI-Guide.pdf' },
                            { id: '03-03-02', name: 'Tutorials.zip' },
                            { id: '03-03-03', name: 'TypeScript.7z' }
                        ]
                    }
                ]
            }
        ];
        this.fields = {
            dataSource: this.hierarchicalData,
            id: 'id',
            text: 'name',
            child: 'subChild'
        };
        this.allowEditing = true;
    }
    editing(args) {
        //check whether node is root node or not
        if (args.node.parentNode.parentNode.nodeName !== 'LI') {
            args.cancel = true;
        }
    }
    render() {
        return (
        // specifies the tag for render the TreeView component
        <TreeViewComponent fields={this.fields} allowEditing={this.allowEditing} nodeEditing={this.editing.bind(this)}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

See Also