0

I have been using ng2-smart-table plugin for the table grid. There is an Add new button to add entry into the table.

But I just want to trigger the 'Add new' event from an external button (May be top of the table but not within the table). There is a feature already available in the ng2-smart-table which is completely reverse to my requirement. That can be achieved by using 'mode:external'.

Currently this is open with their Github page as an issue.

If they don't have an option with Ng2-smart-table, is there anyway to bind an event to other buttons(External) in Angular 6? If so, how can I do it?

halfer
  • 19,824
  • 17
  • 99
  • 186
Raja
  • 3,477
  • 12
  • 47
  • 89

3 Answers3

2

You can trigger the ng2-smart-table's create event via DOM object event.

Let's say my ng2-smart-table's add button settings

add: {
      addButtonContent : '<span class="add"><i class=""></i></span>',
      createButtonContent:'<i class="far fa-save"></i>',
      cancelButtonContent: '<i class="fas fa-times"></i>',
      confirmCreate: true,
    }

then on click of your external button trigger the click of 'add' button in the ng2-smart-table like

onAdd(event) {
    $(".add").click();   
  }
Lollu
  • 21
  • 1
0

You need to use LocalDataSource or ServerDataSource.

I had the same question, and after trying some examples, I saw the good one here. In this part of the code they use the data source method load(data) with source(LocalDataSource):

constructor(protected service: BasicExampleLoadService) {
   this.source = new LocalDataSource();

   this.service.getData().then((data) => {
     this.source.load(data);
   });
}

Then i try with my code and did the same with LocalDataSource, but to add a row into the table I did this:

this.source.add({
  name: 'name',
  description: 'desc',
  numQuestions: '8',
});
this.source.refresh();

And it work for me. I hope it helps.

Javier Navarro
  • 71
  • 1
  • 5
0

try it: on your html:

<button (click)="addRecord()">Add</button> <ng2-smart-table #smartTable [settings]="settings" [source]="source"></ng2-smart-table>

on your component: @ViewChild('smartTable') smartTable; . . . addRecord() { this.smartTable.grid.createFormShown = true; this.smartTable.grid.getNewRow(); }

Mauricio Manjarres
  • 11
  • 1