save all rows in kendogrid to database on btnclick even

Hi Team, Good Morning. I have a kendo Grid in a view with 2 rows and I have button to add additional rows to Grid. Till here I am good. Now my Grid is having 3 rows and there is save button at below. Now I want to save all the rows in database using MVC on save button click. Please help. Thanks, Sagar Pallavi

it's complicated but you can achieve it if you have a little knowledge of how Kendo Grid binds.

The Grid bind with a datasource and dataItems of each row. so you can code as shown below.

$("#Save").click(function(){
var grid = $("#grid").data("kendoGrid");
var arr=[];
$('grid tr').each(function () {
var dataItem = grid.dataItem(this);
var obj={
col1:dataItem.Col1 // ex- Name: dataItem.Name
col2:dataItem.col2
}
arr.push(obj);
});
var model = {
Customers:arr
};
$.ajax({
type: "post",
url:"/home/Save",
dataType: "json",
contentType: "application/json;charset=utf-8",
data: JSON.stringify(model),
traditional: true,
cache: false,
success:function(){}
})

step 2. Your model

public class Grid
{
public ListCustomers {get;set;}
}

step 3. Your Save Action

public void Save(Grid model)
{
_context.Customers.AddRange(model.customers);
_context.SaveChanges();
}

if you want to save only the modified rows then you can check the state property of dataItem, and select only the modified one.

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
Just replace the class Customer with your class.
Sagar Pallavi5y ago
Thanks Sachin for the response. How to pass row details to the controller as I am getting error at context.
Sachin Singh5y ago
it's complicated but you can achieve it if you have a little knowledge of how Kendo Grid binds.
The Grid bind with a datasource and dataItems of each row. so you can code as shown below.
$("#Save").click(function(){

var grid = $("#grid").data("kendoGrid");
var arr=[];
$('grid tr').each(function () {
var dataItem = grid.dataItem(this);
var obj={
col1:dataItem.Col1 // ex- Name: dataItem.Name
col2:dataItem.col2
}
arr.push(obj);
});
var model = {
Customers:arr

};

$.ajax({
type: "post",
url:"/home/Save",
dataType: "json",
contentType: "application/json;charset=utf-8",
data: JSON.stringify(model),
traditional: true,
cache: false,
success:function(){}

})
step 2. Your model
public class Grid
{
public ListCustomers {get;set;}
}
step 3. Your Save Action
public void Save(Grid model)
{
_context.Customers.AddRange(model.customers);
_context.SaveChanges();

}
if you want to save only the modified rows then you can check the state property of dataItem, and select only the modified one.