I have a data grid which populates data from Firebase Cloudstore (sorted according to lastUpdated date from Firebase), when I edit the row I have modal dialog where I can edit the information, when save the entry I set the lastUpdated to sysdate. Editing works fine (and the timestamp is updated) but it picks the wrong row from the table. In the table I have a column which is the documentId from Firebase. To verify that it picks the wrong documentId I then console log the documentId which is passed to the edit method and it is not the same as the one on the row that I pick for editing in the view. My code is exactly like the below code (taken from clarity documentation). What am I doing wrong ?
<clr-dg-row *clrDgItems="let user of users" [clrDgItem]="user">
<clr-dg-action-overflow>
<button class="action-item" (click)="onEdit(user)">Edit</button>
<button class="action-item" (click)="onDelete(user)">Delete</button>
</clr-dg-action-overflow>
<-- ... -->
</clr-dg-row>
You've got a few structure issues here.
First, the modals should be top level and not inside of the Datagrid. Basically, it is causing the last defined modal (of the same clrModalOpen binding) to be displayed and never the others.
Second, clicking on a record is not passing or setting any state about which row you are selecting. So your form has no knowledge of which row is being edited and your model is undefined.
The reason your modal would output the connection.id was you defined it inline of the datagrid rows itself, where the connection local variable was present. However, you'll have to pass it around to the modal since it must live outside of the datagrid itself.
See https://stackblitz.com/edit/angular-azbaxr?file=src%2Fapp%2Fapp.component.html