Extremely high number of refreshes/recalc on dxDataGrid

[SanderElias]

To help us process the issue more efficiently, please provide the following information:
Angular 6.1.2, devExtreme 18.1.5

I build this stackblitz to illustrate issue #838. I'm reusing it here to show the large amounts of calls to helper functions and the number unneeded rewrites to the screen.

When you take a look at the console.log, you will see that there are at least 10 calls to the getDbName function, for every event that fires. Just clicking outside the grid will even trigger this.
This is causing speed issues in real applications. Is there a way I can prevent this?

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

[hakimio]

Here is a fixed version of your example:
https://stackblitz.com/edit/angular-mraszy

Seems like it's your fault for triggering all those change detection calls, not DevExtreme.

[SanderElias]

Your fix still doesn't work when I use calculateCellValue. The same problem as before.
And get back the console logs.

Also, my sample was a simplyfied version of my problem. In the sample I have the 'server' available in the same component as the grid is running up. In my real application its not. That is the reason I passed it in via a closure.
I left this out of the example, because it would make the sample more difficult to follow along.

Also, can you explain to me where I was causing all those CD calls? As I'm not changing ANY data, I'm unaware how I can prevent those. The functions I used are 100% pure. I just hooked them up, following the documentation of DevExtreme.

[hakimio]

Every time your "getDbName(servers)" returns a new closure change detection is triggered.

[SanderElias]

Why is it executed more as once? I know it returns a new closure. But the function should only be called once. All the content that is displayed is static. So no CD should be triggered.

Also, that doesn't cure the 'calculateCellValue` version of my issue.

[hakimio]

Ok, so "calculateDisplayValue" issue is explained in "devextreme-angular" README (Angular Change Detection section).

What's the issue with "calculateCellValue" I'm not sure. There was some similar issue before but it was fixed in 18.1.4 and I personally don't experience any issues with it in a project were we use 18.1.5.

[hakimio]

It seems their official example is also calling "calculateCellValue" few times too many.

[SanderElias]

Hmm, another thing., I changed the detection mode to onPush, and then the click works.
Why does the click fail in my original example (aside from the huge number of iterations), and it works with onPush.

The click also fails in the calculateCellValue option. The iterations bother me less as the loss of functionality.

[hakimio]

There is something wrong with "calculateCellValue". You should create a new bug report specifically for it. "calculateDisplayValue" you used in your original example, seems to be working fine.

[hakimio]

"onRowClick" seems to be fine from what I can see:
https://stackblitz.com/edit/angular-lwglsi

[SanderElias]

I have replaced the getDbname with a function that has a static return. Added some logging to it.
The root of the issue is here, why does the getDbName function get called so often?
There is no change in any data related to the grid.
At least the rowClick does work now.

[hakimio]

Your assignment "this.serverList = servers" is triggering it.
"rowClick" always worked, maybe you just couldn't see the console message because "calculateCellValue" was spamming the console so much.

[SanderElias]

Ok here is my original sample with an alert instead of a console.log. The alert is never triggered for me.

And here is the other sample, that doesn't assign this.serverList more than once. Still, the getDbName is triggered over and over again.

I'm not trying to be a PITA, I just want to get to the bottom of this. I want to understand what is happening.

[ovchinnikov]

Hello,
DevExtreme widgets have global subscriptions on mouse events.
That is why the getDbName function is called on each mouse interaction.
 
I've created a simple example to show the issue in action without DevExtreme components.
https://stackblitz.com/edit/angular-r1rkpw?file=src%2Fapp%2Fhello.component.ts
In this example the getName function is called on each mousedown and mouseup event.
 

[SanderElias]

@ovchinnikov Thanks, that explains the behaviour with the numerous calls. So the global event listeners in DX will make this pattern a no-go. That's a pity.

Can you also explain why the alert is not fireing in my sample?

[ovchinnikov]

@SanderElias The getDbName function always returns a new function. So, on every change detection cycle, DataGrid repaints its rows. This means that the mousedown event occurs on one DOM element and the mouseup event occurs on another. That is why the click event is not raised.
 
The https://stackblitz.com/edit/angular-hxucfj?file=src/app/app.component.ts example shows this behavior in action.

[SanderElias]

@ovchinnikov Thanks. I now understand the problem in full. There is no error, nor a solution. The way DX works prevents this pattern.