Devextreme-angular: Poor performance with a custom calculateCellValue binding

[cfsean]

To help us process the issue more efficiently, please provide the following information:

• Specify the version of the devextreme-angular and devextreme packages you are using.

devexteme version: 17.1
devextreme-angular version: 17.1

• Specify the type of the issue (check one with "x"):
  [x] bug Report
  [ ] feature request
  [ ] support inquiry

Issue description: When calculateCellValue for a column is bound to a function that itself returns a function, browser performance is severely degraded.

Please see this plunk http://plnkr.co/edit/xANa32jdAPBiLvx5qGaQ?p=preview. Notice that when the line commented in app.ts remains commented you can hover over each row and it is highlighted grey as expected.

If you uncomment this line and allow the plunk to be updated then the performance of the browser is degraded so badly that hovering over each row doesn't highlight it in grey.

<!-- Uncomment to show issue  -->
<!-- <dxi-column caption="Example" [calculateCellValue]="exampleFunc('testing123')"></dxi-column> -->

[alexzuza]

I think the main problem here is that devextreme-angular initizializes devextreme plugins inside angular zone so many events like mouseover, mousemove, scroll, resize will trigger angular change detection cycle.

But in any case you should avoid using functions or getters in property binding or in interpolations since it will be executed on every view check.

@Aden-git Please take a look, what do you think about it?

[dxbykov]

Hi,

@alexzuza you are right. Thank you.

@cfsean It's a quite common issue Angular devs face. The 'exampleFunc' method creates a new function instance every time it's accessed. You can cache the function result until its argument has changed. Check this plunker as an example of the idea.

[GoshaFighten]

This issue is closed because of being inactive. If you need further assistance, leave a comment here.