Can we edit row in angular-5-datatable?

[prakashkaruppiah]

Hi @brunano21 , Can we edit row in angular-5-datatable? Please help us.

[brunano21]

What do you mean by edit?

[prakashkaruppiah]

Like grid cells editing, we did cell editing to angular 4 data table using input box, but its shows input box always. We need, when we click that cell, then only show edit mode input box. Code
<data-table-column [property]="'ReceicedQty'" [header]="'Received Qty'" [sortable]="true" [resizable]="true" [width]="90"> <ng-template #dataTableCell let-item="item"> <input type="number" name="ReceicedQty"[(ngModel)]="item.ReceicedQty" (change)="onSelectRecQty(item.ReceicedQty,item.GRN_Recpt_Id,item)" [ngModelOptions]="{standalone: true}" class="form-control input-sm" style="width: 75px;" />

[brunano21]

You could bind a click event to the cell and swap the content with an input field within the bound function. Does this fix your issue?

[prakashkaruppiah]

Can you give me some example code?

[brunano21]

@prakashkaruppiah are you still interested in this?

[prakashkaruppiah]

yes @brunano21 , Please give me suggestion.

[brunano21]

component.html:

<data-table-column 
   [property]="ReceicedQty"
   [header]="Received Qty" 
   [sortable]="true" [resizable]="true" [width]="90">
   <ng-template #dataTableCell let-item="item" let-row="row">
      <div (click)="toggleEdit(item, row)">
         <span *ngIf="!item.edit" [textContent]="item.ReceicedQty"></span>
         <input *ngIf="item.edit" type="number" name="ReceicedQty" [(ngModel)]="item.ReceicedQty" 
            (change)="onSelectRecQty(item.ReceicedQty,item.GRN_Recpt_Id,item)"
            [ngModelOptions]="{standalone: true}" class="form-control input-sm" style="width: 75px;" />
      </div>

component.ts:

...
toggleEdit(item, row) {
   item.edit = !item.edit;
}
...