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

[Vivek]

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.

[Nikolay]

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:

• https://dojo.telerik.com/iCaSumuf

Let me know if you have any questions.

Regards,

Nikolay
Progress Telerik