Get node object from TreeView

[MN]

Is there a way to access the bound object in the nodeSelected event? or add some custom datafields to the datasource wich I can access from the (args: NodeSelectEventArgs) args.nodeData?

Using: Angular 9.

[Sowmiya Padmanaban]

Hi Marius,  

 

We have checked your reported query about Custom fields. In TreeView component, we have provided the htmlAttributes property, using this you can add the value or class name attributes in the node element. 

 

You can get the value in nodeselected() event. args.nodeData, only returns the initially bound data as it argument data. If you want to get the custom field data from the node element, you can simply get it using the selected node’s element using args.node as depicted in the following code sample. 

 

Refer the below code snippet. 

    public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild', htmlAttributes: 'hasAttribute' }; 

    public hierarchicalData: Object[] = [ 

        { id: '01', name: 'Local Disk (C:)', expanded: true,hasAttribute:{value :"node1"}, 

            subChild: [ 

                { 

                    id: '01-01', name: 'Program Files', 

                    subChild: [ 

                        { id: '01-01-01', name: 'Windows NT' }, 

                        { id: '01-01-02', name: 'Windows Mail' }, 

                        { id: '01-01-03', name: 'Windows Photo Viewer' }, 

                    ] 

                }, 

             ] 

    ]; 

nodeSelected(args) { 

      console.log(args.node.getAttribute("value")); 

} 

Refer the below sample link: 

https://stackblitz.com/edit/angular-wrag5m?file=app.component.ts 

 

To more about the TreeView component. Refer the below links. 

 

UG Documentation - https://ej2.syncfusion.com/angular/documentation/treeview/how-to/process-the-tree-node-operations-using-context-menu/ 

 

Demo link – https://ej2.syncfusion.com/angular/demos/#/material/treeview/default 

 

API Reference -https://ej2.syncfusion.com/angular/documentation/api/treeview/#nodeselected 

 

If we misunderstand your requirement, can you please share the additional details regarding your requirement. It will helpful for us to resolve your issue at earliest. 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P