Grid Crud operation on localdata source (array) not working

[Rajesh]

Grid Crud operation on localdata source (array) not working error  TypeError: Cannot read property 'id' of undefined while click on add button

[Dimiter Topalov]

Hi Rajesh,

The described error seems to be caused by the fact that an expected "id" property is not set on the newly added item. You can check out the following example that demonstrates Grid editing in a scenario with local data:

https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-row-click/

The save() method in the editing service receives information whether the item is new (or an existing item is being edited) and if the item is new, a "ProductID" field is created and set:

public save(product: any, isNew: boolean): void {
        if (isNew) {
            product.ProductID = this.counter++;
            this.data.splice(0, 0, product);
        } else {
            Object.assign(
                this.data.find(({ ProductID }) => ProductID === product.ProductID),
                product
            );
        }
    }

Other examples that involve remote data service also differentiate between adding and updating an item, and issue different requests such that eventually a new item with the expected fields is created and opened for editing in the Grid, e.g.:

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

The built-in Grid editing behavior boils down to creating a new item with the respective fields, and opening it for editing in the Grid when the Add button is pressed, so depending on the specific scenario the means for providing an ID to the new item may vary.

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik