Clarity Grid Row Expander: заполнитель сетки виден, даже если данные строки заключены в форму для встроенного редактирования.

Я реализую вариант использования расширения строки сетки данных Clarity с формой, охватывающей строку и детали строки. Вот быстрый тест -

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>

Я столкнулся с проблемой, что если я оберну каждую форму в элемент «», тогда пустой заполнитель сетки данных будет виден, даже если в сетке есть записи. Этот вариант использования не поддерживается или я что-то упустил?


datagrid vmware-clarity inline-editing
person Suresh Nagar    schedule 06.11.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Директива FormGroup также может быть добавлена ​​в clr-dg-row, поэтому дополнительный элемент формы-обертки не требуется - модифицированный плункер с несколькими дополнительными модификациями, чтобы сделать вариант использования понятным -

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>

Разверните строку, затем щелкните действие строки и выберите «Изменить».

person Suresh Nagar    schedule 06.11.2017