Issue
This is my MenuItem array:
this.ButtonItems = [
{label: 'Edit', icon: 'fa fa-pencil-alt', command: (x) => {
this.onEditDocument(x);
}},
{label: 'Duplicate', icon: 'pi pi-times', command: (x) => {
this.onDuplicate(x);
}}
];
Both functions need a parameter of type string (item.id).
Here is my template:
<p-splitButton
label="Save"
icon="i-btn fa fa-search"
title="View document"
(onClick)="onViewDocument(item.id)"
[model]="ButtonItems(item.id)"></p-splitButton>
The code doesn't compile. I was trying to follow this example but I don't understand it. How can I get this right?
UPDATE:
My splitbutton is next to each item in the following table:
<p-table
[value]="currentDocuments"
[responsive]="true"
[columns]="cols"
[paginator]="true"
[rows]="10"
[showCurrentPageReport]="true"
styleClass="p-datatable-responsive-demo"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
<div class="header-no-overflow">{{col.header}}</div>
</th>
<th style="width: 60px;"></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-item let-columns="columns">
<tr>
<td *ngFor="let col of columns" >
<span class="p-column-title">{{col.header}}</span>
<div *ngIf="col.type != 'File Uploader'">
{{item[col.field]}}
</div>
<div *ngIf="col.type == 'File Uploader'">
<div *ngFor="let file of item[col.field]">
<a [href]="file.downloadUrl" target="_blank">{{file.name}} </a>
</div>
</div>
</td>
<td>
<ng-container *ngFor="let buttonItem of ButtonItems">
<p-splitButton
label="Save"
icon="i-btn fa fa-search"
title="View document"
(onClick)="onViewDocument(item.id)"
[model]="buttonItem(item.id)"
></p-splitButton>
</ng-container>
</td>
</tr>
</ng-template>
</p-table>
I added this here to explain my scenario in more detail.
My MenuItem looks like so:
this.ButtonItems = [
[{ label: 'Edit', icon: 'fa fa-pencil-alt', command: (x: string) => this.onEditDocument(x) }],
[{ label: 'Duplicate', icon: 'pi pi-times', command: (x: string) => this.onDuplicateDocument(x) }]
];
I want to add split buttons on each of the items in the table. The two buttons (edit and duplicate should be moved to items in the splitbutton. Here is a image to illustrate what i mean:
Solution
In the linked example, the property model
is bound to a function which is actually a bad idea. In a default change detection strategy setup, the function might get invoked for each change detection cycle.
In your case you might have to iterate over the ButtonItems
array.
<ng-container *ngFor="let buttonItem of ButtonItems">
<p-splitButton
label="Save"
icon="i-btn fa fa-search"
title="View document"
(onClick)="onViewDocument(item.id)"
[model]="buttonItem"
></p-splitButton>
</ng-container>
Update
Each menu item needs to be an array instead of an object.
this.ButtonItems = [
[{ label: 'Edit', icon: 'fa fa-pencil-alt', command: (x) => this.onEditDocument(x) }],
[{ label: 'Duplicate', icon: 'pi pi-times', command: (x) => this.onDuplicate(x) }]
];
Answered By - ruth
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.