3

I'm using ng2-smart-table component in my project and I found an issue that is blocking me.

I have a smart table (mode=inline) with 3 columns: id, column1 and column2. Id is not editable because until I call my backend and generate the row, I won't know the value so when I add a new row, the cell for ID remains empty.

I'm listening the emitter "onCreateConfirm", when it's triggered, I call my backend with a post request and wait for the response.

When I handle the response, I've been unable to find the way to update that cell in the row.

Has somebody faced the same issue? Is this flow possible at all or it is a limitation of the component?

Maybe I'm doing something wrong and I should not be following this flow at all and there is another way to do it.

Any help will be appreciated.

Javier de la Cueva
  • 816
  • 1
  • 5
  • 11

1 Answers1

13

Finally, after spending good amount of time got this ...hope this help !!!

Here, when you are clicking on Add New initially you will get the empty cells where id will be disabled and you will insert the values to column1 , column2. On clicking the create button , the calling of your post happens in onPostCall method and waits for the response then updates the cell value and finally displays the value as per your requirement , the same will happen when you click on edit button

yourapp.component.html

<ng2-smart-table [settings]="settings"  [source]="data"
(createConfirm)="onPostCall($event)" 
(editConfirm)="onPostCall($event)">
</ng2-smart-table>

yourapp.component.ts

 async onPostCall(event){
       this.value= await this.yourService.
                        getId(yourarg).first().toPromise();

                  event.newData.id =this.value
                   //  console.log(this.value);

                  event.confirm.resolve(event.newData);
                 }

 //in your settings
 settings = {
     add: {
           confirmCreate: true,
          },
    edit: {
           confirmSave: true,
          },
// 
  columns: {
            // other columns
            id: {
                editable: false,
                addable: false,
               }
           },
}

your.service.ts

 getId(value:any){
  // your options here e.g,let options = new RequestOptions({  method: RequestMethod.Post });
  // your content here e.g, let body = JSON.stringify(value);
  return this.http.post('your_url',
          body,
          options
          ).map(res => {return res.json().yourvalue});
}

dont forget to add the entry YourService in providers of app.module.ts !!

Ampati Hareesh
  • 1,852
  • 1
  • 15
  • 20