22

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.

MathMax
  • 571
  • 7
  • 22
Yousef Al Kahky
  • 703
  • 1
  • 8
  • 23

6 Answers6

16

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) => {
      });
    }
David Njuguna
  • 803
  • 7
  • 8
10

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'
  },
nam do
  • 177
  • 1
  • 2
  • 6
  • 7
    i don't need to add new column called actions , i need to customize on the existing one to add other buttons with update and delete button – Yousef Al Kahky Mar 21 '17 at 07:06
7

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.

ggb
  • 71
  • 1
  • 2
  • This helped me. with this, I could add Edit icon and redirect to my page. Wondering how I can add Delete icon as well. Any idea? – SK. Aug 30 '18 at 19:45
7

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)"

Edit: if you need to customize the style, use following example :

Add to component.css

By default edit,delete div takes space. We have to remove that space so our custom button will adjust in respective table row.

:host ::ng-deep .ng2-smart-actions ng2-st-tbody-edit-delete {display: none !important;}

:host ::ng-deep ng2-st-tbody-custom a.ng2-smart-action.ng2-smart-action-custom-custom {
    display: inline-block;
    width: 80px;
    text-align: center;
    padding-top: 10px;
}
DependencyHell
  • 1,027
  • 15
  • 22
2

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.

-1

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!

newan
  • 152
  • 1
  • 7