in ng2-smart-table angular 2 i want to add a new button in actions column and by click on this button it will route to another page this is the add , edit and delete buttons but i tried to make the new button like this but it's not working
settings = {
add: {
addButtonContent: '<i class="ion-ios-plus-outline"></i>',
createButtonContent: '<i class="ion-checkmark" ></i>',
cancelButtonContent: '<i class="ion-close"></i>',
confirmCreate: true,
},
edit: {
editButtonContent: '<i class="ion-edit"></i>',
saveButtonContent: '<i class="ion-checkmark"></i>',
cancelButtonContent: '<i class="ion-close"></i>',
confirmSave: true
},
delete: {
deleteButtonContent: '<i class="ion-trash-a"></i>',
confirmDelete: true
},
, how can i add the button , i searched in ng2-smart table documentation and i can't find any thing related to this https://akveo.github.io/ng2-smart-table/documentation
Try it:
In your columns setting, add one column "Actions":
Actions: //or something
{
title:'Detail',
type:'html',
valuePrepareFunction:(cell,row)=>{
return `<a title="See Detail Product "href="Your api key or something/${row.Id}"> <i class="ion-edit"></i></a>`
},
filter:false
},
Id: { //this Id to use in ${row.Id}
title: 'ID',
type: 'number'
},
In your settings file, put the following
actions: {
edit: false, //as an example
custom: [{ name: 'routeToAPage', title: `<img src="/icon.png">` }]
}
Now you have a custom routeToAPage button with an img.
Then in your ng2-smart-table tag,
<ng2-smart-table [settings]="settings" [source]="dataSource" (custom)="route($event)"></ng2-smart-table>
Then you can create a route function and do what it needs to do.
In my List component
actions: {
columnTitle: 'Actions',
add: false,
edit: false,
delete: true,
custom: [
{ name: 'viewrecord', title: '<i class="fa fa-eye"></i>'},
{ name: 'editrecord', title: ' <i class="fa fa-pencil"></i>' }
],
position: 'right'
},
Then in the template
<ng2-smart-table class="table table-hover" [settings]="settings" [source]="dataSet"
(deleteConfirm)="onDeleteConfirm($event)" (custom)="onCustomAction($event)">
</ng2-smart-table>
This function helped me decide on what custom action to execute.
onCustomAction(event) {
switch ( event.action) {
case 'viewrecord':
this.viewRecord(event.data);
break;
case 'editrecord':
this.editRecord(event.data);
}
}
public editRecord(formData: any) {
this.modalRef = this.modalService.open(AddProfileComponent);
this.modalRef.componentInstance.formData = formData;
this.modalRef.result.then((result) => {
if (result === 'success') {
this.loadData();
}
}, (reason) => {
});
}
public viewRecord(formData: any) {
this.modalRef = this.modalService.open(ViewProfileComponent);
this.modalRef.componentInstance.formData = formData;
this.modalRef.result.then((result) => {
if (result === 'success') {
this.loadData();
}
}, (reason) => {
});
}
I had same problem, and found the solution with a custom action, based on following example : basic-example-custom-actions.component
settings :
actions: {
add: false,
edit: false,
delete: false,
custom: [{ name: 'ourCustomAction', title: '<i class="nb-compose"></i>' }],
position: 'right'
},
In the template : we define the function called by our action
<ng2-smart-table #ourTable [settings]="settings" [source]="source"
(custom)="onCustomAction($event)">
We need the router :
import {Router} from '@angular/router';
...
constructor(private router: Router) {}
Then, we can redirect to another page :
onCustomAction(event) {
// alert(`Custom event '${event.action}' fired on row №: ${event.data.id}`);
this.router.navigate(['pages/ourPage']);
}
Same thing can be applied when a user click on a row :
(userRowSelect)="onCustomAction($event)"
In case you are still looking for a solution, I ran into the same problem and couldn't fix it.
Reverting to release 1.1.0 (from you package.json) did it for me! I also discovered that the buttonContent tag works fine for Edit and Delete but not for Add.
Hopefully this bug will get fixed soon.
On html Template you can subscribe the edit an delete event:
<ng2-smart-table [settings]="settings" [source]="source" (edit)="onEdit($event)" (delete)="onDelete($event)"></ng2-smart-table>
onEdit onDelete are now your custom functions to change something.
i hope this helps!
来源:https://stackoverflow.com/questions/40572979/add-custom-button-in-actions-column-in-ng2-smart-table-angular-2