Angular Kendo Grid keeps details of removed master row visible

[Fuzzy]

I am using an angular-kendo-grid (version 6.14.5) in angular 10.0.3 with a kendoGridCellTemplate to show details.

<kendo-grid #KendoGrid
 [data]="gridSettings.gridView"
 (...)
>
 <kendo-grid-column
   field="code"
   title="code"
 >
 (...)
 <ng-template kendoGridCellTemplate let-dataItem>
    <details-component
      [id]="dataItem.Id"
      (onDelete)="onDelete($event)">
    </details-component>
 </ng-template>
 (...)
</kendo-grid>

The details component has a "Remove" button that is supposed to remove all details for that master row. When the button is pressed, the 'onDelete()' event is emitted back to the masterComponent and the masterComponent removes the row from it's datasource.

onDelete(deletedRowId: number): void {
   this.rows = this.rows.filter(r => r.id !== deletedRowId.id);

   this.loadGridResult();
}

loadGridResult(): void {
  this.gridSettings.gridView = {
    data: orderBy(this.rows, this.gridSettings.sort)
      .slice(this.gridSettings.skip, this.gridSettings.skip + this.gridSettings.pageSize),
    total: this.rows.length
  };
}

On screen the row is removed from the table and the next row is expanded (I asume this happens since the row with this index used to be expanded), but the details for the already removed row are still shown. This means that now the table shows a row with incorrect details. The shown details do not belong to this row. I don't think this should ever happen!

The attached images show what I mean. First before any button is clicked an then after clicking on Remove in the details of row 2: 
If the Remove button is clicked again the page crashes as it tries to remove something that was already removed. If any row with now corrupt details is collapsed and again expanded the correct details are loaded.
It seems like the details of row 2 are incorrectly kept in memory or something. Can I do something to solve that?
Can someone explain what is going on here and why this doesn't work as I expect? What can I do to fix this?

I asked the same question on SO here but did not get any response yet. Thanks in advance..

[Svet]

Hi Fuzzy,

Thank you for the provided details.

The demonstrated behavior is caused due to the Grid reusing its rows and detail templates by default. In order to recreate them with the proper information it would be required to return the dataItem by the trackBy function. Please check the following example demonstrating this approach:

https://stackblitz.com/edit/angular-nuajzf-sbdahs?file=app%2Fapp.component.ts

        <kendo-grid
            [kendoGridBinding]="gridView"
            [sortable]="true"
            [kendoGridExpandDetailsBy]="'ProductID'"
            [(expandedDetailKeys)]="expandedDetailKeys"
             [trackBy]="trackBy"
        >
...
    public trackBy = (idx, item) => item;

I hope this helps.

Regards,
Svetlin
Progress Telerik

[Fuzzy]

Thanks alot for the response. I didn't know about the trackBy option. It did took me some time to make it work as intended, but in the end it solved the problem. I did have to make some slight changes and ended up using the following for trackBy.

public trackBy(index: number, item: GridItem): any {    return item.data["courierCode"];  }

When I used your code for trackBy from the StackBlitz it caused infinite reloading of the expanded details template. I used a slightly different way to populate the grid than the StackBlitz does, that may have something to do with it.

Also in the StackBlitz you showed the expandDetailsBy method, which could be used in the kendoGridExpandDetailsBy event of the grid, but wasn't. Instead the value "ProductID" was directly provided making the method unnecessary..It seems to not matter at all,.but in my final code I did use the method instead.