I have a kendo grid on a .cshtml page along with a kendo date picker, a generic "Update" button, and a generic "save" button. The grid gets populated with data from the database correctly. When I select a date from the datepicker and click on the Update button, the selected date updates every record in the PreparedDate column of the grid. When I click on the generic "save" button, the grid data should get sent to the controller but the data being received by the controller is null.
This is the definition of the grid:
@(Html.Kendo().Grid<TaxCertApp.ViewModels.ProtestBarcodeViewModel>()
.Name("QRCodesGrid")
.AutoBind(false)
.Columns(columns =>
{
columns.Bound(p => p.ID).Hidden(true);
columns.Bound(p => p.Table).Hidden(true);
columns.Bound(p => p.FileNum).Title("File").Width(75);
columns.Bound(p => p.Suffix).Title("Suffix").Width(50);
columns.Bound(p => p.TaxYear).Title("Tax Year").Width(80);
columns.Bound(p => p.qrCode).Title("QR Code").Width(125);
columns.Bound(p => p.Description).Title("Description").Width(150);
columns.Bound(p => p.Petitioner).Title("Petitioner").Width(225);
columns.Bound(p => p.CreatedOnDate).Title("Created").Width(150).Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.PreparedDate).Title("Prepared").Width(150).Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.ServedDate).Title("Served").Width(150).Format("{0:MM/dd/yyyy}");
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Scrollable()
.Navigatable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.AutoSync(false)
.ServerOperation(false)
.Read(read => { read.Action("GetAllQRCodes", "Protest").Data("BuildObjectGridProtest"); })
.Update("QRCodeUpdate", "Protest")
.Model(model =>
{
model.Id(m => m.ID);
model.Id(m => m.Table);
model.Field(p => p.FileNum).Editable(false);
model.Field(p => p.Suffix).Editable(false);
model.Field(p => p.TaxYear).Editable(false);
model.Field(p => p.qrCode).Editable(false);
model.Field(p => p.Description).Editable(false);
model.Field(p => p.Petitioner).Editable(false);
model.Field(p => p.CreatedOnDate).Editable(false);
model.Field(p => p.PreparedDate).Editable(true);
model.Field(p => p.ServedDate).Editable(true);
})
)
)
When I select a date from the date picker and click on the Update button, this javascript gets executed:
var grid = $("#QRCodesGrid").data("kendoGrid");
var dataSource = grid.dataSource;
dataSource.data().forEach(function (item) {
item.set("PreparedDate", PassedDate);
item.dirty = true;
});
grid.refresh();
When I click on the "save" button, this javascript get executed:
var grid = $("#QRCodesGrid").data("kendoGrid");
grid.saveChanges();
And this is the code in my controller:
public JsonResult QRCodeUpdate([DataSourceRequest]DataSourceRequest request, IEnumerable<ProtestBarcodeViewModel> dataModel)
{
var GridData = _repoProtest.UpdateQRCodes(dataModel);
//return Json(GridData, JsonRequestBehavior.AllowGet);
DataSourceResult result = GridData.ToDataSourceResult(request);
return Json(result, JsonRequestBehavior.AllowGet);
}
Any idea why the data in the grid is not being sent to the controller?