add custom button in actions column in ng2-smart-table angular 2

 ̄綄美尐妖づ 提交于 2019-11-30 03:31:05

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: '&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) => {
      });
    }

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!

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!