Validate text when editing tree nodes in Angular TreeView component

27 Aug 20258 minutes to read

You can validate the tree node text while editing using the nodeEdited event of the TreeView.

Prerequisites

To enable text validation functionality, ensure the TreeView component has the allowEditing property set to true. This property enables the built-in editing capability that allows users to modify node text by double-clicking or using keyboard shortcuts.

Validation process

The nodeEdited event provides a NodeEditEventArgs object containing essential properties for validation:

• newText: The updated text entered by the user
• oldText: The original text before editing
• cancel: Boolean property to prevent the edit operation when set to true
• node: Reference to the edited DOM element
• nodeData: The data object associated with the edited node

The following example demonstrates how to validate and prevent empty values in a tree node:

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { TreeViewModule, TreeViewComponent } from '@syncfusion/ej2-angular-navigations';
import { Component, ViewChild } from '@angular/core';
import { NodeEditEventArgs } from '@syncfusion/ej2-navigations';

@Component({
    imports: [
        FormsModule, TreeViewModule
    ],
    standalone: true,
    selector: 'app-container',
    // specifies the template string for the TreeView component
    template: `<div id='treeparent'><ejs-treeview id='treeElement' #treevalidate [fields]='field' [allowEditing]='allowEditing' (nodeEdited)='onNodeEdited($event)'></ejs-treeview></div>
        <div id="display"></div>`
})
export class AppComponent {
    @ViewChild('samples')
    public tree?: TreeViewComponent;

    constructor() {
    }
    // Hierarchical data source for TreeView component
    public hierarchicalData: Object[] = [
        {
            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' }
            ]
        }
    ];

    // Mapping TreeView fields property with data source properties
    public field: Object = { dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'child' };
    public allowEditing: boolean = true;
    @ViewChild('treevalidate') treevalidate?: TreeViewComponent;
    public onNodeEdited(args: NodeEditEventArgs): void {
        let displayContent: string = "";
        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") as HTMLElement).innerHTML = displayContent;
    }
}

styles.css

@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';

#treeparent {
    display: block;
    max-width: 400px;
    max-height: 320px;
    margin: auto;
    overflow: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
}

#display {
    max-width: 500px;
    margin: auto;
    padding: 10px;
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));