angularkendo-uikendo-gridkendo-ui-angular2kendo-angular-ui

Problem with row edit in kendoGrid / Kendo Angular


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.


Solution

  • 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.