0

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. this should never happen!

Before: enter image description here

After clicking on Remove in the details of row 2: enter image description here

If the Remove button is clicked again the page crashes as it tries to remove something that was already removed. If the row with the 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?

Fuzzy
  • 486
  • 3
  • 7
  • I asked this same question on the Telerik Forums here: [https://www.telerik.com/forums/angular-kendo-grid-keeps-details-of-removed-master-row-visible](https://www.telerik.com/forums/angular-kendo-grid-keeps-details-of-removed-master-row-visible) – Fuzzy Sep 11 '20 at 12:04

1 Answers1

1

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
         [trackBy]="trackBy"
    >
    </kendo-grid>

... public trackBy = (idx, item) => item;

svetq
  • 61
  • 1
  • 1
  • 3
  • 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., possibly caused by the different way of populating the grid that I used. – Fuzzy Sep 15 '20 at 15:40