Tree Table - PrimeEng 5.2.7 - Error

[rajuarien]

We are using Angular 5 with PRimeng 5.2.7

We are unable to configure the TreeTable properly.

Imported the following modules
import {TreeTableModule} from 'primeng/treetable';
import {TreeNode} from 'primeng/api';

Error
<ng-template pTemplate="body" let-rowNode let-rowData="rowData">
<tr>
<td>
<p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
{{rowData.name}}
</td>
<td>{{rowData.size}}</td>
<td>{{rowData.type}}</td>
</tr>
</ng-template>

We get the following error
Can't bind to 'rowNode' since it isn't a known property of 'p-treeTableToggler'.
1. If 'p-treeTableToggler' is an Angular component and it has 'rowNode' input, then verify that it is part of this module.
2. If 'p-treeTableToggler' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<tr>
<td>
<p-treeTableToggler [ERROR ->][rowNode]="rowNode"></p-treeTableToggler>
{{rowData.name}}
</td>
"): ng:///WorkflowDashboardModule/WorkflowInstanceComponent.html@49:34
'p-treeTableToggler' is not a known element:
1. If 'p-treeTableToggler' is an Angular component, then verify that it is part of this module.
2. If 'p-treeTableToggler' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<tr>
<td>
[ERROR ->]<p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
{{rowData.name}}
"):

[cagatay.civici]

That is the new TreeTable, please update to 6.0.0-rc.1

[tanago]

6.0.0-rc1 gives me the same issue

HTML

Code: Select all

<p-treeTable [value]="files">
          <ng-template pTemplate="header">
              <tr>
                  <th>Name</th>
                  <th>Size</th>
                  <th>Type</th>
              </tr>
          </ng-template>
          <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
              <tr>
                  <td>
                      p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                      {{rowData.name}}
                  </td>
                  <td>{{rowData.size}}</td>
                  <td>{{rowData.type}}</td>
              </tr>
          </ng-template>
      </p-treeTable>

TS

Code: Select all

files: TreeNode[] = [
        {
            'data': {
                'name': 'Documents',
                'size': '75kb',
                'type': 'Folder'
            },
            'children': [
                {
                    'data': {
                        'name': 'Work',
                        'size': '55kb',
                        'type': 'Folder'
                    },
                    'children': [
                        {
                            'data': {
                                'name': 'Expenses.doc',
                                'size': '30kb',
                                'type': 'Document'
                            }
                        },
                        {
                            'data': {
                                'name': 'Resume.doc',
                                'size': '25kb',
                                'type': 'Resume'
                            }
                        }
                    ]
                },
                {
                    'data': {
                        'name': 'Home',
                        'size': '20kb',
                        'type': 'Folder'
                    },
                    'children': [
                        {
                            'data': {
                                'name': 'Invoices',
                                'size': '20kb',
                                'type': 'Text'
                            }
                        }
                    ]
                }
            ]
        },
        {
            'data': {
                'name': 'Pictures',
                'size': '150kb',
                'type': 'Folder'
            },
            'children': [
                {
                    'data': {
                        'name': 'barcelona.jpg',
                        'size': '90kb',
                        'type': 'Picture'
                    }
                },
                {
                    'data': {
                        'name': 'primeui.png',
                        'size': '30kb',
                        'type': 'Picture'
                    }
                },
                {
                    'data': {
                        'name': 'optimus.jpg',
                        'size': '30kb',
                        'type': 'Picture'
                    }
                }
            ]
        }
    ];

MODULE

Code: Select all

import { TreeTableModule } from 'primeng/treetable';

....

@NgModule({
  imports: [
    ....,
    TreeTableModule
  ],
  ....

Rows show up but they are not expandable. I'm certain I'm using the latest version

[rajuarien]

Thanks for the timely Help

Upgraded to update to 6.0.0-rc.1 and managed to render the TreeTable but only the first level is displaying not the children. No Errors.

Display :
Applications
Cloud
Desktop

But their are no children.

Forum doesnt provide me a screenshot

DataSource : https://github.com/primefaces/primeng/b ... ystem.json

Snippet
files: TreeNode[];
this.http.get<any>('http://localhost:9003/assets/filesystem.json')
.toPromise()
//.then(files => this.files = <TreeNode[]>files.json().data);
//.then(res => <TreeNode[]> res.data);
.then(files => this.files = <TreeNode[]>files.data);
};

<div class="ui raised segment" style="margin:15px;">
<a class="ui blue ribbon label">FAQ</a>
<br/>
<br/>
<p-treeTable [value]="files">
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Size</th>
<th>Type</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowNode let-rowData="rowData">
<tr>
<td>
<p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
{{rowData.name}}
</td>
<td>{{rowData.size}}</td>
<td>{{rowData.type}}</td>
</tr>
</ng-template>
</p-treeTable>
</div>

[rajuarien]

That is the new TreeTable, please update to 6.0.0-rc.1

I am not able to render the TreeTable only the parent rows display but not the children. Have given an example of the same. I am unable to proceed.

[rajuarien]

CAn somebody help . The documentation makes it impossible to figure out the issue

[jsyed]

CAn somebody help . The documentation makes it impossible to figure out the issue

If you are using the latest primeNg then make sure that you have the primeicons and css style also loaded. Without this I wasn't getting the tree structure for the data.

https://www.primefaces.org/primeng/#/setup

[_vts]

Hello,

have you found any workaround?
I'm facing the same problem.

[yigitfindikli]

Hello,

have you found any workaround?
I'm facing the same problem.

Hello,
What is your primeng version and can i see your code ?