0

I have a usecase in which one of the cells in my row is a checkbox and another is radio button. I am using the grid row expander to replace contents of the row on expansion but the checkbox and radio button also gets replaced. I don't want this to happen.

I am looking for a way in which I can choose to replace only specific cells and not the entire row on using row expander.

<clr-datagrid>
    <clr-dg-column>User ID</clr-dg-column>
    <clr-dg-column [clrDgField]="'name'">Name</clr-dg-column>
    <clr-dg-column>Allow access?</clr-dg-column>
    <clr-dg-column>Default User</clr-dg-column>

    <clr-dg-row *clrDgItems="let user of users; let index=index" [clrDgItem]="user">
      <clr-dg-cell>{{user.id}}</clr-dg-cell>
      <clr-dg-cell>{{user.name}}</clr-dg-cell>
      <clr-dg-cell>
        <div class="checkbox">
          <input type="checkbox" id="access-{{index}}">
          <label for="access-{{index}}"></label>
        </div>
      </clr-dg-cell>
      <clr-dg-cell>
        <div class="radio-inline">
          <input type="radio" name="default-radios" id="default-{{index}}">
          <label for="default-{{index}}"></label>
        </div>
      </clr-dg-cell>

      <!-- Example using a wrapper component -->
      <!--<detail-wrapper *clrIfExpanded ngProjectAs="clr-dg-row-detail" class="datagrid-row-flex"></detail-wrapper>-->

      <clr-dg-row-detail *clrIfExpanded [clrDgReplace]="true">
        <clr-dg-cell>{{user.id}}</clr-dg-cell>
        <clr-dg-cell>{{user.name}}</clr-dg-cell>
        <clr-dg-cell></clr-dg-cell>
        <clr-dg-cell></clr-dg-cell>
      </clr-dg-row-detail>
    </clr-dg-row>


    <clr-dg-footer>{{users.length}} users</clr-dg-footer>
  </clr-datagrid>

Plunkr: https://plnkr.co/edit/WpGZi50bT3TmIkuFZ9fw

Muneeb
  • 151
  • 2
  • 5

1 Answers1

1

The expandable rows either replace the content (as you have configured here) or it adds content into the expandable row area below the content. If you want to conditionally change values in the row, you can do this by tracking the state of the row expansion. You can either put NgIf on the cell itself, or put it on some content inside of the cell, but you have to remove the ability to replace the row to retain the content.

Here is an example from your plunkr.

    <clr-dg-row *clrDgItems="let user of users; let index=index" [clrDgItem]="user">
      <!-- Change the cells based on the `user.expanded` property -->
      <clr-dg-cell *ngIf="!user.expanded">{{user.id}}</clr-dg-cell>
      <clr-dg-cell *ngIf="user.expanded">Expanded</clr-dg-cell>
      <clr-dg-cell *ngIf="!user.expanded">{{user.name}}</clr-dg-cell>
      <clr-dg-cell *ngIf="user.expanded">Expanded</clr-dg-cell>
      <clr-dg-cell>
        <div class="checkbox">
          <input type="checkbox" id="access-{{index}}">
          <label for="access-{{index}}"></label>
        </div>
      </clr-dg-cell>
      <clr-dg-cell>
        <div class="radio-inline">
          <input type="radio" name="default-radios" id="default-{{index}}">
          <label for="default-{{index}}"></label>
        </div>
      </clr-dg-cell>
      <!-- To handle two way binding, need to use ng-template and bind to the `user.expanded` property -->
      <ng-template ngProjectAs="clr-dg-row-detail" [(clrIfExpanded)]="user.expanded">
        <clr-dg-row-detail>
          <clr-dg-cell>{{user.id}}</clr-dg-cell>
          <clr-dg-cell>{{user.name}}</clr-dg-cell>
          <clr-dg-cell></clr-dg-cell>
          <clr-dg-cell></clr-dg-cell>
        </clr-dg-row-detail>
      </ng-template>
    </clr-dg-row>

https://plnkr.co/edit/iEvziaiOOKIaYbjvwUuA?p=preview

Jeremy Wilken
  • 6,965
  • 22
  • 21