Refreshing TreeView at runtime

Refreshing TreeView at runtime

Posted by: ppaska on 1 February 2018, 1:58 pm EST

• 

  ppaska

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 1 February 2018, 1:58 pm EST

  Hi there,

  How can I refresh TreeView runtime?

  Here is my AngularJS setup:

  
  <wj-tree-view  
     loaded-items="sidebar.onTableLinksLoaded(s, e)"
     control="sidebar.treeViewControl"
     items-source="sidebar.sidebarTreeLinks"
     display-member-path="'name'"
     child-items-path="'items'"
     expand-on-click="true"
     >
  </wj-tree-view>
  
  

  my sidebarTreeLinks has a couple of thousand nodes in a hierarchy from the beginning and then I need to add/remove some the nodes run-time.

  How can I achieve this with Wijmo TreeView?

  Thanks,
  
  Pavlo

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 1 February 2018, 9:18 pm EST

  You will need to add the Node to the Collection View & then bind it again to datasource of the tree view. After that you can call the refresh or refresh all method of the Tree View.

  http://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.nav.TreeView.Class.html#refreshAll

• 

  ppaska

  • Post Options:
  • Link
    Copy

  Posted 1 February 2018, 10:56 pm EST

  ItemsSource is a hierarchical structure. Or you mean that collection view should be on each child node?

  Can I have a simple Angular JS example?

  Update: Tried to make a child node “‘items’” a collectionview. It doesn’t work! : Uncaught ** Assertion failed in Wijmo: Array expected.
  
  So, example is much appreciated

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 1 February 2018, 11:12 pm EST

  I found another wayto add the node dynamically. Please try the code and let me know

  var newItem = { header: 'my new item' },
      node = theTree.selectedNode;
  if (node) {
      theTree.selectedNode = node.addChildNode(index, newItem);
  } else {
      theTree.selectedNode = theTree.addChildNode(index, newItem);
  }
  

• 

  ppaska

  • Post Options:
  • Link
    Copy

  Posted 2 February 2018, 8:46 am EST

  Are you saying that binding through ItemsSource won’t work?

  If I add nodes with addChildNode()(http://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.nav.TreeView.Class.html#addChildNode), then there is no way to remove node. I didn’t find method removeChildNode.

  Will appreciate any working sample: how to add/remove nodes dynamically?

  Thanks,
  
  Pavlo

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 3 February 2018, 3:41 am EST

  Hi,
  
  You may add a node as suggested by @Abhishek, you may also add item to the data source and call loadTree method.

  In the same way, you may delete a selected node by calling remove node or delete items from the data source and call loadTree method to refresh data.

  Please refer to the attached sample for the same.

  ~Manish

  TreeView_addNode_removeNode.zip

• 

  ppaska

  • Post Options:
  • Link
    Copy

  Posted 3 February 2018, 4:33 am EST

  Great, thank you very much Manish. That’s exactly what I was looking for