Clarity Grid Row Expander: Grid placeholder is visible even if there is row data is wrapped in form for inline edit

Question

I am implementing a Clarity data-grid row expanding use case with a form spanning across the row and row-details. Here is a quick trial -

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

    <clr-datagrid>
        <clr-dg-column>User ID</clr-dg-column>
        <clr-dg-column>Name</clr-dg-column>
        <clr-dg-column>Age</clr-dg-column>

        <ng-container *ngFor="let user of users; let i=index;">
          <form (ngSubmit)="commitRow(i)" [formGroup]="formGroups[i]">
            <clr-dg-row (clrDgExpandedChange)="expandChanged($event, i)">
                <clr-dg-cell>{{user.id}}</clr-dg-cell>
                <clr-dg-cell>
                  <ng-container *ngIf="!user.expanded">
                  {{user.userName}}
                  </ng-container>
                  <ng-container *ngIf="user.expanded">
                    <input type="text" formControlName="userName" style="max-width:100px;">
                  </ng-container>
                </clr-dg-cell>
                <clr-dg-cell>
                  <ng-container *ngIf="!user.expanded; else edit">
                    {{user.age}}
                  </ng-container>
                  <ng-container *ngIf="user.expanded">
                      <input type="text" formControlName="age" style="max-width:100px;">
                  </ng-container>
                  </clr-dg-cell>
                <my-detail *clrIfExpanded ngProjectAs="clr-dg-row-detail" [userFormGroup]="formGroups[i]"></my-detail>
            </clr-dg-row>
        </form>
        </ng-container>

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

I am facing issue here that if i wrap each form in “” element then datagrid empty placeholder is visible even when there are records in the grid. Is this use case not supported or i am missing something?

Answer 1

FormGroup directive can be added to clr-dg-row as well, so extra wrapping form element is not needed - modified plunker with few extra modifications to make the use case clear -

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

    <clr-datagrid>
        <clr-dg-column>User ID</clr-dg-column>
        <clr-dg-column>Name</clr-dg-column>
        <clr-dg-column>Age</clr-dg-column>

            <clr-dg-row 
              [clrDgExpanded]="row.expanded"
              (clrDgExpandedChange)="expandChange($event, row)"
              [formGroup]="row.formGroup"
              *ngFor="let row of rows; let i=index;">
                <clr-dg-action-overflow>
                    <button class="action-item" (click)="onEdit(row)">Edit</button>
                    <button class="action-item" (click)="onDelete(row)">Delete</button>
                </clr-dg-action-overflow>                  
                <clr-dg-cell>{{row.id}}</clr-dg-cell>
                <clr-dg-cell>
                  <ng-container *ngIf="!row.editing">
                  {{row.user.userName}}
                  </ng-container>
                  <ng-container *ngIf="row.editing">
                    <input type="text" formControlName="userName" style="max-width:100px;">
                  </ng-container>
                </clr-dg-cell>
                <clr-dg-cell>
                  <ng-container *ngIf="!row.editing">
                    {{row.user.age}}
                  </ng-container>
                  <ng-container *ngIf="row.editing">
                      <input type="text" formControlName="age" style="max-width:100px;">
                  </ng-container>
                  </clr-dg-cell>
                <my-detail *clrIfExpanded 
                      ngProjectAs="clr-dg-row-detail" 
                      [userFormGroup]="row.formGroup"
                      [editing]="row.editing"
                      (onSubmit)="onRowSubmit($event, row)"
                      (onCancel)="row.editing=false"
                      ></my-detail>
            </clr-dg-row>


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

Expand the row and then click on row action and select edit.