Is there any way to edit individual cell like this in Kendo Grid?

1 Answer 13 Views
Grid
Vivek
Top achievements
Rank 1
Iron
Vivek asked on 06 Oct 2021, 09:30 AM
I need to implement cell editing in Kendo Grid and save the cell value like this. Is there any way to do this? The given Inline InCell editing mode doesn't solve my purpose. please find the attached screenshot.

1 Answer, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 11 Oct 2021, 08:38 AM

Hi Vivek,

Combining incell with inline editing is not coming out of the box. However, it can be achieved with custom logic that appends the desired button is the td. To save the new changes or cancel them you can use the saveChanges() and the cancelChanges() Grid methods.

edit: function(e) {
              var saveButton = "<button id='save' class='k-button' onclick='save()'>Save</button>"
              var cancelButton = "<button id='save' class='k-button' onclick='cancel()'>Cancel</button>"
              e.container.append(saveButton);
              e.container.append(cancelButton);
              e.container.css( "display", "flex" );
            }
...
        function save() {
          $("#grid").data("kendoGrid").saveChanges()
        }
        function cancel() {
          $("#grid").data("kendoGrid").cancelChanges()
        }

Here is a Dojo demo I prepared demonstrating this:

Let me know if you have any questions.

Regards,


Nikolay
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/.

Tags
Grid
Asked by
Vivek
Top achievements
Rank 1
Iron
Answers by
Nikolay
Telerik team
Share this question
or