Clarity: Datagrid Select All does not respect clrDgItem when using deep property

[gssjr]

Select one ... (check one with "x")

[x] bug
[ ] feature request
[ ] enhancement

Expected behavior

Using the "Select All" checkbox in datagrid selection should respect what's given in [clrDgItem].

Actual behavior

When using a deep property, checking the Select All checkbox will instead add the root model instead of the property values.

Reproduction of behavior

• https://stackblitz.com/edit/clarity-light-theme-v11-mqrnvp
  
  
  
  
  Given a model, myModel, and [clrDgItem]="myModel.myProperty" when checking the Select All checkbox, the individual rows will not show as checked, and myModel will be added to the clrDgSelected array instead of myModel.myProperty

Environment details

• Angular version: 5.2.10

• Clarity version: 0.11.9

• OS and version: Windows 10

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

[youdz]

As indicated in the issue template, please provide a running example of your issue on StackBlitz or Plunker so we can investigate. Thank you.

[gssjr]

Updated original post

[mviger]

@gssjr Using *ngFor instead of *clrDgItems will get it working the way you expect, though you may lose some functionality you're getting with the smart iterator.

ngAfterContentInit() {
    this._subscriptions.push(
      this.rows.changes.subscribe(() => {
        if (!this.items.smart) {
          this.items.all = this.rows.map((row: ClrDatagridRow) => row.item);
        }
      })
    );
    if (!this.items.smart) {
      this.items.all = this.rows.map((row: ClrDatagridRow) => row.item);
    }

I believe this is the case because ln 185 through 195 in datagrid.ts (code block above) runs if *ngFor is used instead of *clrDgItem. If this logic doesn't run this.items.all references the value in the array, rather than the value set as part of [clrDgItem].

https://stackblitz.com/edit/clarity-light-theme-v11-vffdrv is a fork of your example with the *ngFor swapped in.

*ngFor also gets #2315 working the way you were expecting.

Not implying that this is a fix, more of a work around for the time being.

[Ergnos]

The suggested workaround of @mviger works, unfortunately pagination does not work when *ngFor is used.

The only way to get this working with key->values is creating variable Object = Object in the component.ts and using the old fashioned way *clrDgItem="let key of Object.keys(items)". Displaying data using items[key].name etc...

<clr-datagrid [clrDgSelected]="selected">
    <clr-dg-column>Id</clr-dg-column>
    <clr-dg-column>Name</clr-dg-column>
    <clr-dg-column>Surname</clr-dg-column>
    <clr-dg-row *clrDgItems="let key of Object.keys(items);" [clrDgItem]="key">
        <clr-dg-cell>{{items[key].id}}</clr-dg-cell>
        <clr-dg-cell>{{items[key].name}}</clr-dg-cell>
        <clr-dg-cell>{{items[key].surname}}</clr-dg-cell>
    </clr-dg-row>
    <clr-dg-footer>{{items.length}} users</clr-dg-footer>
</clr-datagrid>

Stackblitz with working example:
https://stackblitz.com/edit/angular-63agbr

Stackbliz with 'all' checkbox not working:
https://stackblitz.com/edit/angular-yxypkc

[gnomeontherun]

There is a workaround available for this issue, and we recommend using it for Clarity Angular. As we build Clarity Core implementations, we expect that this issue won’t be an issue or will be configurable on the application side. To help us clean up our backlog, we are going to close this with a functional workaround available and suggest you follow updates for Clarity Core for enhancements that can support your use case with Clarity Core components.