Prevent Kendo Grid Inline Editor from applying changes back to data item

[Ryan]

I have a Kendo Grid that displays a date. I wish to make it inline-editable.

The kicker here is that I'm also using ngrx for immutable state management / redux pattern. So, the array that is used for the data in KendoGird, as is each individual object is immutable. Unfortunately, it looks like when I use Kendo Grid's editor functions, it attempts to apply the changes to the dataItem (which is read-only and produces an error and prevents moving forward)

I've produced an example that shows this. It doesn't use ngrx just to avoid having to set that up for the example, but it makes the object that is used for the dataItem immutable using Object.defineProperties().

https://stackblitz.com/edit/angular-cdgpy4-y8jhnhyj?file=src%2Fapp%2Fapp.component.ts

You can see trying to update the date causes an error in the application.

I was hoping to prevent the save on Kendos's side using sender.cancelCell();  but that doesn't seem to work.

Any ideas?

[Martin Bechev]

Hello Ryan,

To address the issue of immutability with the Kendo Grid's inline editing while using immutable data structures, you can intercept the editing process and manage updates in a way that aligns with your application's state management practices.

To achieve this using the built-in reactive editing directive might not be suitable since the directive encapsulates the logic by simplifying the setup when implementing an editable Grid and does not provide much flexibility and adjustments.

What could be done is to handle the editing-related events, that the Grid emits, and update the Grid data manually. The following article demonstrates step by step guide on how to set up CRUD operations relying on events. For more detailed steps, please check this article:

https://www.telerik.com/kendo-angular-ui/components/grid/editing/inline-editing#angular-data-grid-inline-editing

The approach allows you to maintain immutable objects while working with CRUD operations. When editing begins, create a mutable copy of the data item. This ensures that you can make changes to the copy without altering the original immutable object, preserving the immutability principle. In its essence, the Grid and the rest of the components provided by the Kendo Angular suite have just representational functionality. The developer can store and update the collection as necessary and if the data is in the supported format the components will display it as desired.

I hope this sheds some light on the case.

Regards,
Martin Bechev
Progress Telerik