How to trigger wijmo tree view custom node content event click action?

How to trigger wijmo tree view custom node content event click action?

Posted by: ramu on 15 May 2019, 11:04 pm EST

• 

  ramu

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 15 May 2019, 11:04 pm EST - Updated 3 October 2022, 11:03 am EST

  Hi,

  I have used Wijmo 5.20171.282 version.

  My application used Angular 2.X version.

  I want to trigger my method while clicking the hyperlink text (i.e. Send for approval) in custom node content in the tree view.

  Right now while clicking the node its highlighted the node item.

  Refer my screen shot and code snippet
  
  // in html

  <wj-tree-view #tv
  
  [ngClass]=“useCustomCss?‘custom-tree’:‘’”
  
  [itemsSource]=“items”
  
  [displayMemberPath]=“‘header’”
  
  [childItemsPath]=“‘items’”
  
  [isContentHtml]=“true”
  
  [autoCollapse]=“true”
  
  [expandOnClick]=“true”
  
  (itemClicked)=“treeview_ItemClicked(tv)”
  
  (lostFocus)=“treeview_LostFocus()”
  
  (formatItem)=“formatItem(tv, $event)”>
  
  

  // in component.ts
  
  formatItem(treeView: wjcNav.TreeView, e: wjcNav.FormatNodeEventArgs) {
  
  if (e.dataItem.Draft) {
  
  e.element.innerHTML +=
  
  ‘<a style=“font-size:13px; margin-left:5px; text-decoration:underline;” (click)=“openSendForApproval()”>(Send for approval)’;
  
  }
  
  }

  openSendForApproval() {
  
  alert(‘clicked send for approval link’);
  
  }

  

  864×540 8.63 KB

  Thanks,
  
  Ramu

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 16 May 2019, 8:26 pm EST

  Hi Ramu,

  The issue in the above code is that angular you are assigning innerHTML directly to HTMLElement so angular event binding syntax won’t work. You need to attach click event using the addEventListener method. Please refer to the following code snippet:

  // in component.ts
  formatItem = (treeView: wjcNav.TreeView, e: wjcNav.FormatNodeEventArgs) => {
  if (e.dataItem.Draft) {
  e.element.innerHTML +=
  '<a class="my-anchor-tag" style="font-size:13px; margin-left:5px; text-decoration:underline;">(Send for approval)</a>';
  let anchorEl = e.element.querySelector('.my-anchor-tag');
  anchorEl.addEventListener('click', ()=>{
  	this.openSendForApproval();
  });
  } 
  }
  
  openSendForApproval() {
  alert('clicked send for approval link');
  }
  

  ~sharad

• 

  ramu

  • Post Options:
  • Link
    Copy

  Posted 24 May 2019, 4:17 pm EST

  Thanks Sharad.