how do i get a checkbox column for multi-select into a datagrid?

Question

I'm having trouble getting a checkbox column into a VMware Clarity datagrid, or generally getting multi select of rows to work.

I can get single select to work just fine.

I see the example in the VMware Clarity doc: https://vmware.github.io/clarity/documentation/datagrid/batch-action

I feel like I'm following the directions correctly, but no checkbox column shows up (a radio button column does show if I change it to single select).

My markup:

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

<clr-dg-action-bar>
    <div class="btn-group">
        <button type="button" class="btn btn-sm btn-secondary" (click)="onAdd()"><clr-icon shape="plus"></clr-icon> Register</button>
        <button type="button" class="btn btn-sm btn-secondary" (click)="onDelete()" ><clr-icon shape="close"></clr-icon> Delete</button>
        <button type="button" class="btn btn-sm btn-secondary" (click)="onEdit()" *ngIf="selected?.length == 1"><clr-icon shape="pencil"></clr-icon> Edit</button>
    </div>
</clr-dg-action-bar>

<clr-dg-column>Name</clr-dg-column>
<clr-dg-column>Serial #</clr-dg-column>

<clr-dg-row *clrDgItems="let networkSystem of networkSystems"  [clrDgItem]="networkSystem">
    <clr-dg-cell>{{networkSystem.name}}</clr-dg-cell>
    <clr-dg-cell>{{networkSystem.serial_number}}</clr-dg-cell>
</clr-dg-row>

</clr-datagrid>

I've tried digging through the examples in the Clarity repo, but I can't find this batch selection one anywhere. (would be nice if the official documentation somehow included the full source both for the angular component and the markup).

Thanks for any help!

Answer 1

Do you have the selected property set on your controller? If not, it will be undefined and the selection will not appear.

import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: './my.component.html'
})
export class MyComponent  {
  selected = [];
  networkSystems = [
    {name: 'System 1', serial_number: 'abc'},
    {name: 'System 2', serial_number: 'def'},
    {name: 'System 3', serial_number: 'ghi'},
  ]
}