Primeng: Tree component selectable with lazy loading issues

Created on 13 Nov 2017  路  5Comments  路  Source: primefaces/primeng

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
http://plnkr.co/edit/7P7ypYcqW5ege1vH49mg?p=preview

Current behavior
When using lazy loading if a parent is checked, children of the parent do not appear as checked.
When using lazy loading if you close a branch and reopen it, the selected children do not appear to be checked.
primengtree

Expected behavior
When clicking to expand nodes all nodes should be checked if the parent is checked.
When reopening lazy loaded nodes, the selected nodes should match.

Posible solutions
For (2) At https://github.com/primefaces/primeng/blob/master/src/app/components/tree/tree.ts#L589
the comparison should be done with the data property instead of the full node.

Please tell us about your environment:

  • Angular version: 4.2.6
  • PrimeNG version: 4.3.0
  • Browser: [all]
  • Language: [TypeScript 2.X]
  • Node (for AoT issues): node --version =
discussion

Most helpful comment

I have been testing it, but there were some corner cases that lead to errors.

What about comparing using the data property of the node instead of the whole node?

All 5 comments

In lazy mode, since Tree does not have access to nodes at client side, I guess when you are loading the nodes from the server, you should add them to the selection manually. Not sure if there is another way. Is there?

Can't be launched a propagate down after the lazyLoad event is completed? Maybe providing some callback?

Found a workaround for pre-selection of multiple check-boxes (programmatically) in primeng Tree. You can find working example here: https://github.com/jigneshkhatri/primeng-treenode-preselect
This may solve lazy loading issue too. Give it a try :)

I have been testing it, but there were some corner cases that lead to errors.

What about comparing using the data property of the node instead of the whole node?

We're facing this same issue and one thing I've done to help this which does not involve running through the entire list of selected items is I simply added a "selected" variable to each tree node. I change the boolean using the onNodeSelect and onNodeUnselect functions and then when I lazy load, I can simply check the "selected" property on the parent node to see if I should add the children to my selected array.

I believe exposing this simple selected property to each node by default would really help cut down code for users to see if the parents are selected which allows us to decide on loading the children whether or not the children should also be selected.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

pchristou picture pchristou  路  3Comments

miresk picture miresk  路  3Comments

garethlewis picture garethlewis  路  3Comments

watalberto picture watalberto  路  3Comments

cyberrranger picture cyberrranger  路  3Comments