Angular Components in WijmoTreeView?

Angular Components in WijmoTreeView?

Posted by: chhavi.sethi on 17 August 2020, 12:43 pm EST

• 

  chhavi.sethi

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 17 August 2020, 12:43 pm EST

  Hi,

  I am struggling with the WijmoTreeView. I couldn’t able to use Angular components/templates in the tree node.

  I actually don’t want to use * “(formatItem)”
  
  with plain HTML since it violates Angular architecture and from the scalability point of view, it is not good for us.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 18 August 2020, 3:12 am EST

  Hi Chhavi,

  We are sorry but angular templates are not supported in TreeView. We have added an enhancement request for the same with internal tracking id 457759. We will update you once this feature is implemented.
  
  But, instead of TreeView, you can use Accordion. It is a similar control as TreeView and also provide item templates in angular. Please refer to the demo link below:

  https://www.grapecity.com/wijmo/demos/Nav/Accordion/Overview/angular

  Note that Accordion was added in 5.20201.680 version.

  Regards,
  
  Ashwin

• 

  chhavi.sethi

  • Post Options:
  • Link
    Copy

  Posted 18 August 2020, 12:48 pm EST

  Thanks for the help,

  I am gonna stick with TreeView due to some reasons.

  I am struggling with one more problem… We get a level property in FormatNodeEventArgs in formatItem function. Initially, I get the correct level values but when I drag a node to a different level so the level values remain same.

  My scenario is to show a level number on every node. I am doing it with the following code.

  
  onFormatItem(e: FormatNodeEventArgs) {
  	console.log(e);
  	const item = e.dataItem;
  	e.element.innerHTML = `(${e.level + 1}) ${item.NAME} - ${item.ID}`;
  }
  
  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 19 August 2020, 1:55 am EST

  Hi Chhavi,

  This is an expected behavior. In order to update the node level, the formatItem needs to be executed, which it does not after dragging the nodes due to performance. Most of the time, when a user drag/drop a node in the TreeView, they basically just need to change the position of the node and not refresh the tree.
  
  To resolve your issue, simply call the reloadTree method in the dragEnd event.

  Please refer to the sample link below:

  https://stackblitz.com/edit/angular-jyxucs

  ~regards

• 

  chhavi.sethi

  • Post Options:
  • Link
    Copy

  Posted 19 August 2020, 11:31 am EST

  Thank you! It worked.