ng2-smart-table create button not working correctly

Question

I am getting data from firebase and displaying it with ng2-smart-table.

However, the add dialog doesn't close after I add the data. It's still opened with the values that were added.

Here's my code:

settings = {
    pager:{perPage:50},
    add: {
        addButtonContent: '<i class="ion-ios-plus-outline"></i>',
        createButtonContent: '<i class="ion-checkmark"></i>',
        cancelButtonContent: '<i class="ion-close"></i>',
        confirmCreate: true,
    },

The function to create:

onCreateConfirm(event): any {
    //this service is updating the new data to firebase.
    this.service.createData(event.newData);
    //after that the newdata still on edit mode and not closing it...
}

Vitaly, I've tried my best to clarify what you requested in your question, but your grammar here doesn't make sense at all! Could you confirm that what I've just edited is correct? — Edric, Jul 09 '18 at 08:28

swaroop suthar · Answer 1 · 2016-11-15T12:33:52.657

Add this in your template html

     <ng2-smart-table [settings]="settings" [source]="source" 
(createConfirm)="onCreateConfirm($event)"
(deleteConfirm)="onDeleteConfirm($event)"
(editConfirm)="onSaveConfirm($event)">
     </ng2-smart-table>

Component

    settings = {delete: {
      confirmDelete: true
    },
    add: {
      confirmCreate: true
    },
    edit: {
      confirmSave: true
    },
     .......
    }


  source: LocalDataSource;

  constructor() {
    this.source = new LocalDataSource(this.data);
  }

  onDeleteConfirm(event):void {
    if (window.confirm('Are you sure you want to delete?')) {
      event.confirm.resolve(); 
    } else {
      event.confirm.reject();
    }
  }

  onSaveConfirm(event):void {
    if (window.confirm('Are you sure you want to save?')) {
      event.newData['name'] += ' + added in code'; 
      event.confirm.resolve(event.newData);
    } else {
      event.confirm.reject();
    }
  }

  onCreateConfirm(event):void { 
      event.confirm.resolve(event.newData);
  }

this isn't looks correct because its trigger onCreateConfirm once the user click on plus and should be trigger only after user fill all data — Vitaly Menchikovsky, Nov 15 '16 at 10:04
I don't think you right! you didn't read the post. the issue that it write to table 2 times one because it bund to firebase list and secont that you do resolve. — Vitaly Menchikovsky, Nov 15 '16 at 14:58

score 0 · Answer 2 · answered Nov 10 '16 at 14:33

0

you must add this line at the end of onCreateConfirm(event)

event.confirm.resolve(event.newData);

answered Nov 10 '16 at 14:33

Yousef Al Kahky

703
1
8
23

but this will add automatically to the table and also my function add this to firebase db, and then it will auto update the table for 2 instance one from firebase and other for resolve. – Vitaly Menchikovsky Nov 12 '16 at 06:28
i can't understand your problem , can you give me more explanation – Yousef Al Kahky Nov 13 '16 at 10:54
the issue is that I add this new data to firebase list. this list bind to the data source from table and then its get updated on the table, while after that if I will do your way it will update the table by it functionality and I will have 2 instanse, one is dummy result of resolve and other one by firebase list. – Vitaly Menchikovsky Nov 13 '16 at 14:37

score 0 · Answer 3 · answered May 03 '17 at 16:36

The problem is on angularfire in combination with this table, I think its some kind of bug.
I am testing the table too with AngularFire2 and I have the same issue. The only way to avoid this (homemade) is:

settings = {
    pager: {
        perPage: 1000
    }... // More settings, add, edit, actions, etc

When u edit and trigger the save button it reload all, BUT if the reloaded size + original size is lower than the pager.perPage limit u won´t see the duplicated things. This is my method:

    onEditConfirm(event): void {
    console.log(event.data); // Testing only
    console.log(event.newData); // Testing only
    this.af.database.object('Usuarios/' + 
    event.data.nif.toLowerCase()).set({
        email: event.data.email,
        nombre: event.newData.nombre,
        nif: event.data.nif,
        rol: event.data.rol
    });
    this.source.update(event.data, event.newData); //it update well
    event.confirm.resolve(event.newData);
}

Now if we suppose we have 70 rows it will duplicate to 140, but if u have the pager.perPage property on a higher value u will not see the duplicated items. Tested. However it´s a bad solution, but I really think that it´s a bug of smarttables

Hope it helps 5 months later ^^"

score 0 · Answer 4 · 2018-07-09T07:30:54.680

0

Solution is to use

this.source = new LocalDataSource();
const data = this.service.getData();
this.source.load(data);

edited Jul 09 '18 at 07:30

answered Jun 30 '18 at 23:48

score 0 · Answer 5 · answered May 26 '19 at 03:19

Finally i get the solution by trying many times and this code work for me

First, you read you data once by using firebase or angularfire2 for example

  this.user.take(1).subscribe(response => {
  response.forEach(item=>{
    this.data.push({
      id:this.i++,
      firstName: item.subs_name, 
      lastName: item.subs_info, 
      email: item.subs_price, 
      username: item.subs_storage
    });
  })
  this.source.load(this.data);
});

Second, you update the data in onSaveConfirm method

onSaveConfirm(event): void  {
 if (window.confirm('Are you sure you want to make a changes?')) {
  event.confirm.resolve();
  this.database.object(`subscription/${event.newData.id}`).update({
    subs_name: event.newData.firstName, 
    subs_info: event.newData.lastName, 
    subs_price: event.newData.email, 
    subs_storage: event.newData.username
   })
  } else {
   event.confirm.reject();
  }
}

By doing like this in the system will show you the dummy data while if you make a changes it will save in you firebase

It's work for me i hope it will work for you too

ng2-smart-table create button not working correctly

5 Answers5