Clarity: datagrid clr-dg-action-overflow is not shown until the page is clicked on

[jbgarr]

[X] bug
[ ] feature request
[ ] enhancement

Expected behavior

The icon for the actions should be shown as soon as items are rendered in the datagrid - even if the data is loaded from a server.

Actual behavior

Currently data is loaded from the server, then the datagrid is populated and rows are created. When the data is added to the grid, the rows do not initially show the actions icon. The icons do not render until the page is clicked on.

Reproduction of behavior

https://plnkr.co/edit/0l3Mq1rIVBGJF5z0Zb7n?p=preview

Environment details

• Angular version:
  4.0.X

• Clarity version:
  0.9.X

• OS and version:
  macOS Sierra v10.12.4 (16E195)

• Browser:
  Chrome v57.0.2987.133 (64-bit)

[youdz]

https://github.com/vmware/clarity/commit/505a3ad4438c3e5fb2d7a5ded917ee49bcab8071 fixes the column alignement issue, and I'm thinking it might fix the action icons not showing at the same time. Let me check this today.

The commit in question will be part of this week's release.

[mathisscott]

@youdz : Did you get a chance to look at this?

[jbgarr]

So on a (possibly) related note, when trying to use the clr-dg-action-overflow component while using *ngFor rather than * clrDgItems to iterate over my list of items, it totally breaks things and causes the following error: ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'. This seemed to be the case with both Clarity 0.9.0 and 0.9.1.

You can see an example of this in the plunker below:
https://plnkr.co/edit/j9QrmOGYrn2fqRscQ2Cp?p=preview

Please let me know if you want me to create a new issue for this.

Unfortunately the original case where I found the necessity of clicking the page to see the clr-dg-action-overflow correctly has evolved to requiring me to use server supplied data and now I need to iterate over my items with *ngFor. This site is in production so even a suggested work around for now would be highly appreciated.

[jbgarr]

Hi guys, any updates on this? I think my additional comment above may be an even more important bug/issue. Trying to use the clr-dg-action-overflow while iterating with an *ngFor totally breaks the datagrid. We're gearing up for a release soon and unfortunately I'm relying on this feature.

[youdz]

Hi @jbgarr, sorry this got lost. I'm literally looking at it right now, investigating the cause and potential solution. I'm not sure I'll have a good answer tonight, so I just wanted to post to at least tell you we were working on it. Hopefully my next post will have more information. 😛

[youdz]

Quick update: I identified the root cause, and I have two fixes working:
1) An ugly-ish hack with setTimeout(), which is simple but makes a few things asynchronous. If it impacted only our unit tests, I'd be okay with that, but I'm afraid it might introduce asynchronicity in consumer's unit tests.
2) A slightly more complex cycle that re-triggers change detection on rows when actions or expandables rows (we have the same issue with the caret as with the ellipsis) change in a specific way. Much cleaner, stays synchronous, but involves more work and triggering a second change detection on each displayed row of the Datagrid might impact performances.

So I'm trying to evaluate the risk of each, maybe share with the team for a sanity check, and I'll submit a PR as soon as possible with the chosen fix.

[jbgarr]

@youdz Great, thanks for the updates on this. I'll stay tuned for the incoming fix.

[fabiomsouto]

I am able to reproduce this issue. As a workaround I've added datagrid action buttons instead of using the menu, but the menu would make things more compact and elegant. I'll keep an eye as well. Thanks for keeping us updated.

[Radu-Dunarentu]

any update on this?

[youdz]

We're still working on this, it impacts more than just this issue and there is a lot of research involved to produce a maintainable fix (to this and half of the other "Expression has changed after it was checked" errors for Datagrid out there).

[laurentsd]

@youdz FYI, my plugin sample is affected by this bug as well. --Laurent

[jbgarr]

I just wanted to note that this issue also seems to crop up if the expandable rows clr-dg-row-detail component is used as well. Unfortunately in that case there is no simple work-around that I can think of. Any suggestions until a full fix is implemented?

For more details please see this plunker:
https://plnkr.co/edit/KhiYZrCPqbTCGaAgTrJ5?p=preview

[TechRazor]

@jbgarr for a work-around you could try using ChangeDetectorRef as shown in this plunker:
https://plnkr.co/edit/NRxLPSAzGlDoHNbTz2ID?p=preview

[jbgarr]

@TechRazor Awesome! That takes care of it for now. Thanks for the quick fix!

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.