/ TreeView / How To / Get all child nodes through parentID in treeview
Search results

Get all child nodes through parentID in treeview in Angular TreeView component

21 Dec 2022 / 2 minutes to read

This section demonstrates how to get the child nodes from corresponding parent ID. Using the getNode method, you can get the node details of TreeView. Please refer to the following sample.

Copied to clipboard
import { Component, Inject, ViewChild } from '@angular/core';
import { TreeViewComponent } from '@syncfusion/ej2-angular-navigations';
/**
 * Treeview sample for getting child details via parent ID
 */
@Component({
    selector: 'app-container',
    template: `<div id='treeparent'><ejs-treeview id='treeElement' #treevalidate [fields]='field' (created)='onCreate($event)' [loadOnDemand]=false></ejs-treeview></div><input type="text" class="e-input" id="Nodes" style="margin-left: 10px;margin-top:10px; width: 175px;" placeholder="Enter the parent ID( Ex: AS)" />
        <input type="button" class="btn btn-primary" value="Submit"id="btn" />`
})
export class AppComponent {

   // Data source for TreeView component
   public data: Object[] = [
        {
            code: "AF", name: "Africa", countries: [
                { code: "NGA", name: "Nigeria" },
                { code: "EGY", name: "Egypt" },
                { code: "ZAF", name: "South Africa" }
            ]
        },
        {
            code: "AS", name: "Asia", countries: [
                { code: "CHN", name: "China" },
                { code: "IND", name: "India" , countries: [
                    { code: "TN", name: "TamilNadu" }
                ]},
                { code: "JPN", name: "Japan" }
            ]
        },
        {
            code: "EU", name: "Europe", countries: [
                { code: "DNK", name: "Denmark" },
                { code: "FIN", name: "Finland" },
                { code: "AUT", name: "Austria" }
            ]
        },
        {
            code: "NA", name: "North America", countries: [
                { code: "USA", name: "United States of America" },
                { code: "CUB", name: "Cuba" },
                { code: "MEX", name: "Mexico" }
            ]
        },
        {
            code: "SA", name: "South America", countries: [
                { code: "BR", name: "Brazil" },
                { code: "COL", name: "Colombia" },
                { code: "ARG", name: "Argentina" }
            ]
        },
    ];

    public field:Object ={  dataSource: this.data, id: 'code', text: 'name', child: 'countries' };

    @ViewChild ('treevalidate') tree: TreeViewComponent;

    public onCreate(): void {
        let proxy = this.tree;
        document.getElementById("btn").addEventListener("click",(event)=>{
            let id = document.getElementById('Nodes').value
            let element= proxy.element.querySelector('[data-uid="' + id + '"]');
            // Gets the child Element
            let liElements = element.querySelectorAll('ul li');
            let arr= [];
            for (let i = 0; i < liElements.length; i++) {
                let nodeData= proxy.getNode(liElements[i]);
                arr.push(nodeData);
            }
            alert(JSON.stringify(arr));
        });
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { TreeViewModule } from '@syncfusion/ej2-angular-navigations';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule,TreeViewModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}

#wrapper {
    width: 350px;
    margin: 0 auto;
}

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