0

I'm trying to get data from the selected row from clarity Datagrid and display that particular selected row detail through the modal to edit the data. I can select the row using clrDgSingleSelected and when I select the row, the edit button will be shown using clr-dg-action-bar. when I click the edit button the modal is popping up but I don't know how to display the row details. I'm getting data through the https://gorest.co.in/public/v2/users and I want to display user details in the form modal. Here I attached my app.component.html code

<clr-datagrid [clrDgLoading]="displayProgressSpinner" [(clrDgSingleSelected)]="selected" [clrDgRowSelection]="true">
  <clr-dg-action-bar *ngIf="selected">
    <button class="btn btn-warning" (click)="openEditDialogModal()">Edit</button>
    <clr-modal [(clrModalOpen)]="openEditModal" clrLableSize="4">
      <div *ngFor="let user of selected | keyvalue">
        {{user.value}} 
      </div>
    </clr-modal>
  </clr-dg-action-bar>

  <clr-dg-column [style.width.p]="20">ID</clr-dg-column>
  <clr-dg-column>Name</clr-dg-column>
  <clr-dg-column>Email</clr-dg-column>
  <clr-dg-column [clrDgField]="'gender'">Gender</clr-dg-column>
  <clr-dg-column [clrDgField]="'status'">Status</clr-dg-column>

  <clr-dg-row *clrDgItems="let user of users" [clrDgItem]="user">
    <clr-dg-cell>{{user.id}}</clr-dg-cell>
    <clr-dg-cell>{{user.name}}</clr-dg-cell>
    <clr-dg-cell>{{user.email}}</clr-dg-cell>
    <clr-dg-cell>{{user.gender}}</clr-dg-cell>
    <clr-dg-cell>{{user.status}}</clr-dg-cell>
  </clr-dg-row>


</clr-datagrid>
R. Richards
  • 24,603
  • 10
  • 64
  • 64
xiaqoi
  • 3
  • 2

1 Answers1

0

I don't know about how the components are setup but what you can do is when the user selects a row you can store it to a variable and when the button is clicked, you can pass the variable to the modal.

selectedRowUser;

onSelect(user) {
  this.selectedRowUser = user;
}
<clr-dg-row (click)="onSelect(user)" *clrDgItems="let user of users" [clrDgItem]="user">
    <clr-dg-cell>{{user.id}}</clr-dg-cell>
    <clr-dg-cell>{{user.name}}</clr-dg-cell>
    <clr-dg-cell>{{user.email}}</clr-dg-cell>
    <clr-dg-cell>{{user.gender}}</clr-dg-cell>
    <clr-dg-cell>{{user.status}}</clr-dg-cell>
  </clr-dg-row>
varunv
  • 1
  • 1
  • Hi @varunv , thanks for answering. But I don't get how to implement it. Like how to pass the user to the modal – xiaqoi Oct 06 '22 at 19:10
  • Okay I get how your components work. There are few things you need to check like are your components setup with change detection onPush? Try to also check whether the “selected” object is getting updated – varunv Oct 06 '22 at 20:15