By Sergio


2016-07-09 19:31:46 8 Comments

Given a tree how to initialize it in such way that the nodes are expanded at will?

I already tried to get a reference with @ViewChildren(Tree) tree but is resulting in undefined references when trying to access his children

3 comments

@Tabares 2017-10-31 22:34:48

You can handle this with a function that put all the expanded attributes to true.

expandAll(toggle: boolean) {
  this.tree.map(node => {
    node.expanded = toggle;
  });
}

ngOnInit() {
  setTimeout(()=>{
    this.expandAll(true);
  }, 0);

}

@alanHdez 2017-04-06 17:26:16

For initialize your tree component expanded you only need set in you json format the property expanded as true.

Sample:

{
    "data": 
    [
        {
            "label": "Pictures",
            "data": "Pictures Folder",
            "expandedIcon": "fa-folder-open",
            "collapsedIcon": "fa-folder",
            "expanded": true, // this flag shoud be true
            "children": [
                {"label": "barcelona.jpg", "icon": "fa-file-image-o", "data": "Barcelona Photo"},
                {"label": "logo.jpg", "icon": "fa-file-image-o", "data": "PrimeFaces Logo"},
                {"label": "primeui.png", "icon": "fa-file-image-o", "data": "PrimeUI Logo"}]
        },
    ]
}

@Sergio 2016-07-09 19:31:46

This is a hack that basically simulates clicks along the tree. I add this solution but I really hope someone could find something better.

Given a component with a tree we can get a reference to the treenodes and then "click" them as necessary:

@Component({
    selector: 'filemanager',
    templateUrl: './filemanager.html',
    directives: [Tree]
})
export class FileManagerComponent implements AfterViewInit {

    constructor(private renderer:Renderer) {}    

    ngAfterViewInit() {
        setTimeout(() => { // a timeout is necessary otherwise won't find the elements

            // get the first "p-tree" tag and find his first "toggler"
            let element = document.getElementsByTagName("p-tree")[0].getElementsByClassName("ui-tree-toggler fa fa-fw fa-caret-right")[0];

            //"click" the toggler using the angular2 renderer 
            let event = new MouseEvent('click', {bubbles: true});
            this.renderer.invokeElementMethod(element, 'dispatchEvent', [event]);
        }, 200);
    }

    // more methods and state...   
}

In case you need to initialize deeper nodes in the tree you will need to nest setTimeout functions.

@sixtyfootersdude 2016-07-29 21:26:20

Wow, that is a scary workaround.

@Sergio 2016-07-29 21:29:14

all workarounds are scary :)

Related Questions

Sponsored Content

51 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

58 Answered Questions

[SOLVED] How to check whether a checkbox is checked in jQuery?

2 Answered Questions

[SOLVED] Adding children to PrimeNg TreeTable programmatically

2 Answered Questions

[SOLVED] Stop node drop event with primeng p-tree component

0 Answered Questions

Primeng p-tree node drop to a droppable false node causes redirect in Firefox

  • 2018-06-14 09:04:10
  • AkilaI
  • 45 View
  • 2 Score
  • 0 Answer
  • Tags:   angular primeng

1 Answered Questions

PrimeNG: How to programmatically expand a lazily loaded tree

  • 2017-05-12 23:39:38
  • Dale
  • 467 View
  • 1 Score
  • 1 Answer
  • Tags:   tree primeng

17 Answered Questions

[SOLVED] How do I find out which DOM element has the focus?

  • 2009-01-30 20:21:31
  • Tony Peterson
  • 520037 View
  • 1044 Score
  • 17 Answer
  • Tags:   javascript dom

1 Answered Questions

[SOLVED] How to get the id from all children on Angular-tree-component?

  • 2017-07-31 18:54:07
  • Ennio
  • 559 View
  • 0 Score
  • 1 Answer
  • Tags:   angular

2 Answered Questions

[SOLVED] How to scroll to selected node in PrimeNG Tree

  • 2016-12-28 00:03:19
  • Mohan
  • 1319 View
  • 0 Score
  • 2 Answer
  • Tags:   angular primeng

Sponsored Content