Click Event To Show Name of Tree Elements

Question

I am trying to use jqxTree for an Angular project and so far, used the following to render the items in it:

HTML :

<jqxExpander [theme]="'material'" [width]="300" [height]="400"
             [showArrow]="false" [toggleMode]="'none'">
  <div>
    Folders
  </div>
  <div style="overflow: hidden;">
    <jqxTree [theme]="'material'" #treeReference
             [width]="'100%'" [height]="'100%'" [source]="treeSource">
    </jqxTree>
  </div>
</jqxExpander>

TypeScript :

 @ViewChild('treeReference') tree: jqxTreeComponent;
  ngAfterViewInit(): void {
      setTimeout(() => {
          this.tree.selectItem(null);
      });
  }

  treeSource: any[] =
  [
      {
          icon: "https://www.jqwidgets.com/angular/images/mailIcon.png", label: "Mail", expanded: true,
          items:
          [
              { icon: "https://www.jqwidgets.com/angular/images/calendarIcon.png", label: "Calendar" },
              { icon: "https://www.jqwidgets.com/angular/images/contactsIcon.png", label: "Contacts", selected: true }
          ]
      },
      {
          icon: "https://www.jqwidgets.com/angular/images/folder.png", label: "Inbox", expanded: true,
          items:
          [
              { icon: "https://www.jqwidgets.com/angular/images/folder.png", label: "Admin" },
              { icon: "https://www.jqwidgets.com/angular/images/folder.png", label: "Corporate" },
              { icon: "https://www.jqwidgets.com/angular/images/folder.png", label: "Finance" },
              { icon: "https://www.jqwidgets.com/angular/images/folder.png", label: "Other" },
          ]
      },
      { icon: "https://www.jqwidgets.com/angular/images/recycle.png", label: "Deleted Items" },
      { icon: "https://www.jqwidgets.com/angular/images/notesIcon.png", label: "Notes" },
      { iconsize: 14, icon: "https://www.jqwidgets.com/angular/images/settings.png", label: "Settings" },
      { icon: "https://www.jqwidgets.com/angular/images/favorites.png", label: "Favorites" }
  ];

What I am trying is to get the item or node name from the tree. Suppose, under Mail, it has two nodes Calendar and Contacts. If user clicks on Calendar, it should show the name Calendar in a alert box. I am not sure if the tree has click events for the items, tried to use a button to retrieve name from it as follows:

btnShowItem() {
   alert(this.tree.selectItem.name);
}

But the above only shows selectedItem in the alert box. Is there any appropriate way to retrieve the names of the items on click?

NB : Here's a link for testing - jqxTree

Answer 1

Try and look inside the JQXTreeComponent and look for a nodeName property. After that, you would need to make a method that would return the matching nodeName with the one that you clicked on. I'm not particularly familiar with JQX components, thus I can't say how you would loop through the nodes.