CODEWITHSUNDEEP
angulartypescriptdatagridvmware-clarityclarity
xiaqoi
xiaqoi

Reputation: 3

How to get data from the selected row in clarity datagrid and display it in modal

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>

Upvotes: 0

Views: 735

Answers (1)

varunv
varunv

Reputation: 1

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>

Upvotes: 0

Related Questions