Tree Table - PrimeEng 5.2.7 - Error

UI Components for Angular
Post Reply
rajuarien
Posts: 4
Joined: 14 Jun 2018, 16:40

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

cagatay.civici
Prime
Posts: 17855
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

14 Jun 2018, 23:34

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

tanago
Posts: 2
Joined: 30 Mar 2017, 14:43

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

rajuarien
Posts: 4
Joined: 14 Jun 2018, 16:40

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>

        rajuarien
        Posts: 4
        Joined: 14 Jun 2018, 16:40

        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.

        rajuarien
        Posts: 4
        Joined: 14 Jun 2018, 16:40

        20 Jun 2018, 05:29

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

        Post Reply
        • Information
        • Who is online

          Users browsing this forum: No registered users and 0 guests