ejs-grid still fires off function calls from template even when dataSource has 0 elements (empty array)

[Dimitrije Prosevski]

Here's a simple way to reproduce bug. You have a grid with 2 entries, when you click on a row it splices out the first row in the grid. So eventually, when you have no entries dataSource=[] ​then the displayData() should not trigger (get called) anymore. However, it is actually still getting called and that is the reason why I have  console.log(data.index); in there so you can see it happen as it spams the console.

Typescript:

  public gridData: any = [

    {

      id: 1,

      name: "Renewal",

      dateStart: new Date(),

      dateEnd: "09-12-2025"

    },

    {

      id: 2,

      name: "New",

      dateStart: new Date(),

      dateEnd: "12-12-2026"

    },

  ]

  displayData(data: any) {

    console.log(data.index);

    return data.dateStart;

  }

HTML:

<ejs-grid

  #grid

  [dataSource]="gridData"

  (rowSelected)="gridData.splice(0, 1); grid.refresh()"

  >

  <e-columns>

    <e-column field="id"></e-column>

    <e-column field="name"></e-column>

    <e-column field="dateStart">

      <ng-template #template let-data>

      {{displayData(data)}}

      </ng-template>

    </e-column>

    <e-column field="dateEnd"></e-column>

  </e-columns>

</ejs-grid>

[Dineshnarasimman Muthu]

Hi,

We apologize for the delay. We analyzed the reported behavior using an Angular 20 (zoneless) sample application. When testing the same scenario in an Angular setup without zone.js, the issue did not occur. This indicates that the behavior is related to Angular’s default change‑detection mechanism powered by zone.js, which triggers template evaluations more frequently.

If you want to prevent the template function from executing multiple times specifically when the Grid’s dataSource is empty, we recommend using the gridInstance.clearTemplate() method and passing 'template' as a string array. This ensures that the template is cleared and not re‑invoked unnecessarily.

Sample: https://stackblitz.com/edit/angular-cejucxbp-scz9skyn?file=src%2Fapp.component.html,src%2Fapp.component.ts

If you prefer to avoid repeated console.log calls when hovering—regardless of whether the Grid is empty or not with zone.js, you may instead need to adjust the template to avoid calling functions directly within the template.

Regards,

Dineshnarasimman M