2

I'm using angular-ui-tree in order to render a tree with data but each time that the page is loaded all nodes are rendered and I would like to avoid the render because with huge data locks the browser.

I've tried to add data-nodrop-enabled and data-collapsed="true", but the tree is rendered with only one difference, all nodes are closed.

There's a way to render on demand with the data on client side with this component ? https://github.com/angular-ui-tree/angular-ui-tree

Main view:

 <div ui-tree id="tree-root">
     <ol ui-tree-nodes ng-model="Nodes">
         <li ng-repeat="node in Nodes" data-nodrop-enabled ui-tree-node data-collapsed="true" ng-include="'app/shared/renderNode.html'"></li>
     </ol>
 </div>

Partial view

<div ui-tree-handle class="tree-node tree-node-content tree-node-rules">
    <a class="btn btn-default btn-sm" ng-if="node.Nodes && node.Nodes.length > 0" data-drag-enabled="false" data-nodrag ng-click="toggle(this)">
        <span class="glyphicon" ng-class="{'glyphicon-folder-close': collapsed,'glyphicon-folder-open': !collapsed}"></span>
    </a>        
     <span class="btn-title btn-title-parent">{{node.Path}}</span>       
</div>
<ol ui-tree-nodes="" ng-model="node.Nodes" ng-class="{hidden: collapsed}">
    <li ng-repeat="node in node.Nodes" class="tree-item-title" data-collapsed="true" data-nodrag ui-tree-node ng-include="'app/shared/renderNode.html'"></li>
</ol>
user1520494
  • 1,134
  • 2
  • 11
  • 27

1 Answers1

0

My suggestion is nest your data as much as possible and maintain a single controller for the tree.Main view is referenced by the partial view and it references itself recursively.Don't think there's an option for partial rendering.

Shafi Hossain
  • 53
  • 5