Clarity: Datagrid - Trying to set a selection using cloned object does not work

[srikanthps]

Describe the bug

When using datagrid with single selection mode, after data grid is rendered - if we try to set the value for current selection by updating the variable that is bound to [(clrDgSingleSelected)], the corresponding radio button does not get "checked" even when the object being set is equal by-value to one of the datagrid items. The selection works only if the object is equal by reference to one of the items in datagrid.

Similar behavior is observed for both multi-selection when using [(clrDgSelected)].

How to reproduce

Stackblitz (Single selection issue): https://stackblitz.com/edit/clarity-v2-dg-selection
Stackblitz (Multi-selection issue): https://stackblitz.com/edit/clarity-v2-dg-selection-multiple

Steps to reproduce the behavior:

1. Take an clarity documentation example on data grid that displays list of users and uses "trackById".
2. In the component constructor, try to set the value for single selection, but use a cloned object.

    setTimeout(() => {
      this.selectedUser = {...this.users[2]}; 
    }, 4000);

In real life - one is not cloning the object intenationally - but one already has an object that one wishes to set as selection, and data grid just got rendered with new data from server and they all are newly created objects. One of the objects in datagrid matches the to-be-selected object by-value, but not by-reference.

Expected behavior

Since one has used trackById, we expect that comparison of object that is being set as current selection with objects that is rendered in datagrid is done by using the value returned by trackById method (or any track by method that developer has used *clrDgItems or *ngFor in clr-dg-row.

Versions

2.x

App

• Angular: v8.x
• Node: v10.x
• Clarity: 2.x

Device:
All

Additional notes

Root cause probably lies with datagrid-row.html where radio to be checked is determined by comparing object references.

https://github.com/vmware/clarity/blob/ec594a4a837deff4917e54ee1111fb2d2535f882/src/clr-angular/data/datagrid/datagrid-row.html#L50

[hippee-lee]

It seems like this is a question for how to select an item in a server driven datagrid, did I understand correctly?

Server driven datagrids need to implement the refresh function as all information wrt items (selection state, pagaination, etc is coming from the server.

Here is an example of a single select server driven datagrid that programmatically selects the item at array[1] position when it gets data from the fake server.

Server driven datagrid with preset selection: https://stackblitz.com/edit/gh-4250-datgrid-hotto-programetic-selection

What I am not sure about is how the trackBy function is related to the question. This is an Angular level DOM optimization but doesn't have anything to do with item selection. What am I missing here?

I'm closing this as questions should be asked on stack overflow and labeled with the vmware-clarity tag. If I misunderstood the issue being reported, feel free to re-open it and let me know what I misunderstood.

[srikanthps]

[(clrDgSingleSelected)] is bound to an object which represents one of the items that is rendered in datagrid.

If it accepted the index of the item that is to be selected, then, there is less confusion. However, given that it accepts an object, it is not mentioned in documentation that object must be equal by-reference to one of the items in the list. The *ngFor and *clrDgItems accept trackBy so that application developer has a say on how the two objects should be compared for equality. You are not extending similar capability for [(clrDgSingleSelected)] - or atleast not utilizing the trackBy method that was passsed to *clrDgItems.

To me it looks like a flaw in the implementation, and either the documentation should make the users aware of this limitation and have them code a workaround everytime they use datagrid where they would like an item to be pre-selected, or framework should resolve this issue properly.

[gnomeontherun]

There is something that we need to look at here, because trackBy is being used when comparing to the list of items. Reopening for investigation, but workaround is to not clone an object for now.