Refresh grid after record deletion without server call

[Alex]

Hello,

I'm using a grid control in my application that is bound to remote datasource by DataManager instance with ODataV4Adaptor :

 <ejs-grid #grid [dataSource]="resourcesDataManager"
              [allowPaging]="true"
              [pageSettings]="resourcesPageSettings"
              [allowFiltering]="true"
              [filterSettings]="resourcesFilterSettings"
              [allowSorting]="true"
              [sortSettings]="resourcesSortSettings"
              [editSettings]="resourcesEditSettings">
      <e-columns>
        <e-column field="id" headerText="Id" [isPrimaryKey]="true" [visible]="false"></e-column>
        <e-column field="firstName" headerText="First Name"></e-column>
        <e-column field="lastName" headerText="Last Name"></e-column>
        <e-column width='200'>
          <ng-template #template>
            <div class="center">
              <button (click)="onResourceDelete($event)" class="button is-danger is-delete" title="Delete">
                <span class="icon">
                  <i class="fas fa-trash-alt"></i>
                </span>
              </button>
            </div>
          </ng-template>
        </e-column>
      </e-columns>
    </ejs-grid>

this.resourcesDataManager = new DataManager({
      url: environment.apiBaseUrl + 'Resources',
      headers: [{ 'Accept': environment.acceptHeader }],
      adaptor: new ODataV4Adaptor()
    });

I want to use some of my additional logic before deleting a record from the server. In this case I'm using a onResourceDelete() event handler :

onResourceDelete(event): void {

    let row: HTMLTableRowElement = event.target.parentNode.parentNode.parentNode;
    let rowIndex = +row.getAttribute('aria-rowindex');
    this.grid.selectRow(rowIndex);
    let record = this.grid.getSelectedRecords()[0];

    //// some additional logic

    (<Promise<Object>>this.resourcesDataManager.remove('id', record['id']))
      .catch((error) => { console.log(error) })

  }

When I call "this.resourcesDataManager.remove('id', record['id'])" it performs a DELETE http request to the server, which is what I need, but then I want to remove selected row from the grid and refresh it's content without any server calls. The "this.grid.refresh()" perform a server call with GET http request which is not what i need.

How I can remove record from grid without reloading data from server ?

Thanks.

[Dhivya Rajendran]

Hi Alex, 

Thanks for contacting Syncfusion support. 

Query : I want to remove selected row from the grid and refresh it's content without any server calls. 

We have validated your query and you can achieve your requirement by using the below way. In the below code example we have remove data from currentViewData based on the selected index value and passed the result[New array] and count pair set value to the dataManagerSuccess method of Grid.  

Kindly refer to the below code example for more information. 

@Component({ 

  selector: 'app-container', 

  template: `<button ej-button id='print'(click)='print()'>Delete</button> 

  <ejs-grid #grid [dataSource]='data' [allowPaging]='true'> 

              <e-columns> 

                  <e-column field='OrderID' headerText='Order ID'width=100></e-column> 

                  <e-column field='ShipName' headerText='Ship Name' width=100></e-column> 

              </e-columns> 

              </ejs-grid>` 

}) 

export class AppComponent implements OnInit { 

  @ViewChild('grid') 

  public grid: GridComponent; 

  print() { 

    var apps = this.grid.currentViewData; // get current view data  

    var selected = this.grid.getSelectedRecords()[0]; // get selected records 

    if (selected) { 

      var removeIndex; 

      apps.some((data, index) => { 

        removeIndex = index; 

        return data.OrderID === selected.OrderID; 

      }); 

      apps.splice(removeIndex, 1); // remove data based on selected index 

      this.grid.renderModule.dataManagerSuccess({ result: apps, count: this.grid.pageSettings.totalRecordsCount }) 

    } 

  } 

  ngOnInit(): void { 

    . . . . 

  } 

} 

Help documentation :  

https://ej2.syncfusion.com/angular/documentation/grid/api-gridComponent.html#currentviewdata  

https://ej2.syncfusion.com/angular/documentation/grid/api-gridComponent.html#getselectedrecords  

Regards,
R.Dhivya  

[Alex]

Thanks.

Your answer is very helpful for me.

[Dhivya Rajendran]

Hi Alex, 

Thanks for your update. 

We are happy to hear that the provided solution was helpful to resolve your problem. 

Regards, 

R.Dhivya