How do I add a record, remove a record, and replace/update a record in a Kendo Grid with a local dataSource?

[Lee]

let data = [
  {
    itemId: 1,
    itemName: "Apples",
    itemColor: "Red"
  },
  {
    itemId: 2,
    itemName: "Grapes",
    itemColor: "Green"
  }
];

I have a kendo grid with a local JSON dataSource (Not connected to a server). When a user fills out a form in a modal, I need to then either add, delete, or update the related record in the local kendo grid. What would be the easiest way to do each of these operations so that I don't see the dirty record indicator on the screen? 

[Neli]

Hello Lee,

You can perform add, remove, and update operations directly on a Kendo UI Grid with a local JSON dataSource by using the DataSource API. This approach avoids triggering the dirty indicator since you are not using the built-in editing features. Here’s how to do each operation:

1. Add a Record

- https://www.telerik.com/kendo-jquery-ui/documentation/api/javascript/data/datasource/methods/add 

This method adds a new record to the DataSource and refreshes the grid display.

var grid = $("#grid").data("kendoGrid");
grid.dataSource.add({
    itemId: 3,
    itemName: "Bananas",
    itemColor: "Yellow"
});
grid.refresh(); // Updates the grid view

2. Remove a Record

- https://www.telerik.com/kendo-jquery-ui/documentation/api/javascript/data/datasource/methods/remove 

var grid = $("#grid").data("kendoGrid");
var itemToRemove = grid.dataSource.get(2); // Use itemId to get the dataItem
grid.dataSource.remove(itemToRemove);
grid.refresh();

The example above removes the specified record from the DataSource and updates the grid.

3. Update/Replace a Record

To update a record you can use the model set method and update the needed property:

- https://www.telerik.com/kendo-jquery-ui/documentation/api/javascript/data/model/methods/set 

var grid = $("#grid").data("kendoGrid");
var itemToUpdate = grid.dataSource.get(1); // Use itemId to get the dataItem
itemToUpdate.set("itemName", "Green Apples");
itemToUpdate.set("itemColor", "Green");
grid.refresh();

Additional Notes

• No Dirty Indicator: The dirty indicator is only shown when using built-in editing. Direct DataSource manipulation does not trigger it.
• No sync() Needed: Since you are not persisting changes to a server, you do not need to call sync().

I hope this helps.

Regards,
Neli
Progress Telerik