CODEWITHSUNDEEP
angularsmart-table
Vitaly Menchikovsky
Vitaly Menchikovsky

Reputation: 8884

ng2-smart-table create button not working correctly

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

Upvotes: 3

Views: 6161

Answers (5)

Naim Mansor
Naim Mansor

Reputation: 1

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

Upvotes: 0

user5516751
user5516751

Reputation:

Solution is to use 

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

Upvotes: 0

ZamoraFTW
ZamoraFTW

Reputation: 37

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 ^^"

Upvotes: 0

swap
swap

Reputation: 282

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

Upvotes: 6

Yousef Al Kahky
Yousef Al Kahky

Reputation: 713

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

event.confirm.resolve(event.newData);

Upvotes: 0

Related Questions