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)
}
}
In multiselect p-treeTable, leaf node data is not checked with p-treeTableCheckbox.
You want PrimeNG this is PrimeReact forum
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
-
- Information
-
Who is online
Users browsing this forum: No registered users and 1 guest