Tree Table - PrimeEng 5.2.7 - Error

UI Components for Angular
Post Reply
rajuarien
Posts: 6
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: 17912
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: 6
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: 6
        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: 6
        Joined: 14 Jun 2018, 16:40

        20 Jun 2018, 05:29

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

        jsyed
        Posts: 1
        Joined: 01 Aug 2018, 21:44

        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

        Post Reply

        Return to “PrimeNG”

        • Information
        • Who is online

          Users browsing this forum: No registered users and 3 guests