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}}
"):
Tree Table - PrimeEng 5.2.7 - Error
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
That is the new TreeTable, please update to 6.0.0-rc.1
6.0.0-rc1 gives me the same issue
HTML
TS
MODULE
Rows show up but they are not expandable. I'm certain I'm using the latest version
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>
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'
}
}
]
}
];
Code: Select all
import { TreeTableModule } from 'primeng/treetable';
....
@NgModule({
imports: [
....,
TreeTableModule
],
....
Thanks for the timely Help
Display :
Applications
Cloud
Desktop
But their are no children.
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>
Display :
Applications
Cloud
Desktop
But their are no children.
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>
cagatay.civici wrote: ↑14 Jun 2018, 23:34That 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.
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
-
- Posts: 449
- Joined: 08 Aug 2018, 14:09
-
- Information
-
Who is online
Users browsing this forum: No registered users and 10 guests