p-tree or p-treetable does not expand the tree node

[ayc868]

In angular 8,
don't have problem with other primeNG component except p-tree or p-treetable
(it display without error , but does not expand the tree node)
However, if moves the code in primeNG Demo, and it works.
Any trick?


<p-tree [value]="file0"></p-tree>

<p-tree [value]="files"></p-tree>

-------------------
//import { TreeModule } from 'primeng/primeng';
import { TreeModule } from 'primeng/components/tree/tree';
//import {TreeModule} from './components/tree/tree';
import {ChartModule} from 'primeng/chart';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
TreeModule, ChartModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
--------------------------------------------

import { Component, OnInit, ViewChild } from '@angular/core';

import { TreeNode } from 'primeng/components/common/api';

//import {Tree} from '../components/tree/tree';
import { Tree } from 'primeng/components/tree/tree';


@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

data: any;
file0: TreeNode[];
files: TreeNode[];


this.file0 = [
{
"label": "Sales Order 1",
"data": "Documents Folder",
"expandedIcon": "fa fa-folder-open",
"collapsedIcon": "fa fa-folder",
"children": [{
"label": "Work Order 1",
"data": "Work Folder",
"expandedIcon": "fa fa-folder-open",
"collapsedIcon": "fa fa-folder",
"children": [{ "label": "BB SN 1", "icon": "fa fa-file-word-o", "data": "Expenses Document" }, { "label": "BB SN 2", "icon": "fa fa-file-word-o", "data": "Resume Document" }]
},
{
"label": "Work Order 2",
"data": "Home Folder",
"expandedIcon": "fa fa-folder-open",
"collapsedIcon": "fa fa-folder",
"children": [{ "label": "BB SN 2", "icon": "fa fa-file-word-o", "data": "Invoices for this month" }]
}]
},
{
"label": "Sales Order 2",
"data": "Pictures Folder",
"expandedIcon": "fa fa-folder-open",
"collapsedIcon": "fa fa-folder",
"children": [
{ "label": "Work Order 1", "icon": "fa fa-file-image-o", "data": "Barcelona Photo" },
{ "label": "Work Order 2", "icon": "fa fa-file-image-o", "data": "PrimeFaces Logo" },
{ "label": "Work Order 3", "icon": "fa fa-file-image-o", "data": "PrimeUI Logo" }]
},
{
"label": "Sales Order 3",
"data": "Movies Folder",
"expandedIcon": "fa fa-folder-open",
"collapsedIcon": "fa fa-folder",
"children": [{
"label": "Al Pacino",
"data": "Pacino Movies",
"children": [{ "label": "Scarface", "icon": "fa fa-file-video-o", "data": "Scarface Movie" }, { "label": "Serpico", "icon": "fa fa-file-video-o", "data": "Serpico Movie" }]
},
{
"label": "Robert De Niro",
"data": "De Niro Movies",
"children": [{ "label": "Goodfellas", "icon": "fa fa-file-video-o", "data": "Goodfellas Movie" }, { "label": "Untouchables", "icon": "fa fa-file-video-o", "data": "Untouchables Movie" }]
}]
}
];

[yigitfindikli]

In angular 8,
don't have problem with other primeNG component except p-tree or p-treetable
(it display without error , but does not expand the tree node)
However, if moves the code in primeNG Demo, and it works.
Any trick?


<p-tree [value]="file0"></p-tree>

<p-tree [value]="files"></p-tree>

-------------------
//import { TreeModule } from 'primeng/primeng';
import { TreeModule } from 'primeng/components/tree/tree';
//import {TreeModule} from './components/tree/tree';
import {ChartModule} from 'primeng/chart';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
TreeModule, ChartModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
--------------------------------------------

import { Component, OnInit, ViewChild } from '@angular/core';

import { TreeNode } from 'primeng/components/common/api';

//import {Tree} from '../components/tree/tree';
import { Tree } from 'primeng/components/tree/tree';


@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

data: any;
file0: TreeNode[];
files: TreeNode[];


