Editable grid with direct update

Question

In our scenario we need to edit the data directly from the grid, without passing by a button that changes the state of the row.

Example : a checkbox that changes a boolean value into the data. This sort of update doesn't necessarily need a button to change the state of the row : the user could possibly change the value through the checkbox without changing the state of the grid.

My question is : what the more convenient way of doing this ? I've seen the grid has mutliple kinds of update (Template-Driver Forms, External Forms, Reactive Forms etc ...) but each time the developer has to put a button to change the state of the row.

Answer 1

I manage this directly into my grid template, and I bypassed the kendoGridEditTemplate because it demands a user interaction with the row.

<ng-template kendoGridCellTemplate
               let-dataItem
               *ngIf="column.value.Type === 'boolean'">
    <span *ngIf="!column.value.Editable" [...]></span>
    <kendo-switch *ngIf="column.value.Editable && Config.Editable === 'Direct'"
                  [ngModel]="dataItem[column.key]" 
                  (ngModelChange)="dataItem[column.key]=$event"
                  (valueChange)="gridEditable.updateData(Config, dataItem, [{field:column.value.Editable.Column, value: $event }])">
</ng-template>

We'll use the kendoGridEditTemplate when we'll integrate user interaction when modifying the row data.