Primeng: [New feature] TreeNode->expanded, tree, treeTable

[izll]

Hi!

Please add an "expanded" property to TreeNode, and change in UITreeRow and UITreeNode classes the "expanded" property to "node.expanded".

Thanks!

[sdmoralesma]

would be great if the "expanded" node helps to initialize the tree expanding it at will

[riscie]

I +1 this. Did one of you guys found a workaround to expand certain nodes on initialization?

[sdmoralesma]

I was thinking about "faking" click events through the tree. Dirty hack?... absolutely. Does it work?, Don't know... will try it later. If someone has a better idea please let us know.

[riscie]

Yeah I had the same idea @sdmoralesma but it really seems like such a dirty hack...

[riscie]

Hey @sdmoralesma did you get it to work?

[sdmoralesma]

Yes! I detailed here: http://stackoverflow.com/questions/38285593/how-to-initialize-primeng-tree-component/38285594#38285594

As I told you is very bruteforce trick... sorry :)

[izll]

I after update primeng, I always modifying the source code (common.ts, uitreerow.ts, uitreenode.ts) and recompile it :)

[marcelcremer]

+1

[cagataycivici]

This is available in PrimeNG 2.x.

[riscie]

@cagataycivici Correct me if I am wrong, but I think expanding nodes programmatically is not yet supported by treeTable.

From the merged commit e5fb29a
expanded?: boolean; // Currently only supported by tree.ts (not treeTable)

[CodeCabbie]

@riscie I am desperate to expand and collapse nodes in treeTable (not tree) programmatically and as far as I can tell it's not working/implemented. I'm using PrimeNG 3.10.10.
I think there may be some confusion between 'treeTable' and 'tree'.
Might have to resort to generating click events. Such a shame as I like the simplicity of the treeTable component - but it really needs programmatic controls. Any thoughts @cagataycivici?

[cagataycivici]

It should be supported, I will check.

[CodeCabbie]

Thanks @cagataycivici . It would be very useful to know which of the following you test successfully for reference.

myTreeTable . expand (node)
myTreeTable . collapse (node)
myTreeTable . select (node)
myTreeTable . unselect (node)
myTreeTable . expandAll ()
myTreeTable . collapseAll ()

Efforts much appreciated.

[cagataycivici]

Ok, I'm confused, when I provide a json like this by modifying showcase;

{
    "data":
    [  
        {  
            "data":{  
                "name":"Documents",
                "size":"75kb",
                "type":"Folder"
            },
            "expanded": true,
            "children":[
                {  
                    "data":{  
                        "name":"Work",
                        "size":"55kb",
                        "type":"Folder"
                    },
                    "children":[  
                        {  
                            "data":{  
                                "name":"Expenses.doc",
                                "size":"30kb",
                                "type":"Document"
                            }
                        },
                        {  
                            "data":{  
                                "name":"Resume.doc",
                                "size":"25kb",
                                "type":"Resume"
                            }
                        }
                    ]
                },
                {  
                    "data":{  
                        "name":"Home",
                        "size":"20kb",
                        "type":"Folder"
                    },
                    "children":[  
                        {  
                            "data":{  
                                "name":"Invoices",
                                "size":"20kb",
                                "type":"Text"
                            }
                        }
                    ]
                }
            ]
        },
       //other nodes
}

Documents node is rendered as expanded initially;

So what is the issue here? If you set a node as expanded programmatically, following also works, notice that I toggle the expanded with an external button click;

<button (click)="toggleNode($event)">Toggle</button>

    <p-treeTable [value]="files1">
        <p-header>Basic</p-header>
        <p-column field="name" header="Name"></p-column>
        <p-column field="size" header="Size"></p-column>
        <p-column field="type" header="Type"></p-column>
    </p-treeTable>

ngOnInit() {
    this.nodeService.getFilesystem().then(files => this.files1 = files);
}

toggleNode() {
   this.files1[0].expanded = !this.files1[0].expanded;
}

Clicking the button collapses or expands the first node (documents).

[CodeCabbie]

@cagataycivici - Thank you. I now have it working. Your above example is actually clearer than the showcase.
I think I failed to notice that the .children property is NOT part of the .data property, but at the same level. So, correct navigation is achieved thus:

myTreeTable[0] . children[0] . children[0] . expanded = true

My mistake. All good now.

Incidentally, I noticed that the showcase for the 'Tree' component (not TreeTable) has a minor issue. The 'Programmatic Tree Expansion' section is not connected to the tree that is shown directly above it. It is incorrectly connected to the tree that appears in the 'Context Menu' section. If the Context Menu section is scrolled out of view, the 'Programmatic Tree Expansion' appears not to work. This had me considering giving up at one point!! ;-)

[mithun27]

expanded : true , property not working after angular updated to version 7
this only change the icon does not expand or collapse the table

[namdien177]

expanded : true , property not working after angular updated to version 7
this only change the icon does not expand or collapse the table

I found out using changeDetectionRef might do the trick, however, the expanded property is not consistent on the rowNode object to modify.
At first click (without expanding and using the onNodeSelect (or click event on the row), rowNode or selected node does not contain "expanded". After expanding 1st time, the property is added to the object.
I would like to have the property to be default set (null or true/false depending on the availability of children array).

It's really irritating when devs have to find a workaround solution for this simple action.

[namdien177]

expanded : true , property not working after angular updated to version 7
this only change the icon does not expand or collapse the table

I found out using changeDetectionRef might do the trick, however, the expanded property is not consistent on the rowNode object to modify.
At first click (without expanding and using the onNodeSelect (or click event on the row), rowNode or selected node does not contain "expanded". After expanding 1st time, the property is added to the object.
I would like to have the property to be default set (null or true/false depending on the availability of children array).

It's really irritating when devs have to find a workaround solution for this simple action.

Wait I was wrong, event after using detectionChangeRef, it only changes the icon...