Igniteui-angular: igx-grid - UI operation perfomance becomes extremely slow when igxCell template is used and some method is called in the template.

[tkiryu]

Description

igx-grid's operation perfomance(cell click, double) becomes extremely slow when igxCell template is used and some logic is called in the template.

• igniteui-angular version: 6.2.0-beta.0
• browser: N/A

Steps to reproduce

1. Run the attached sample.(This sample demonstrates conditional row styling. So, every column has igxCell template.)
2. Open the browser console.
3. Click a cell to select it.
4. Click another cell.
5. Press arrow keys.
6. Click an checkbox.
7. Double click a cell to enter edit mode.
8. Type something in the textbox.

Result

• Step 3 - 7 triggers change detection several times and then hasError method is called hundreds of times.
• Step 8 triggers change detection for every keystroke and then hasError method is called hundreds of times.

As a whole, UI operation is extremely slow.

I'm not sure but operating cell seems to trigger change detection many times and call evaluation of all the igxCell templates every time.

Expected result

UI operation should be fast even if igxCell template is used and some method is called in the template.

Attachments

igx-grid-performance-issue.zip

[rkaraivanov]

@tkiryu
Was this tested with the application build in production mode? When running in dev mode, Angular runs the change detection cycle twice per directive.

Also I suggest to avoid calling too many getters/method calls in the templates (especially on all the cells in the grid 😸 ) as they're always called when a CDR cycle is triggered regardless of whether there is a change or not. In your sample, each UI interaction (scroll, click, focus) in the grid will trigger a change detection round. This is how Angular works, and because the class binding resolves on a function call, it must be called. One should stick to really simple expressions in Angular templates.

For example changing this:

<div *igxCell="let value; let cell = cell;"
         [class.error]="hasError(cell)">
      {{ value }}
    </div>

to this:

<div *igxCell="let value; let cell = cell;" [class.error]="cell.rowIndex % 2 == 0">
  {{ value }}
</div>

would increase performance by a LOT.

As a side question, can this formatting not be achieved through odd/even row styling?

EDIT: I've attached a modified copy of the application. Can you try it and report how is the performance and in what browser are you running it.
igx-grid-performance-issue-edited.zip

[tkiryu]

@rkaraivanov , thank you for investigation and your sample.

Was this tested with the application build in production mode?

I tried testing in production mode and could not get performance improvement at all.

Also I suggest to avoid calling too many getters/method calls in the templates (especially on all the cells in the grid 😸 ) as they're always called when a CDR cycle is triggered regardless of whether there is a change or not. In your sample, each UI interaction (scroll, click, focus) in the grid will trigger a change detection round. This is how Angular works, and because the class binding resolves on a function call, it must be called.

I understand your point, though...

As a side question, can this formatting not be achieved through odd/even row styling?

I want to achieve conditional row/cell styling. Although hasError logic is very simple in this sample, in real scenario, it could be more complicated. Unfortunately, odd/even row styling is not enough. Simple expressions in Angular templates is not enough either.

I think currently we have no choice but to use igxCell template for all the cells and call method in the template in order to achieve conditional row/cell styling because igx-grid-row doesn't have its template like Angular material datatable(See also #1317 ).

Do you have any better ideas on this?

[kdinev]

@tkiryu Does the material datatable perform with the same amounts of data and templates? I'm asking since you mention the feature there.

[rkaraivanov]

@tkiryu
Sorry for the late reply. Have you tried the sample application I've attached? Is it still slow?

Do you have any better ideas on this?

Not really. Performance in Angular boils down to: less DOM, less calls and running an AOT build.

I think currently we have no choice but to use igxCell template for all the cells and call method in the template in order to achieve conditional row styling because igx-grid-row doesn't have its template like Angular material datatable

We could investigate a way to apply styling to the whole row based on a condition. Yes, we do not provide a way to template an igx-grid-row as most of other data grids do too. I skip on material data table as I see it more as a table element with styling and basic features.

[kdinev]

Related to #1079. Closing this one because #1079 got implemented and is available in 6.2.0-beta.2