1

Im using this plugin to create a smart table in angualar 2:

https://akveo.github.io/ng2-smart-table/#/documentation

I need to customize the table.

ie) Only when user clicks on 'Create' link, the event should be trigerred, for which their documentation says:

'create' event : Triggered once a Create button clicked. Triggered only if table mode = external.

need to know how to set the mode external as I couldnt find anywhere in their doc.

As of now i am using like:

<ng2-smart-table [settings]="settings" [source]="source" (userRowSelect)="onUserRowSelect($event)"  class="table table-hover table-striped"></ng2-smart-table>

onUserRowSelect(event): void {
   //But this event triggers whenever(wherever in the table) user clicks, which is dont want !
}

Suggestion required!

phyme
  • 331
  • 2
  • 11
  • 25

2 Answers2

4

1) set settings object of ng2-smarttable as below 

settings = {

        mode: 'external',
    add: {
      addButtonContent: '<i class="ion-ios-plus-outline"></i>',
      createButtonContent: '<i class="ion-checkmark"></i>',
      cancelButtonContent: '<i class="ion-close"></i>',



    },
    edit: {
      editButtonContent: '<i class="ion-edit"></i>',
      saveButtonContent: '<i class="ion-checkmark"></i>',
      cancelButtonContent: '<i class="ion-close"></i>',


    },
    delete: {
      deleteButtonContent: '<i class="ion-trash-a"></i>',
      confirmDelete: true
    },
    columns: {
      id: {
        title: 'ID',
        type: 'number'
      },
      name: {
        title: 'Name',
        type: 'string'
      },
      lastName: {
        title: 'Last Name',
        type: 'string'
      },
      username: {
        title: 'Username',
        type: 'string'
      },
      email: {
        title: 'E-mail',
        type: 'string'
      },
      age: {
        title: 'Age',
        type: 'number'
      }
    }
  };

2) in html page define setting and source 

 <ng2-smart-table [settings]="settings"  [source]="source" (create)="openCreateDialog($event)"></ng2-smart-table>

you can perform any action which you want on create button click. define the openCreateDialog function in your ts file as below

openCreateDialog(event) {

    //logic
  }
Community
  • 1
  • 1
Shilpa Prajapati
  • 41
  • 1
0

I achieved by using (createConfirm) event of theirs like:

<ng2-smart-table [settings]="view_update_items_settings" [source]="source" (createConfirm)="onCreateConfirm($event)"  class="table table-hover table-striped"></ng2-smart-table>

in .ts file:

onCreateConfirm(event) {
    ...
}
phyme
  • 331
  • 2
  • 11
  • 25
  • I used the same for event handling but `onCreateConfirm(event)` is not getting called any how. Will you please provide better way to achieve that. I'm more interested to call a function on 'create' and then wanted to modify some Settings dyanamically. – Prasanna Jan 24 '18 at 11:34