In multiselect p-treeTable, leaf node data is not checked with p-treeTableCheckbox.

[rhl20kmr@gmail.com]

If I have some data which need to bind with preselected checkbox in treetable.
All cases are for preselected only
1-If selected all tree data using checkbox for single row then parent node checkbox is selected but child leaf nodes are not selected.
2-If using data for one leaf node selected then selected node is not checked.

please check my code
html file

<p-toast></p-toast>

<h5>Checkbox Selection</h5>
<p-treeTable
[value]="files1"
[columns]="cols"
selectionMode="checkbox"
[(selection)]="selectedNodes3"
(onNodeSelect)="nodeSelect($event)" (onNodeUnselect)="nodeUnselect($event)"
dataKey="name"
>
<ng-template pTemplate="caption">
<div class="p-d-flex">
<p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>
<span class="p-ml-2">Toggle All</span>
</div>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{ col.header }}
</th>
</tr>
</ng-template>
<ng-template
pTemplate="body"
let-rowNode
let-rowData="rowData"
let-columns="columns"
>
<tr>
<td *ngFor="let col of columns; let i = index">
<p-treeTableToggler
id="{{ i }}"
[rowNode]="rowNode"
*ngIf="i == 0"
></p-treeTableToggler>
<p-treeTableCheckbox
[value]="rowNode"
*ngIf="i == 0"
></p-treeTableCheckbox>
{{ rowData[col.field] }}
</td>
</tr>
</ng-template>
</p-treeTable>





comp.ts file
import {Component,OnInit} from '@angular/core';
import {NodeService} from './nodeservice';
import {TreeNode} from 'primeng/api';
import { MessageService } from 'primeng/api';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
providers: [MessageService]
})
export class AppComponent {
files1: TreeNode[];

selectedNodes3: TreeNode[];
selectedFiles: TreeNode[] = [];

cols: any[];
dataArray: any[] = [];

constructor(private nodeService: NodeService, private messageService: MessageService) { }

ngOnInit() {

this.nodeService.getFilesystem().then(files => {
console.log(files);
this.files1 = files;
this.selectedNodes3 = [{
"data": {
"name": "Videos",
"size": "1500mb",
"type": "Folder"
},
"children": [
{
"data": {
"name": "primefaces.mkv",
"size": "1000mb",
"type": "Video"
}
},
{
"data": {
"name": "intro.avi",
"size": "500mb",
"type": "Video"
}
}
]
}];

this.dataArray = ["intro.avi"];
//this.selectedFiles.push(this.selectedNodes3[0].data);
//this.selectedFiles.push(this.selectedNodes3[0].children[0])
this.checkNode(this.files1, this.dataArray);

});

this.cols = [
{ field: 'name', header: 'Name' },
{ field: 'size', header: 'Size' },
{ field: 'type', header: 'Type' }
];
}

nodeSelect(event) {
console.log(event.node);
this.messageService.add({severity: 'info', summary: 'Node Selected', detail: event.node.data.name});

}

nodeUnselect(event) {
console.log(event.node);
this.messageService.add({severity: 'info', summary: 'Node Unselected', detail: event.node.data.name});

}

checkNode(nodes:TreeNode[], str:string[]) {
nodes.forEach(node => {
//check parent
//console.log(this.isCheck(str, node.data.name), node.data.name)
if(this.isCheck(str, node.data.name)) {
//console.log(node)
this.selectedFiles.push(node.data);
console.log(this.selectedFiles)
}

if(node.children != undefined){
node.children.forEach(child => {
//check child if the parent is not selected
//console.log(child.data.name,this.isCheck(str,child.data.name), this.isCheck(str,node.data.name))
if(this.isCheck(str,child.data.name) && !this.isCheck(str,node.data.name)) {
node.partialSelected = true;
child.parent = node.data;
this.selectedFiles.push(child.data);
}

//check the child if the parent is selected
//push the parent in str to new iteration and mark all the childs
if(this.isCheck(str,node.data.name)){
child.parent = node.data;
str.push(child.data.name);
}
});
}else{
return;
}

this.checkNode(node.children, str);

node.children.forEach(child => {
if(child.partialSelected) {
node.partialSelected = true;
}
});
});
}

isCheck(array,val){
for(let i = 0; i < array.length; i++){
if(array === val){
return true;
}
}
return false
}
onNodeSelection(e){
console.log(e)
}
}

[Melloware]

You want PrimeNG this is PrimeReact forum