ng2-smart-table does not bind after delete

ng2-smart-table remove add new
ng2-smart-table expand row
refresh ng2-smart-table
ng2-smart-table custom editor
ng2-smart-table edit event
ng2-smart-table actions
ng2-smart-table add new row
ng2-table

I am trying to use ng2-smart-table to show data and inline editing. However it seems something is wrong with this component. I cloned the repo and run some tests locally. I got the basic example demo and added the input data object to see the changes/binding in the object:

<ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>
<pre>{{data | json}}</pre>

When I "Add New" row, it shows the new entry in the object array as expected. Editing any row works too, updating the row properly. However, when you delete a row, the object does not change and keeps showing the deleted row in the object array but not in the grid. When I try to add another row, it shows the new row in the grid, but it does not update/bind the new value in the object array. Update still works as expected.

I post this question in ng2-smart-table's github and I got not answer there so I hope I can get it here.

So it this a real bug? Here is the Plunker with my tests.

Thank y'all.


You have to refresh the local datasource which you handed to the table.

This is how I did it.

HTML

<ng2-smart-table 
    [settings]="itemTableSettings"
    [source]="itemSource" 
    (deleteConfirm)="onDeleteConfirm($event)">
</ng2-smart-table>

Typescript Code

import {LocalDataSource} from 'ng2-smart-table';

items: Item[];
itemSource: LocalDataSource;

itemTableSettings = {
    delete: {
      confirmDelete: true
    },
    columns: {...}
}

constructor() {}

ngOnInit() {
    this.itemSource = new LocalDataSource(this.items);
}

onDeleteConfirm(event) {

    // Delete item from array
    let index = this.items.indexOf(event.data);
    console.log(index);
    this.items.splice(index, 1);

    // Update the array in the service class


    // Update the local datasource
    this.itemSource = new LocalDataSource(this.items);
}

Worked for me.

javascript - ng2-smart-table does not bind after delete, I post this question in ng2-smart-table's github and I got not answer there so I hope I can get it here. So it this a real bug? Here is the Plunker with my tests. As I already discussed, I am using ng2-smart table plugin for angular.js 4 Grid, So You can bind this tutorial code with angular 2 as well. I have already shared Smart Table Listing with pagination,sorting and searching Using Angular 1.4 and CRUD Functionality Angular 1.4 and Smart Table .


Here you are a simpler solution:

 onDeleteConfirm(event): void {
    if (window.confirm('Are you sure you want to delete?')) {
      const index = event.source.data.indexOf(event.data);
      event.source.data.splice(index, 1);
      event.confirm.resolve();
    } else {
      event.confirm.reject();
    }
  }

akveo/ng2-smart-table, GitHub is home to over 50 million developers working together to host and review code, manage projects Table not updating when list source changing #335. Open. Kresys opened this issue on May 4, 2017 · 15 comments. Open My program does not add or remove, it updates the entry every keypress, so I must use the  As somehow binding does not take into effect for some of the features when you change the settings object. I think because rendering is done on some values via a method call (html portion of smart-table ngIf via GetSettting('property'), therefore set once --- unless you call initGrid.


Added few lines of code to the plnkr code provided

Here is the working Plunker: https://plnkr.co/edit/UW9s11xhi5wJgt0nLzXj?p=preview

In the template

<ng2-smart-table [settings]="tableSettings" [source]="data"
(deleteConfirm)="modifyData($event)"
(createConfirm)="addData($event)"
></ng2-smart-table>
    <pre>{{data | json}}</pre>

In app.ts

delflag=false;
  addData(event){
    if(this.delflag){
      this.data.push(event.newData);
    }
    // console.log(event);
    event.confirm.resolve(event.newData);
  }
  modifyData(event){
    this.delflag=true;
    // console.log(this.data);
    let delrow=Object.keys(event.data);
    for(var j in this.data)
    {
      // console.log(this.data,event.data);
    if(this.data[j]==event.data)
      {
        this.data.splice(j,1);
        // this.data=event.source.data;
      }
    }
    event.confirm.resolve(event.source.data);

    // console.log(this.data)
    if(this.data.length==0)
      {this.data=[];
        this.delflag=false;
      }
  }

In settings

tableSettings = {
add:{
     confirmCreate:true
    },
     delete :{
       confirmDelete: true
     },
//other fields
}

Hope this helps !!!

javascript: ng2-smart-table does not bind after delete, I am trying to use ng2-smart-table to show data and inline editing. However it seems something is wrong with this component. I cloned the repo  ng2-smart-table Smart data table library with sorting, filtering, pagination & add/edit/delete functions. Quick Start Examples Documentation View on GitHub Demo.


Assome data is your table data source, so you have:

onDeleteConfirm(event): void {
  if (window.confirm('Are you sure you want to delete?')) {
   this.data.remove(event.data)
  } else {

  }
}

ng2-smart-table, Features. Local data source (Server/API DataSource is on its way); Filtering; Sorting; Pagination; Inline Add/Edit/Delete; Flexible event model  Listing data into HTML table using ng2-smart-table. Enable sorting into smart table column. Enable and Disable Filtering into angular 4 smart table column. Adding Pagination into angualr 4 smart table column. Actions Button for add,edit and delete row.


Add,Edit and Delete Example Using ng2-smart Table With Angular 4 , Smart table will call addRecord() method on occurrence of createConfirm event. We will bind this method into smart table 2/4 setting params,. 'ng2-smart-table' is not a known element: If 'ng2-smart-table' is an Angular component, then verify that it is part of this module. If 'ng2-smart-table' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. (" My First Angular App [ERROR ->]


fire edit/delete actions on custom column ng2-smart-table, fire edit/delete actions on custom column ng2-smart-table - angular. as subscriptions made in one bind pass will not be disposed of on subsequent ones. delete: false, update: false} in my page settings that it wasn't carrying forward into the table settings. after looking at the settings property update code its looks like. deepExtend(this.settings, this.defaultSettings); works when it is changed to. deepExtend(this.defaultSettings, this.settings);


ng2-smart-table In Angular, --skip-tests command is for removing test projects. --spec false command is for skip test file generation. Step 2. Now install smart table package  NOTE: SQL After DELETE Triggers not Supported on Views. After DELETE Triggers in SQL Server Example. In this example, we will show you how to create an After delete Triggers in SQL Server. And here, we are using the CREATE TRIGGER Statement to create a trigger on the Employee table.