Add row to kendo grid in javascript with data

Question

When adding a new record the user is presented with a modal containing a form to fill out. When clicking OK, the data is saved to the DB and the modal closes. However I now have to add this record to the grid. I can't just refresh the grid from the DB since it could wipe out other changes the user might have made in the grid.

I need to get the data from the various form fields and pass it to the grid as a new row in javascript. I've seen an example where a row was copied from one kendo grid to another, but I can't find anything where a new record is added from scratch client side to a kendo grid. Here's the example copying from one grid to another: how to add a new row with pre defined data in kendo grid?

Basically what I'm trying to do is something like this:

var newRow = {field1: $("#field1").val(), field2: $("#field2").val(), field3: $("#field3").val()};

var grid = $("#grid").data("kendoGrid");
grid.addRow(newRow);

Solution 1

That is not the purpose of addRow(). According to the docs, it "Adds an empty data item to the grid", so it doesn't accepts any parameter and doesn't adds data to the grid.

You should add the new data with dataSource.add():

var newRow = {field1: $("#field1").val(), field2: $("#field2").val(), field3: $("#field3").val()};

var grid = $("#grid").data("kendoGrid");
grid.dataSource.add(newRow);

Demo

Solution 2

Insert in the top of the Grid with grid.insert(0, dataItem);

Your sample:

var newRow = {field1: $("#field1").val(), field2: $("#field2").val(), field3: $("#field3").val()};

var grid = $("#grid").data("kendoGrid");
grid.dataSource.insert(0, newRow);