Angular Kendo UI Grid recursively load with Detail Grid

Question

I am using Angular Kendo UI and having troubles to integrate a Grid, loaded recursively with a Detail Grid.

I have this example https://stackblitz.com/edit/angular-ior6b8 and want to avoid that the second Grid load data or blink every time the first Grid is updated and maintan on the second Grid the resizable columns property.

The problem is that every load of the first Grid, makes the detail component is removed and created again.

Answer 1

Instead of div block shown below.

<div *kendoGridDetailTemplate="let dataItem">
     <category-details [category]="dataItem"></category-details>
</div>

Replace with ng-template.

<ng-template kendoGridDetailTemplate let-dataItem>
    <category-details [category]="dataItem"></category-details>
</ng-template>

Are you refreshing the details templates data using any timer?