kendo-dialog in html and typescript angular

[Prathibarani]

Hi,

I am using Kendo-dialog in angular project page. In html I have a table with rows that loads data as objects array with each object bound to row.

 <table class="table table-hover table-sm table-striped" style="width:75%;">
   <thead>
     <tr>
       <th scope="col"></th>
       <th scope="col"></th>
       <th scope="col">Name</th>
       <th scope="col">Description</th>
       <th scope="col">Date</th>
       <th scope="col">Day of Week</th>
     </tr>
   </thead>
   <!--write the data rows-->
   <tbody>
     <tr *ngFor="let h of hl" style="padding:0px" class="{{h.RowClass}}">
       <th scope="row"><span class="fas fa-edit" style="padding-left:10px" (click)="editDialog(h)" *ngIf="isAd" title="Edit this h"></span>
       <th scope="row"><span class="fa fa-trash" style="padding-left:10px" (click)="deleteDialog(holiday)" *ngIf="isAdmin" title="Delete this holiday"></span></th>
       <td><em *ngIf="h.Historical" style="color:#C8C8C8">{{h.Name}}</em><span *ngIf="!h.Historical">{{h.Name}}</span></td>      
     </tr>
   </tbody>
 </table>

dialog looks like this.
<kendo-dialog title="Edit H" *ngIf="showEditDialog" (close)="cancelUpdate()" [minWidth]="250" [width]="450">
  <form #form="ngForm">
    <div class="row vcenter form-group m-1">
      <div class="col-4">Title:</div>
      <div class="col-8 vcenter">       
        <input class="form-control" style="height:30px"
               required name="editTitle" id="editTitle" #name="ngModel" [(ngModel)]="this.editH.Name" type="text" />
        <span class="fa fa-asterisk vcenter" style="color:red; padding-left:5px; font-size:12px" *ngIf="!name.valid && !name.pristine"></span>
      </div>
    </div>
   .......
  </form> 
  <kendo-dialog-actions>
    <button kendoButton (click)="updateH()" primary="true" [disabled]="!form.valid">Save</button>
    <button kendoButton (click)="cancelUpdate()">Cancel</button>
  </kendo-dialog-actions>
</kendo-dialog>


TypeScript Code:
EditDialog(h: Holiday)
{
this.editholiday = h;
}

update(){
//data service layer call by passing this.editholiday object
//refresh main page table rows
}

When I edit data like Name in Dialog, as I am type letters, main html page table row column gets updated. I do not want main table data to get updated as I am typing in dialog.
How do I avoid.

[Yanmario]

Hi Prathibarani,

This is not specifically related to the component, but what I can suggest of trying is to create a clone of the object in the EditDialog method:

EditDialog(h: Holiday) {
    this.editholiday = { ...h };
}

This way, the table shouldn't reflect changes until you explicitly update the original object upon saving. Something like:

update() {
    const index = this.hl.findIndex(holiday => holiday.id === this.editholiday.id);
    if (index !== -1) {
        this.hl[index] = { ...this.editholiday };
    }
}

I hope this suggestion helps in your specific use-case scenario.

Regards,
Yanmario
Progress Telerik