Incorporate a personalized button within the actions column of ng2-smart-table for Angular 2 development

Question

Incorporate a personalized button within the actions column of ng2-smart-table for Angular 2 development

Within the context of an ng2-smart-table component in Angular 2, I am attempting to include a new button within the actions column that, when clicked, will navigate to another page. Despite my efforts to implement this new button alongside the existing add, edit, and delete buttons, I have encountered some challenges:

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
    },

I am seeking guidance on how to successfully integrate this new button into the table. Upon consulting the available documentation, I was unable to locate any relevant information pertaining to this specific requirement.

angular typescript ng2-bootstrap

Answer 1

Answer №1

In my List module

actions: {
      columnTitle: 'Actions',
      add: false,
      edit: false,
      delete: true,
      custom: [
      { name: 'viewdata', title: '<i class="fa fa-eye"></i>'},
      { name: 'editdata', title: '&nbsp;&nbsp;<i class="fa  fa-pencil"></i>' }
    ],
      position: 'right'
    },

Next, in the template

<ng2-smart-table class="table table-hover" [settings]="configurations" [source]="datasource"
   (deleteConfirm)="onDeletionConfirmation($event)"  (custom)="onCustomEvent($event)">
  </ng2-smart-table>

This function helped me determine which custom action to perform.

onCustomEvent(event) {
      switch ( event.action ) {
        case 'viewdata':
          this.viewData(event.data);
          break;
       case 'editdata':
          this.editData(event.data);
      }
    }

public editData(formData: any) {
      this.modalRef = this.modalService.open(EditProfileModule);
      this.modalRef.componentInstance.formData = formData;
      this.modalRef.result.then((result) => {
        if (result === 'success') {
          this.loadInformation();
        }
      }, (reason) => {
      });
    }

public viewData(formData: any) {
      this.modalRef = this.modalService.open(ViewProfileModule);
      this.modalRef.componentInstance.formData = formData;
      this.modalRef.result.then((result) => {
        if (result === 'success') {
          this.loadInformation();
        }
      }, (reason) => {
      });
    }

Answer 2

In my List module

actions: {
      columnTitle: 'Actions',
      add: false,
      edit: false,
      delete: true,
      custom: [
      { name: 'viewdata', title: '<i class="fa fa-eye"></i>'},
      { name: 'editdata', title: '&nbsp;&nbsp;<i class="fa  fa-pencil"></i>' }
    ],
      position: 'right'
    },

Next, in the template

<ng2-smart-table class="table table-hover" [settings]="configurations" [source]="datasource"
   (deleteConfirm)="onDeletionConfirmation($event)"  (custom)="onCustomEvent($event)">
  </ng2-smart-table>

This function helped me determine which custom action to perform.

onCustomEvent(event) {
      switch ( event.action ) {
        case 'viewdata':
          this.viewData(event.data);
          break;
       case 'editdata':
          this.editData(event.data);
      }
    }

public editData(formData: any) {
      this.modalRef = this.modalService.open(EditProfileModule);
      this.modalRef.componentInstance.formData = formData;
      this.modalRef.result.then((result) => {
        if (result === 'success') {
          this.loadInformation();
        }
      }, (reason) => {
      });
    }

public viewData(formData: any) {
      this.modalRef = this.modalService.open(ViewProfileModule);
      this.modalRef.componentInstance.formData = formData;
      this.modalRef.result.then((result) => {
        if (result === 'success') {
          this.loadInformation();
        }
      }, (reason) => {
      });
    }

Answer 3

Answer №2

Give it a shot:

To customize your columns, include a new column named "Actions":

  Actions: //or something
  {
    title:'Details',
    type:'html',
    valuePrepareFunction:(cell,row)=>{
      return `<a title="View Product Details "href="Your secret api key or unique identifier/${row.Id}"> <i class="ion-edit"></i></a>`
    },
    filter:false       
  },
  Id: { //utilize this Id within ${row.Id}
    title: 'Identifier',
    type: 'number'
  },

Answer 4

Give it a shot:

To customize your columns, include a new column named "Actions":

  Actions: //or something
  {
    title:'Details',
    type:'html',
    valuePrepareFunction:(cell,row)=>{
      return `<a title="View Product Details "href="Your secret api key or unique identifier/${row.Id}"> <i class="ion-edit"></i></a>`
    },
    filter:false       
  },
  Id: { //utilize this Id within ${row.Id}
    title: 'Identifier',
    type: 'number'
  },

Answer 5

Answer №3

I encountered a similar issue and managed to resolve it by using a custom action approach, inspired by this example: basic-example-custom-actions.component

Here are the settings I implemented:

actions: {
  add: false,
  edit: false,
  delete: false,
  custom: [{ name: 'ourCustomAction', title: '<i class="nb-compose"></i>' }],
  position: 'right'
},

In the template: I defined the function associated with our custom action

<ng2-smart-table #ourTable [settings]="settings" [source]="source"
    (custom)="onCustomAction($event)">

A router is required for redirection:

import {Router} from '@angular/router';
...
constructor(private router: Router) {}

Subsequently, we can navigate to another page as needed:

