Primeng: Enhance tree preselection

Created on 7 Dec 2017 · 12Comments · Source: primefaces/primeng

There is no guarantee in receiving a response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeNG PRO Support where support is provided within 4 business hours

I'm submitting a ... (check one with "x")

[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)

html:
````
selectionMode="multiple"
[(selection)]="selected">

{{selected| json}}
````

Component:
… selected = [{ "data": "1", "label": "1", "children": [] }] …

Current behavior
The tree appears and no node is selected

Expected behavior
The tree appears and the first node is selected

Minimal reproduction of the problem with instructions
Sorry, I'm not allowed to use plunkr

What is the motivation / use case for changing the behavior?
Let say that the tree is used to display a tree of terms (keywords, tags) used for classification (taxonomy) of an element (photo for example). I want to change the classification of the element by updating the selected nodes in the tree. Therefore when the tree is loaded, the node selected shall match the current classification of the element.

Please tell us about your environment:
angular-cli project & server, Ubuntu 16.04, Atom,

Angular version: 5
PrimeNG version: 4.3.0
Browser: Chrome XX | Firefox 57.0.1
Language: TypeScript 2.4
Node (for AoT issues): node --version = 8.0.0

discussion

Source

nlko

👍4

All 12 comments

In tree.ts, the findIndexInSelection method use object comparison for determining if a particular node is selected.

````typescript
findIndexInSelection(node: TreeNode) {
let index: number = -1;

    if(this.selectionMode && this.selection) {
        if(this.isSingleSelectionMode()) {
            index = (this.selection == node) ? 0 : - 1;
        }
        else {
            for(let i = 0; i  < this.selection.length; i++) {
                if(this.selection[i] == node) {
                    index = i;
                    break;
                }
            }
        }
    }

    return index;
}

````

I think this where my problem is (same value but different reference!). I don't understand why it has been design this way ?

Can't we just instead compare the data field instead ? I know the current implementation is fast because it's only reference comparison but anyway I don't see why other fields matters and it may make some usage more complex.

Comparing data content would probably be as fast and, in my opinion, more convenient.

It would mean changing either to
this.selection[i] == node.data
or (to keep compatibility) either to
this.selection[i].data == node.data

nlko on 8 Dec 2017

👍1

Let's wait for more user feedback.

cagataycivici on 19 Dec 2017

Can't we use a dataKey property to define a field to compare to?
That way we can compare ids when using objects as data.

serlopez46 on 22 Jan 2018

👍1

I'm also having this issue. I'm building a TreeNode[] to use as a navigation list view from my back end and there seems to be no way to set the selection value from typescript and see that value get selected from the list.

I was also thinking it'd be super nice if somehow the template itself supported some kind of routerLinkActive style changing capabilities, in the event you did decide to add an anchor tag inside in your template and use it as a navigation tree, but I don't know if this is a lot to ask since this component wont always necessarily be used for navigation. So far I can only change the link itself with routerLinkActive and not the layers of the p-tree component primeNG itself generates above it.

PikaChokeMe on 13 Apr 2018

Same issue here, I would like to fetch pre selected data from api but without casting this return to match the treenode type. The best solution I think could be a datakey property, so the client can choose the property to use as comparer.

g-guth on 19 Nov 2018

How is this bug even possible when the p-tree uses two-way data binding [(selection)]="..."?
It took me hours to find out that it's not my fault...

In my eyes, this bug does not need enough user feedbacks to be fixed. A bug should be fixed, regardless of its priority. Especially if the bug is small as it is in this case and essentiall for some use cases.