editing.html

<div class="col-lg-12 control-section">
    <div class="control_wrapper">
        <!-- Initialize TreeView -->
        <div id="tree"></div>
    </div>
</div>
<style>
    .control_wrapper {
        max-width: 500px;
        margin: auto;
        border: 1px solid #dddddd;
        border-radius: 3px;
    }
</style>

<div id="action-description">
    <p>This sample demonstrates the node editing functionalities of the TreeView. Double click on the node or press F2 key on selected node to edit node's text in input textbox. Press enter key or click outside of the input element to save the node's, or press escape key to cancel the modified text.</p>
</div>

<div id="description">
    <p>The <code>TreeView</code> component has the built-in option to edit and modify the node text in inline by enabling the <code>allowEditing</code> property.</p>
    <p>For more information, you can refer to the <a href="http://ej2.syncfusion.com/documentation/treeview/node-editing.html" target="_blank">Node Editing</a> section from the documentation.</p>
</div>