Grid column template with inside component do not update

[Pierre]

Hi, I have a simple column that displays a numeric value in box colored text. I use a shared component for that.

Like:

<kendo-grid-column field="{{ col.field }}" title="{{ col.title }}" format="{{ col.gridFormat }}" [width]="col.width" [hidden]="!col.gridVisible" media="{{ col.media }}">
  @if (col.field == 'statut') {
    <ng-template kendoGridCellTemplate let-dataItem="dataItem">
      {{ dataItem.statut }}
      <share-app-statut [statut]="dataItem.statut"></share-app-statut>
    </ng-template>
  }
</kendo-grid-column>

Everything works well until I change some filters then the grid updates. All the fields change except the component in the template (but the numerical value changes we can see it with the {{dataitem.statut}}.  The only way I can force the grid to redraw the template component is to set the data to null before setting a new value. (I use a signal to feed the grid). So a:

this.data.set(null);
this.data.set([......]); work!

But the grid flash... I am new with template inside grid, What do I do wrong?

[Martin Bechev]

Hello Pierre,

Based on the provided details I am not sure how the component in the Grid cell looks before and after applying the filtering and what is the desired end goal. I will provide some generic debugging tips and suggestions, but if the issue persists, could you provide more details about the share-app-statut component? Specifically, its implementation and how it handles input changes would be helpful for further assistance. Thank you in advance.

It seems that the issue you're experiencing is related to Angular's change detection not being triggered correctly for the shared component within the grid cell template. Here are some suggestions to address this issue:

Ensure Proper Change Detection

1. Check @Input() Properties: Ensure that the share-app-statut component has an @Input() property for statut and that it properly reacts to changes in this input. This is crucial for Angular to detect changes and update the component accordingly.

2. Change Detection Strategy: Consider using the OnPush change detection strategy in your share-app-statut component to optimize performance. This strategy requires that the component only updates when its input properties change.

   import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
   
   @Component({
     selector: 'share-app-statut',
     templateUrl: './share-app-statut.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
   })
   export class ShareAppStatutComponent {
     @Input() statut: any;
   }
   

Use trackBy Function

Implementing a trackBy function can help Angular identify which items in the list have changed. This can optimize the rendering process and ensure that the grid updates correctly without unnecessary flashing.

<kendo-grid [data]="gridData" [kendoGridBinding]="gridData" [kendoGridTrackBy]="trackByFn">
  <kendo-grid-column field="{{ col.field }}" title="{{ col.title }}" format="{{ col.gridFormat }}" [width]="col.width" [hidden]="!col.gridVisible" media="{{ col.media }}">
    <ng-template kendoGridCellTemplate let-dataItem="dataItem">
      {{ dataItem.statut }}
      <share-app-statut [statut]="dataItem.statut"></share-app-statut>
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

In your component class, define the trackByFn function:

trackByFn(index: number, item: any): any {
  return item.id; // or any unique identifier of your data items
}

Refresh Grid Data

You can try refreshing the grid data more efficiently:

• Instead of setting the data to null, use a shallow copy of the data array to force the grid to recognize changes:

  this.data=[...this.data]

Regards,

Martin Bechev
Progress Telerik