In cell edit custom update/decline changes button

4 posts, 1 answers
  1. Cooler
    Cooler avatar
    4 posts
    Member since:
    Oct 2020

    Posted 13 Oct Link to this post

    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
     
  2. Answer
    Martin
    Admin
    Martin avatar
    253 posts

    Posted 15 Oct Link to this post

    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

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

  3. Cooler
    Cooler avatar
    4 posts
    Member since:
    Oct 2020

    Posted 15 Oct in reply to Martin Link to this post

    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.
  4. Martin
    Admin
    Martin avatar
    253 posts

    Posted 19 Oct Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top