Validate the text when renaming a tree node in EJ2 JavaScript TreeView control
28 Jan 20258 minutes to read
You can validate the text of a tree node while editing by using the nodeEdited event of the TreeView control. The following example demonstrates how to validate and prevent empty values in a tree node.
ej.base.enableRipple(true); /** * TreeView node editing sample with validation */ // Hierarchical data source for TreeView control var treeData = [ { id: 1, name: 'Discover Music', expanded: true, child: [ { id: 2, name: 'Hot Singles' }, { id: 3, name: 'Rising Artists' }, { id: 4, name: 'Live Music' } ] }, { id: 7, name: 'Sales and Events', child: [ { id: 8, name: '100 Albums - $5 Each' }, { id: 9, name: 'Hip-Hop and R&B Sale' }, { id: 10, name: 'CD Deals' } ] }, { id: 11, name: 'Categories', child: [ { id: 12, name: 'Songs' }, { id: 13, name: 'Bestselling Albums' }, { id: 14, name: 'New Releases' }, { id: 15, name: 'Bestselling Songs' } ] }, { id: 16, name: 'MP3 Albums', child: [ { id: 17, name: 'Rock' }, { id: 18, name: 'Gospel' }, { id: 19, name: 'Latin Music' }, { id: 20, name: 'Jazz' } ] }, { id: 21, name: 'More in Music', child: [ { id: 22, name: 'Music Trade-In' }, { id: 23, name: 'Redeem a Gift Card' }, { id: 24, name: 'Band T-Shirts' } ] } ]; // Render the TreeView with editing option var treeObj = new ej.navigations.TreeView({ fields: { dataSource: treeData, id: 'id', text: 'name', child: 'child' }, allowEditing: true, nodeEdited: onNodeEdited }); treeObj.appendTo('#tree'); function onNodeEdited(args) { var displayContent = ""; if (args.newText.trim() == "") { args.cancel = true; displayContent = "TreeView item text should not be empty"; } else if (args.newText != args.oldText) { displayContent = "TreeView item text edited successfully"; } else { displayContent = ""; } document.getElementById("display").innerHTML = displayContent; }<html lang="en"> <head> <title>Essential JS 2 for 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 TreeView UI Control"> <meta name="author" content="Syncfusion"> <link href="index.css" rel="stylesheet"> <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css" rel="stylesheet"> <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-inputs/styles/material.css" rel="stylesheet"> <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-navigations/styles/material.css" rel="stylesheet"> <script src="https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script> <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script> </head> <body> <div id="container"> <div id="treeparent"> <div id="tree"></div> <div id="display"></div> </div> </div> <script> var ele = document.getElementById('container'); if (ele) { ele.style.visibility = "visible"; } </script> <script src="index.js" type="text/javascript"></script> <style> #treeparent { display: block; max-width: 350px; max-height: 350px; margin: auto; overflow: auto; border: 1px solid #dddddd; border-radius: 3px; } #display { max-width: 500px; margin: auto; padding: 10px; } </style> </body> </html>#container { visibility: hidden; } #loader { color: #008cff; height: 40px; width: 30%; position: absolute; font-family: 'Helvetica Neue', 'calibiri'; font-size: 14px; top: 45%; left: 45%; }