Prime Community Forum

Posted: **14 Jun 2018, 20:46**

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}}
"):

Posted: **14 Jun 2018, 23:34**

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

Posted: **15 Jun 2018, 14:50**

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

Posted: **15 Jun 2018, 23:49**

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>

Posted: **18 Jun 2018, 02:36**

cagatay.civici wrote: ↑
14 Jun 2018, 23:34
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.

Posted: **20 Jun 2018, 05:29**

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

Posted: **01 Aug 2018, 21:50**

rajuarien wrote: ↑
20 Jun 2018, 05:29
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

Posted: **21 Dec 2018, 10:47**

Hello,

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

Posted: **24 Dec 2018, 16:00**

_vts wrote: ↑
21 Dec 2018, 10:47
Hello,

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

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

Prime Community Forum

Tree Table - PrimeEng 5.2.7 - Error

Tree Table - PrimeEng 5.2.7 - Error

Re: Tree Table - PrimeEng 5.2.7 - Error

Re: Tree Table - PrimeEng 5.2.7 - Error

Re: Tree Table - PrimeEng 5.2.7 - Error

Re: Tree Table - PrimeEng 5.2.7 - Error

Re: Tree Table - PrimeEng 5.2.7 - Error

Re: Tree Table - PrimeEng 5.2.7 - Error

Re: Tree Table - PrimeEng 5.2.7 - Error

Re: Tree Table - PrimeEng 5.2.7 - Error