CODEWITHSUNDEEP
angularag-grid
Ehsan Nissar
Ehsan Nissar

Reputation: 683

Ag grid delete row and update table

I created a separate component with delete functionality for ag grid. On clicking the delete button, the delete method received that single row data and I was able to make a the delete call. Now how can I update the table after deleting? I was thinking instead of making an api call again to backend to fetch data again if I can just filter out the deleted row from table and send it back to table. But how can I do that since I am in a separate component where I do not have the whole table data but just one row data?

HTML

<ag-grid-angular
    #agGrid
    style="width: 100%; height: 500px;"
    class="ag-theme-alpine"
    domLayout='autoHeight'
    [rowData]="rowData"
    [gridOptions]="gridOptions"
    [frameworkComponents]="frameworkComponents"
>
</ag-grid-angular>

Code for buttonRenderer Component

public onDelete = async ($event) => {
  if ((await this.teamService.deleteTeamMember(this.params.node.data._id)) === false) 
{
  return;
}
  this.notification.success('Team member deleted successfully.');
//this.team = this.team.filter((item) => item._id !== customer._id);
};

Grid Component

this.gridOptions = {
        suppressMenuHide: false,
        columnDefs: [
        { headerName: 'Name', field: 'fullName', width: 150, sortable: true, filter: true },
        { headerName: 'Email', field: 'email', width: 170, sortable: true, filter: true, tooltipField: 'email'},
        {
          suppressMovable: true,
          headerName: 'Status',
          width: 100,
          field: 'disabled', cellRenderer: (params) => 
          params.data.disabled === false ? `<img src="assets/images/check.svg">` : `<img src="assets/images/minus.svg">`
        },
        { 
          headerName: 'Last Login', 
          field: 'lastLoginDate', 
          sortable: true, 
          filter: true,
          cellRenderer: (params) => params.data.lastLoginDate ? 
          new Date(params.data.lastLoginDate).toISOString().split('T')[0] + 
          `<img src="assets/images/clock.svg">` +
          new Date(params.data.lastLoginDate).toISOString().split('T')[1] : ``
        },
        {
          headerName: 'Created',
          width: 130,
          field: 'dateCreated',
          cellRenderer: (params) => new Date(params.data.dateCreated).toISOString().split('T')[0],
          sortable: true, 
          filter: true
        },
        {
          cellRenderer: 'buttonRenderer',
          cellRendererParams: {
            onClick: this.onBtnClick1.bind(this),
            label: 'Click 1'
          }
        },
       ],
      }

Upvotes: 1

Views: 14879

Answers (2)

Manzer A
Manzer A

Reputation: 3806

As the api call succeed, you can just update/delete/add using:-

https://www.ag-grid.com/angular-data-grid/data-update-transactions/

this.gridApi?.applyTransaction({ remove: [{ id: rowId }] });

Upvotes: 4

thisdotutkarsh
thisdotutkarsh

Reputation: 980

If its a simple table, that is a table that doesn't have virtual scrolling or lazy loading implemented. You could try splicing the deleted record from the rowData using its index as soon as the function to delete record from table has been invoked and then set the rows into the grid again after splicing.

You can leverage the grid API for achieving this as demonstrated in the following StackBlitz project.

Upvotes: 0

Related Questions