0

Could someone help me out. I am trying to set dynamically the selection in the Project Clarity datagrid component. https://vmware.github.io/clarity/documentation/v0.11/datagrid/selection I have a filter which I am fetching from storage and I want to display the selection in the datagrid. Here is the code for populating the selected variable which is string array (string[])

selected: string[] = [];

I am console outputting the selected and it contains the correct values but those are not selected in the datagrid.

private initView() {
    Object.entries(this.metadataFilter.metadataTypes).forEach(
      ([key, value]) => {
        this.selected.push(key);
      });
      console.log('this.selected: ', this.selected);
  }

this is what I have in the template:

<clr-datagrid [(clrDgSelected)]="selected">

Here is the population of the rows:

<clr-dg-row *clrDgItems="let meta of metadataTypes | async" (click)="getItemsForMetadataType(meta.name)" [clrDgItem]="meta">
          <clr-dg-cell>{{ meta.name }}</clr-dg-cell>
        </clr-dg-row>

It works when I am selecting entries from the grid. Those I get populated to a variable but not other way around. Help would be very much appreciated. Am I misunderstanding how this should work ?

jani_r
  • 637
  • 1
  • 7
  • 18

1 Answers1

1

There are two things to do here. First, I always recommend to use trackBy so you can be sure that the references are correct. Second, you need to put the whole object, not the key, into the selected array. The internal state of the data grid evaluates equality against references of the object, or if trackBy is used it computes the trackBy internally and evaluates equality between the references (like an ID or some string).

For example, this should initialize the 3rd item to be selected.

this.selected.push(this.metadataFilter.metadataTypes[2]);

Jeremy Wilken
  • 6,965
  • 22
  • 21
  • I modified it so that now I am pushing to the array an object. The equality needs to be evaluated by a string. I am not able to get it to work. private getFilter(filterId: string) { this.dataService.getDocumentWithMetadata('users', this.authService.id, 'metadatafilters', filterId) .subscribe(filter => { this.metadataFilter = filter; const meta = new MetadataTypeEntity(); meta.name = 'CustomObject'; this.selectedMetadataTypes.push(meta); }); } metaName(index, meta: MetadataTypeEntity) { return meta.name; } – jani_r Feb 05 '18 at 18:19
  • I modified it so that now I am pushing to the array an object. The equality needs to be evaluated by a string so I implemented the trackBy functionality. The trackBy functions tracks the name field in the MetadataTypeEntity object. Still not working. I am really sorry about the above comment. – jani_r Feb 05 '18 at 18:27
  • I created a small test with datagrid which I populate with 10 rows. If is select the 3 row by using the same array which the grid is populated with then it works. Like this: this.selected.push(this.users[2]); but if I create a new a new User object with the name the same as the one in the grid it does not. I am using the trackBy functionality and track by the User name. I am not sure should it work like this (or then I am using the trackBy wrong) – jani_r Feb 06 '18 at 09:33
  • I'm having trouble understanding what you've done, can you please make a Plunkr or Stackblitz with what you are trying to do? – Jeremy Wilken Feb 07 '18 at 02:03
  • Thanks, I was able to figure it out. I had pretty much misunderstood how the selection works. It was like you said that you need to select from the existing list the items to be selected. Thanks for the trackBy tip, that was something new for me. – jani_r Feb 11 '18 at 17:15