Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add custom button in actions column in ng2-smart-table in Angular 2

Tags:

In an ng2-smart-table in Angular 2 I want to add a new button in the actions column and by clicking on this button it will route to another page. This code has the add, edit, and delete buttons. 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 the documentation and I couldn't find anything related to this.

like image 521
Yousef Al Kahky Avatar asked Nov 13 '16 10:11

Yousef Al Kahky


2 Answers

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: '&nbsp;&nbsp;<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) => {       });     } 
like image 62
David Njuguna Avatar answered Oct 13 '22 18:10

David Njuguna


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'   }, 
like image 21
nam do Avatar answered Oct 13 '22 19:10

nam do