I would like to send a viewModel selected with edit "Edit" action grid to update this row data in controller side .
I would like then to send back the new version of row data : update Popup and datasource grid.
For now, the ajax post to send the edit row doesn't work fine. The data propertie of ajax call return an javascript Error.
Do you have a suggestion ? Thanks.
View :
@(Html.Kendo().Grid<KendoGridAjaxEditing.Models.ProductViewModel>()
.Name(
"grid"
)
.Columns(columns =>
{
columns.Bound(product => product.ProductName);
columns.Bound(product => product.UnitsInStock).Width(250);
columns.Command(commands =>
{
commands.Edit();
// The "edit" command will edit and update data items
commands.Destroy();
// The "destroy" command removes data items
}).Title(
"Commands"
).Width(200);
})
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Scrollable()
.Groupable()
.Events(e =>
{
e.Edit(
"onRequestEdit"
); // Ajax Call to update
})
.Editable(editable => editable.Mode(GridEditMode.PopUp))
// Use inline editing mode
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(product => product.ProductID);
// Specify the property which is the unique identifier of the model
model.Field(product => product.ProductID).Editable(
false
).DefaultValue(0);
// Make the ProductID property not editable
})
.Events(events =>
{
events.Error(
"onError"
);
})
.ServerOperation(
false
)
.Create(create => create.Action(
"Products_Create"
,
"Home"
))
// Action invoked when the user saves a new data item
.Read(read => read.Action(
"Products_Read"
,
"Home"
))
// Action invoked when the grid needs data
.Update(update => update.Action(
"Products_Update"
,
"Home"
))
// Action invoked when the user saves an updated data item
.Destroy(destroy => destroy.Action(
"Products_Destroy"
,
"Home"
))
// Action invoked when the user removes a data item
)
.Pageable()
)
JavaScript (ajax call) :
function onRequestEdit(arg) {
alert(
"onRequestEdit : Edit row"
);
var griddata = $(
"#grid"
).data(
"kendoGrid"
);
var uid = $(
".k-edit-form-container"
).closest(
"[data-role=window]"
).data(
"uid"
);
kendoConsole.log(
'onRequestEdit : Edit uid :'
+ uid);
var model = $(
"#grid"
).data(
"kendoGrid"
).dataSource.getByUid(uid);
// Show row value with currente model -> OK
kendoConsole.log(
"onRequestEdit : Edit model : "
+ model.ProductID +
":"
+ model.ProductName);
// Show row value with argument -> OK
kendoConsole.log(
"onRequestEdit : Edit argument : "
+ arg.model.ProductID +
":"
+ arg.model.ProductName);
$.ajax({
url:
'@Url.Action("Products_CheckLock", "Home")'
,
type:
'POST'
,
datatype:
'json'
,
contentType:
"application/json; charset=utf-8"
,
//data: JSON.stringify({ product: arg.model.data() }), // Return a javaScript Error
//data: JSON.stringify({ product: arg.model() }), // Return a javaScript Error
//data: JSON.stringify({ product: arg.model.dataSource(this) }), // Return a javaScript Error
//data: JSON.stringify({ product: arg.model.dataSource.data() }), // Return a javaScript Error
data: JSON.stringify({ product: arg.model.dataSource.data() }),
// Return a javaScript Error
success: function (result) {
// Update record in Popup Edit
// Is it a good way ?
var grid = $(
"#grid"
).data(
"kendoGrid"
);
var dataSource =
new
kendo.data.DataSource({
data: result.Data
});
grid.setDataSource(dataSource);
grid.dataSource.refresh();
},
error: function () { alert(
'SM : Error Edit row'
); }
})
}
Controller :
public
ActionResult Products_CheckLock([DataSourceRequest]DataSourceRequest request, ProductViewModel[] product)
//public ActionResult Products_CheckLock([DataSourceRequest]DataSourceRequest request, String product)
{
if
(ModelState.IsValid)
{
using
(var northwind =
new
NorthwindEntities())
{
// Create a new Product entity and set its properties from the posted ProductViewModel
var entity =
new
Product
{
ProductID = product[0].ProductID,
ProductName = "Last_Version-" + product[0].ProductName,
UnitsInStock = product[0].UnitsInStock
};
}
}
// Return the removed product. Also return any validation errors.
return
Json(
new
[] { product }.ToDataSourceResult(request, ModelState));
}