In cell edit custom update/decline changes button

[Cooler]

Hi, is it possible to customize in-cell editing. I need to save changes when a button is clicked inside cell in edit mode. Like in screenshot below

 

[Martin]

Hi,

Thank you for the screenshot.

In order to customize a cell content when it is in edit mode, use kendoGridEditTemplate:

 

            <kendo-grid-column field="ProductName" title="Product Name">
               <ng-template kendoGridEditTemplate
                let-dataItem="dataItem"
                let-formGroup="formGroup">
               <input/> 
               <button>Save</button>
              </ng-template>
            </kendo-grid-column>

 

For more details check this article where the template is used in reactive form:

https://www.telerik.com/kendo-angular-ui/components/grid/editing/custom-reactive-editing/#toc-custom-editing-in-reactive-forms

I hope this helps.

Regards,
Martin
Progress Telerik

[Cooler]

Thanks for the answer. But I need the ability to edit on click in a cell. I don't know how to save the change by clicking the save or cancel button inside the cell, rather than losing focus as shown in the screenshot.

[Martin]

Hi,

To save the new cell value, the developer needs to handle manually the click event if the desired buttons, and implement custom logic that will update the Grid value cells.

Please check the following example where the Grid automatically saves the new value, using the built-in save the event.

https://www.telerik.com/kendo-angular-ui/components/grid/editing/in-cell-editing/

Using save method is not an option, since a custom button should save the new value, but the used logic is the same.

To control the edit mode of a cell use, editCell and closeCell methods.

Regards,
Martin
Progress Telerik