shlomiassaf / ngrid

A angular grid for the enterprise

Home Page:https://shlomiassaf.github.io/ngrid

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Performance bug when pass a variable to [vScrollFixed]

GabrielInTheWorld opened this issue · comments

What is the expected behavior?

I think, it should be possible to pass a variable value to the property vScrollFixed of 'ngrid' for different row-sizes in several components without any performance-issues, which uses e.g. a virtual-scrolling-list created by the 'ngrid'.

What is the current behavior?

If a variable value is passed to the property vScrollFixed of 'ngrid', then the whole website becomes very slow and the data for 'ngrid' is loading very slowly.
This is also happening, if the property is binded in brackets, like [vScrollFixed]="64".

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: stackblitz.com/edit/pebula-ngrid-starter

Which versions of Angular, CDK, Material, NGrid, OS, TypeScript, browsers are affected?

Angular: 8.2.4
CDK: 8.1.4
NGrid: 1.0.0-rc.5
Typescript: 3.5.3
Browser: Chrome

Is there anything else we should know?

Hi, thank you for the update.

First, I don't see any issue with non-binding values, e.g. vScrollFixed="64"

Here's the example i've tested with: StackBlitz.

One thing to note here, is that setting a fixed virtual scroll requires setting the CSS min-height value of the row accordingly, i.e. if vScrollFixed="64" then the row's min-height must be 64.

The link above points to this being done using the theme:

// If you want to add a narrow style, comment out the previous line and:
$large-spacing: (
  spacing: map-merge($pbl-spacing-theme-default, ( row-height: 64px )) 
);

@include pbl-ngrid-material-theme(map-merge($ngrid-material-starter-theme, $large-spacing));

As for bound values ([vScrollFixed]="64") yep, there is a bug and i'll work to fix it.

Thanks.

Fixed in 1.0.0-rc.9