onCustomAction(event) {
  // alert(`Custom event '${event.action}' fired on row №: ${event.data.id}`);
  this.router.navigate(['pages/ourPage']);
}

The same concept can be applied when a user clicks on a row:

(userRowSelect)="onCustomAction($event)"

Edit: To customize the style, refer to the following example:

Add to component.css

To ensure our custom button fits correctly within the table row, we need to adjust the default styling of the edit and delete elements.

: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;
}

Answer 6

I encountered a similar issue and managed to resolve it by using a custom action approach, inspired by this example: basic-example-custom-actions.component

Here are the settings I implemented:

actions: {
  add: false,
  edit: false,
  delete: false,
  custom: [{ name: 'ourCustomAction', title: '<i class="nb-compose"></i>' }],
  position: 'right'
},

In the template: I defined the function associated with our custom action

<ng2-smart-table #ourTable [settings]="settings" [source]="source"
    (custom)="onCustomAction($event)">

A router is required for redirection:

import {Router} from '@angular/router';
...
constructor(private router: Router) {}

Subsequently, we can navigate to another page as needed:

onCustomAction(event) {
  // alert(`Custom event '${event.action}' fired on row №: ${event.data.id}`);
  this.router.navigate(['pages/ourPage']);
}

The same concept can be applied when a user clicks on a row:

(userRowSelect)="onCustomAction($event)"

Edit: To customize the style, refer to the following example:

Add to component.css

To ensure our custom button fits correctly within the table row, we need to adjust the default styling of the edit and delete elements.

: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;
}

Answer 7

Answer №4

To customize your ng2-smart-table, add the following code to your settings file:

actions: {
  edit: false, //for example
  custom: [{ name: 'routeToAPage', title: `<img src="/icon.png">` }]
}

You now have a custom button called routeToAPage with an image on it.

Next, include this in your ng2-smart-table tag:

<ng2-smart-table [settings]="settings" [source]="dataSource" (custom)="route($event)"></ng2-smart-table>

Create a route function to handle the custom action as needed.

Answer 8

To customize your ng2-smart-table, add the following code to your settings file:

actions: {
  edit: false, //for example
  custom: [{ name: 'routeToAPage', title: `<img src="/icon.png">` }]
}

You now have a custom button called routeToAPage with an image on it.

Next, include this in your ng2-smart-table tag:

<ng2-smart-table [settings]="settings" [source]="dataSource" (custom)="route($event)"></ng2-smart-table>

Create a route function to handle the custom action as needed.

Answer 9

Answer №5

If you're still on the quest for a solution, I too encountered the same issue and was unable to resolve it.

Going back to version 1.1.0 (as specified in your package.json) did the trick for me! I also noticed that the buttonContent tag works well for Edit and Delete buttons but not for Add.

Let's hope this bug gets sorted out soon.

Answer 10

If you're still on the quest for a solution, I too encountered the same issue and was unable to resolve it.

Going back to version 1.1.0 (as specified in your package.json) did the trick for me! I also noticed that the buttonContent tag works well for Edit and Delete buttons but not for Add.

Let's hope this bug gets sorted out soon.

Answer 11

Answer №6

Within an HTML template, you have the ability to subscribe to edit and delete events:

<ng2-smart-table [settings]="settings" [source]="source" (edit)="onEdit($event)" (delete)="onDelete($event)"></ng2-smart-table>

Your onEdit and onDelete functions can be customized to make changes as needed.

I trust this information is helpful!

Answer 12

Within an HTML template, you have the ability to subscribe to edit and delete events:

<ng2-smart-table [settings]="settings" [source]="source" (edit)="onEdit($event)" (delete)="onDelete($event)"></ng2-smart-table>

Your onEdit and onDelete functions can be customized to make changes as needed.

I trust this information is helpful!

Incorporate a personalized button within the actions column of ng2-smart-table for Angular 2 development

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

The FaceBook SDK in React Native is providing an incorrect signature when trying to retrieve a token for iOS

Angular 2 regex for validating FQDN/URL formats

Encountering issues with app functionality following update to Ionic RC4 version

Table with a responsive c3 chart

Is there a way to imitate a method that initiates an AJAX request?

Exploring Typescript code through a practical example with reference to Uniswap's implementation

Implementing Limited Results in Redis FT.SEARCH with TypeScript

ngx-infinite-scroll event fails to trigger upon scrolling to the end

Having trouble migrating Angular with Nativescript? Encounter an issue parsing the angular.json file

Error: Cannot modify the constant property 'name' of the function."&squo;

How can you determine the type of an argument based on the type of another argument?

Exploring the Power of SectionList in Typescript

What are the steps to display Firestore data on the server instead of the client side?

Trouble Getting formGroup to Function Properly with Radio Button in Angular 2

Automatically encapsulate Typescript definition files within modules

Notifying Subscribed Angular8 Components Based on Logical Conditions with Observables Inside Services

Can anyone provide a solution for fixing TypeScript/React error code TS7053?

Using TypeScript and HTML to toggle a switch and retrieve its value

Navigating data flow between tabs in Ionic

How to conceal an element in Angular using its unique identifier