this.file0 = [
{
"label": "Sales Order 1",
"data": "Documents Folder",
"expandedIcon": "fa fa-folder-open",
"collapsedIcon": "fa fa-folder",
"children": [{
"label": "Work Order 1",
"data": "Work Folder",
"expandedIcon": "fa fa-folder-open",
"collapsedIcon": "fa fa-folder",
"children": [{ "label": "BB SN 1", "icon": "fa fa-file-word-o", "data": "Expenses Document" }, { "label": "BB SN 2", "icon": "fa fa-file-word-o", "data": "Resume Document" }]
},
{
"label": "Work Order 2",
"data": "Home Folder",
"expandedIcon": "fa fa-folder-open",
"collapsedIcon": "fa fa-folder",
"children": [{ "label": "BB SN 2", "icon": "fa fa-file-word-o", "data": "Invoices for this month" }]
}]
},
{
"label": "Sales Order 2",
"data": "Pictures Folder",
"expandedIcon": "fa fa-folder-open",
"collapsedIcon": "fa fa-folder",
"children": [
{ "label": "Work Order 1", "icon": "fa fa-file-image-o", "data": "Barcelona Photo" },
{ "label": "Work Order 2", "icon": "fa fa-file-image-o", "data": "PrimeFaces Logo" },
{ "label": "Work Order 3", "icon": "fa fa-file-image-o", "data": "PrimeUI Logo" }]
},
{
"label": "Sales Order 3",
"data": "Movies Folder",
"expandedIcon": "fa fa-folder-open",
"collapsedIcon": "fa fa-folder",
"children": [{
"label": "Al Pacino",
"data": "Pacino Movies",
"children": [{ "label": "Scarface", "icon": "fa fa-file-video-o", "data": "Scarface Movie" }, { "label": "Serpico", "icon": "fa fa-file-video-o", "data": "Serpico Movie" }]
},
{
"label": "Robert De Niro",
"data": "De Niro Movies",
"children": [{ "label": "Goodfellas", "icon": "fa fa-file-video-o", "data": "Goodfellas Movie" }, { "label": "Untouchables", "icon": "fa fa-file-video-o", "data": "Untouchables Movie" }]
}]
}
];

Hi,

I couldn't replicate it, can you provide stackblitz sample using with https://stackblitz.com/github/primeface ... e-template .

Best Regards.

[ayc868]

I edit the codes
https://stackblitz.com/github/primeface ... e-template
p-tree is working easily (icon is not looking good)
p-treeTable totally not work.

How do I post the image? - what it should be look like.

[ayc868]

Sorry,
the p-treeTable codes should be following

files2: TreeNode[];
this.files2 =
[
{
"data": {
"part": "SO 1",
"status": "",
"result": ""
},
"expandedIcon": "fa fa-folder-open",
"collapsedIcon": "fa fa-folder",
"children": [
{
"data": {
"part": "WO 1",
"status": "",
"result": ""
},
"children": [
{
"data": {
"part": "BB SN1",
"status": "Shipped",
"result": "fail"
}
},
{

"data": {
"part": "BB SN2",
"status": "Scrapped",
"result": "pass"
}
},
{

"data": {
"part": "BB SN3",
"status": "Shipped",
"result": "pass"
}
}
]
},
{
"data": {
"part": "WO 2",
"status": "",
"result": ""
},
"children": [
{
"data": {
"part": "BB SN1-1",
"status": "Shipped",
"result": "pass"
}
},
{

"data": {
"part": "BB SN2-1",
"status": "Scrapped",
"result": "pass"
}
},
{

"data": {
"part": "BB SN3-1",
"status": "Shipped",
"result": "pass"
}
}
]
}
]
},
{
"data": {
"part": "SO 2",
"status": "",
"result": ""
},
"children": [
{
"data": {
"part": "WO 3",
"status": "",
"result": ""
},
"children": [
{
"data": {
"part": "BB SN3-1",
"status": "Shipped",
"result": "pass"
}
},
{

"data": {
"part": "BB SN3-2",
"status": "Shipped",
"result": "pass"
}
},
{

"data": {
"part": "BB SN2-3",
"status": "Shipped",
"result": "pass"
}
}
]
}
]
}
];


<p-treeTable #tt [value]="files2" [columns]="cols"
[scrollable]="true" scrollHeight="520px" [resizableColumns]="true">
<ng-template pTemplate="caption">
<div style="text-align: right">
<i class="pi pi-search" style="margin: 4px 4px 0 0"></i> <input
type="text" pInputText size="40" placeholder="Global Filter"
(input)="tt.filterGlobal($event.target.value, 'contains')"
style="width: auto">
</div>
</ng-template> <ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col *ngFor="let col of columns" [style.width]="col.width">
</colgroup>
</ng-template> <ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of cols" ttResizableColumn>{{col.header}}</th>
</tr>
<tr>
<th *ngFor="let col of cols"><input pInputText type="text"
(input)="tt.filter($event.target.value, col.field, col.filterMatchMode)">
</th>
</tr>
</ng-template> <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
<tr>
<td *ngFor="let col of cols; let i = index"><p-treeTableToggler
[rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
{{rowData[col.field]}}</td>
</tr>
</ng-template> <ng-template pTemplate="emptymessage">
<tr>
<td [attr.colspan]="cols.length">No data found.</td>
</tr>
</ng-template> </p-treeTable>

[ayc868]

I got everything work with

"styles": [
"src/styles.css",
"./node_modules/primeng/resources/themes/nova-light/theme.css",
"./node_modules/primeicons/primeicons.css",
"./node_modules/primeng/resources/primeng.min.css",
"./node_modules/font-awesome/css/font-awesome.min.css"
],


please close the case.