You can validate the tree node text while editing using nodeEdited event of the TreeView. Following is an example that shows how to validate and prevent empty values in tree node.
ej.base.enableRipple(true);
/**
* TreeView node editing sample with validation
*/
// Hierarchical data source for TreeView component
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>
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head><body>
<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="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet">
<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>
</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%;
}
#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;
}