How to control selected node and expanded state in wj-treeview

How to control selected node and expanded state in wj-treeview

Posted by: license on 12 November 2017, 9:16 pm EST

• 

  license

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 12 November 2017, 9:16 pm EST

  Hi

  We are using the Wijmo Angular Tree view component in our product. (Currently version 5.20172.359)

  We have a treestructure that potentially can be quite large, and deep.

  The tree is in current mode lazy loading childnodes on expand, and the api that delivers data starts by delivering the root nodes only. This works fine.

  What are requested is that we are able to show the tree structure with a default selected item - and thus the tree expanded to this level.

  The API part of delivering a tree json object, with all nodes down to requested node included is working. Wijmo tree accepts this json - and does not lazyload if you expand on the path to selected item.

  What I now need todo, is to be able to have the nodes on the path to the requested item to be default expanded - and to have the treeview fire a selectedItemChanged event on the requested node.

  How would I do this?

  I can’t find documentation to the angular treeview component on how to set expanded state of a given node - and neither something to programmatically set selected node.

  Closed I can come is a reference here (http://demos.wijmo.com/5/angular/TreeViewIntro/TreeViewIntro/) to collapsedMemberPath - but that property doesn’t seem to exist (yet or anymore?) if I look here: http://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.nav.TreeView.Class.html

  I hope someone is able to point me in the right direction on how to solve this task.

  If in need for more information - please let me know.

  Best regards
  
  /Anders

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 13 November 2017, 6:16 pm EST

  Hi Anders,
  
  For this you need to select node once data is loaded after that you need to call click method for selectedNode element. For you reference, please refer to the attached sample for the same.

  ~Manish

  TreeView_lazyLoad.zip

• 

  license

  • Post Options:
  • Link
    Copy

  Posted 14 November 2017, 7:21 am EST

  Hi Manish

  Thank you for the quick reply.

  The sample directed me in the right direction.

  I am now using the LoadedItems event, and when the datasource is loaded, I can find the item requested in the datasource - and finally set selectedItem on the tree - and everything works like a charm.

  Once again, thank you the quick reply - made my day.

  /Anders

• 

  feniksreborn

  • Post Options:
  • Link
    Copy

  Posted 26 January 2018, 1:18 am EST

  Hello,

  I try this solution and I did not manage to have described behavior.
  
  I have a Tree view component with two major nodes, these nodes have children.
  
  If I selected second node and then select his child, everything is expanded as it should be.
  
  Then I add some new grandchildren programmatically to a selected child, after this I refresh Tree view component and only first major node is expanded, the second node is collapsed…

  How to have the second node expanded? Is there some dynamic, not hardcoded solution?

  Thank you.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 30 January 2018, 1:20 am EST

  Hi,
  
  We are sorry for delayed response.
  
  The required behavior is by design,please refer to the Lazy Loading section in the following demo sample:
  
  http://demos.wijmo.com/5/Angular2/TreeViewIntro/TreeViewIntro/

  ~Manish

• 

  feniksreborn

  • Post Options:
  • Link
    Copy

  Posted 30 January 2018, 1:51 am EST

  Hello

  I have made a small example on plunker:
  
  http://plnkr.co/edit/AsJZmMFT0oQcYeerNyv0?p=preview

  Steps for reproducing the strange behavior:

  Expand node Amy Winehouse and go to node Live in Paradiso. We have now expended node Live in Paradiso. Click on add node and we get new node 111, but Live in Paradiso is collapsed. Why?

  What is the best way to add the nod and not lose the expand option?

  Thank you

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 1 February 2018, 4:54 pm EST

  Hi,
  
  We are sorry for the delayed response.

  Please use loadTree method for loading updated data with preserving outline state. Please find the updated plunker:
  
  http://plnkr.co/edit/pYVkESYgOtnN1Eveg7eT?p=preview

  ~Manish