Treetable - Set Selection Tree Node Programmatically Not Working

[vscodeguru]

I'm submitting a ... (check one with "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)

1. Unselect all node from Treetable
2. Click Set Selection button

https://plnkr.co/edit/2LiR8NNgDmmjWbboVABn?p=preview

Current behavior Tree Table programmatical Node Selection Not Working

Expected behavior Tree Table Node Selection Need to set programatically ex. i need to retrieve data from server set set selected node in tree table

Please tell us about your environment: visual code

• Angular version: 4.1.3

• PrimeNG version: 4.0.3 I am also check your latest release

• Browser: [Chrome 59.0.3071.115 ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

• Node (for AoT issues): node --version =

[vscodeguru]

Hi, Pls let me know that my above query is really a issue or you have solution.... i am in kind of urgent don't mistake me....

[rodolfojnn]

The selection must be passed as a variable reference, example:

this.SelectedMenuList = [this.MenuList[0], this.MenuList[0].children[0]];

[cagataycivici]

Yes, as above.

[encima]

Sorry to piggyback off this. Please let me know if I should open a new issue. I have tried saving the selected items in a list to localstorage and restoring but it does not show. I cannot think of the best way to do this. Is there a way to get the index of the selected node when it is selected (many of my nodes are nested)?

[Priyanka13086]

i was also facing the same issue. so i have used ng-template and then i have taken input type checkbox and then i have one property "isSelected" in json. and while retrieving values i have looped the json in a recursive way and then compare the values from database and my json then i make the same object found "isSelected" property true.

Sample code:

HTML: <p-treeTable class="" [value]="allgroups" [(selection)]="selectedFiles2">

{{node.data.groupName}}

      </p-treeTable>

JSON: export class Group { GroupName: string; StartDate : string; isSelected : boolean; }

Component: i have called this function "setNodeSelecteed()" on the values which i am retrieving from database.

setNodeSelected = function (node, selectGroupName) { // node => this.allGroups if (node.children && node.children.length > 0) { for (var i = 0; i < node.children.length; i++) { this.setNodeSelected(node.children[i], selectGroupName); } } else { if (node.data.groupName.trim().toLowerCase() === selectGroupName.trim().toLowerCase()) { node.data.isSelected = true; } } }

Hope this helps you. :)

[jigneshkhatri]

Found a workaround for preselection of multiple checkboxes in primeng Tree. You can find working example here: https://github.com/jigneshkhatri/primeng-treenode-preselect

[blogo86]

Hi, I got a solution and posted here: https://github.com/blogo86/PrimeNGTreeNodePreSelect

[HChampaneri]

I tried all the mentioned solutions, but still it does not show the checkbox as selected.

[safouaneOulhabib]

I was facing the same issue until I found out that the TreeSelect component uses the Tree component internally. When you try to set the value of the TreeSelect, it actually binds to the value of the Tree's selection. The problem arises because the Tree component inside the TreeSelect is not initialized until you click on the TreeSelect.

To overcome this issue, instead of setting the value instantly, you can reference the TreeSelect using @ViewChild:

@ViewChild('myTreeSelect', { static: false }) myTreeSelect!: TreeSelect;

in the Html template:

`<p-treeSelect [(ngModel)]="selectedNodes" [options]="myDataset" [metaKeySelection]="false" selectionMode="checkbox" placeholder="Select Item"

myTreeSelect

                ></p-treeSelect>`

If you want to select nodes programmatically, you should follow these steps:

1. Set the value of selectedNodes initially so that the data appears in the TreeSelect before it's expanded

this.selectedNodes = [someData];

2. Use the onShow event of the TreeSelect to wait until the TreeSelect is expanded, and then select the nodes programmatically:

this.myTreeSelect.onShow.subscribe(()=>{ this.dataInputTreeSelect.value = [someData]; })

this helped me achieve this feature hope this helps you too :)

[HavoStrean]

@safouaneOulhabib Hi, I tried the mentioned solution, but it still does not work. Could you provide the code on Stackblitz or other code platforms :)