Problem with row edit in kendoGrid / Kendo Angular

Question

I'm creating a Web Application in which I populate some kendoGrids with data. My problem occurs when I try to edit those kendoGrids. Here are some images:

Before editing (inside the square I have kendoTextBox)

After pressing 'Edit' in the top left corner

As you can clearly see, for some weird reason, the kendoGrid takes the value of the last row (333) and paste it in all rows of the grid.

Now time for some code:
debts.component.html

<kendo-grid-column field="ContractNumber" title="Αρ. Σύμβασης" width="200">
    <ng-template *ngIf="!isInEditMode" kendoGridCellTemplate let-dataItem="dataItem">
      {{ dataItem.ContractNumber }}
    </ng-template>
    <ng-template *ngIf="isInEditMode" kendoGridCellTemplate let-dataItem="dataItem" let-formGroup="formGroup">
      <input
        name="ContractNumber"
        [(ngModel)]="dataItem.ContractNumber"
        kendoGridFocusable
        kendoTextBox/>
    </ng-template>
</kendo-grid-column>

When I press the 'Edit' button in the top left corner, the isInEditMode changes value and the grid opens all cells for editing. I think that something's wrong with [(ngModel)] because, even though the values are changing if I change them in all rows, when I enter 'Edit' mode again, the value of the last row will take place all over the highlighted column.

** This problem occurs only with kendoTextBox. I have no problem whatsoever with kendoCombobox or kendoNumericTextbox for example.

Any help / suggestions would be highly appreciated.

score 2 · Accepted Answer · answered Aug 28 '19 at 10:57

I found the solution to the problem that bothered me so much the last couple of days. Thanks to this response right here, I realised that was so simple and easy. I simply had to have a unique name in each input. So, that's why the [(ngModel)] replaced all my column values with the last one.

Finally, I managed to change my code like this:

<ng-template *ngIf="isInEditMode" kendoGridCellTemplate let-dataItem="dataItem" let-rowIndex="rowIndex">
   <input
      name="Account{{ rowIndex }}"
      [(ngModel)]="dataItem.Account"
      kendoGridFocusable
      kendoTextBox/>
 </ng-template>

Technically, I added rowIndex in each name, in order to have the necessary uniqueness.

Problem with row edit in kendoGrid / Kendo Angular

1 Answers1