Clarity: Datagrid uses wrong trackBy and breaks selection

[rootix]

Describe the bug

We have a dynamic datagrid with a configuration source for the columns. Because of this, we use a ngFor-loop for the clr-dg-column and utilize a trackBy function to improve performance.

We experience the issue that if the grid is initialized with selected items, the first selected item is not selected but the last item of the list. By debugging i found out, that the selection feature is using the Items.trackBy function and that this one is the one from the column-loop instead of the row-loop. This happens as there is ClrDatagridItemsTrackBy<T> which sets the trackBy function of the Items Object to the trackBy of any ngForTrackBy that is found in the grid.

I got things working by removing every trackBy in the whole grid, but this isn't really a good solution for this problem.

How to reproduce

I added a minimal example here: https://stackblitz.com/edit/clarity-light-theme-v2-bzpjmm

• You can see in the Component, that the first and second item are selected programatically, but the selection switches to the second and third (last) item.
• In the console you can see that the trackBy function of ClrDatagrid.items.trackBy is the column-trackBy
• If you remove the trackBy of the column-loop, selection works again

Expected behavior

The selection feature should only use the trackBy function of *clrDgItems or ngForOf of the clr-dg-row component and not any other unconstrained ngForOf within the grid.

Versions

App

• Angular: 8
• Node: 10.16
• Clarity: 2.3.0

[gnomeontherun]

I think the issue here is that the selector is generic for ClrDatagridItemsTrackBy: '[ngForTrackBy]' so its picking up the last trackBy to be rendered in the datagrid. We should be able to either make the selector more specific, or figure out how to filter it someway.

[itimie]

Hi, I’m just following up on the issue raised, is there any update on a fix?
Thanks

[dkanev]

Hi,
do you have a workaround for this problem?
I am using in our datagrid and have *ngFor for the buttons in it. After I set a trackBy function on the *ngFor for the action bar buttons a weird selection on a last row appeared in my grid. I investigated and saw that the problem is the same as the one described in this issue.
Do you have a plan to fix this issue?

[bbogdanov]

@rootix The team looked into the scenario you provided and a little bit further. We came into the conclusion trackBy set on anything else than the clr-dg-row generation loop is just not needed.

We encourage you to use only trackBy on the row generation loop e.g. <clr-dg-row *ngFor="let item in items; trackBy: trackBy"></clr-dg-row> or <clr-dg-row *clrDgItems="let item in items; trackBy: trackBy"></clr-dg-row>.

[erabl-identos]

Hi @bbogdanov
could you provide me with a link to the documentation on how to use the _trackBy_ function? What's the method signature?

I've looked through all 21 datagrid demos, but trackBy seems not to be mentioned anywhere. Maybe it is missing from the docs?

Nevermind, I was looking in the wrong place. trackBy is an Angular feature and not from Clarity.

[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.