Kendo grid gets null object on create/update/delete - kendo-ui

Question

I tried a simple Kendo UI grid with CRUD operations with an Employee class. But when I create/update/delete, the employee object in the controller doesn't get the respective value and Id sets to 0 on all the operations
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "Components/",
dataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
url: crudServiceBaseUrl + "GetEmployees",
dataType: "json"
},
update: {
url: crudServiceBaseUrl + "UpdateEmployee",
dataType: "json",
type: "Post"
},
destroy: {
url: crudServiceBaseUrl + "DeleteEmployee",
dataType: "json",
type: "Post"
},
create: {
url: crudServiceBaseUrl + "CreateEmployee",
dataType: "json",
contentType: "application/json; charset=utf-8",
type: "POST",
},
parameterMap: function (data, type) {
return kendo.stringify(data);
},
},
batch: true,
pageSize: 20,
type: "json",
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
Id: { editable: false, nullable: true },
FullName: { validation: { required: true } },
Designation: { validation: { required: true } },
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
toolbar: ["create"],
columns: [
{ field: "Id" },
{ field: "FullName" },
{ field: "Designation" },
{ command: ["edit", "destroy"], title: " ", width: "160px" }],
editable: "popup"
});
});
</script>
and here are the controller actions.
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult CreateEmployee([DataSourceRequest] DataSourceRequest request, Employee employee)
{
if (employee != null && ModelState.IsValid)
{
using (EmployeeDBDataContext context = new EmployeeDBDataContext())
{
EmployeeTable newEmployee = new EmployeeTable();
newEmployee.FullName = employee.FullName;
newEmployee.Designation = employee.Designation;
context.EmployeeTables.InsertOnSubmit(newEmployee);
context.SubmitChanges();
}
}
return Json(new[] { employee }.ToDataSourceResult(request, ModelState));
}
public ActionResult GetEmployees([DataSourceRequest] DataSourceRequest request)
{
var lstConfiguredEmails = new List<Employee>();
using (EmployeeDBDataContext context = new EmployeeDBDataContext())
{
lstConfiguredEmails = (from e in context.EmployeeTables
select new Employee
{
Id = e.Id,
FullName = e.FullName,
Designation = e.Designation
}).ToList();
}
return Json(lstConfiguredEmails.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult DeleteEmployee([DataSourceRequest] DataSourceRequest request, Employee employee)
{
if (employee != null)
{
using (EmployeeDBDataContext context = new EmployeeDBDataContext())
{
EmployeeTable deleteEmployee = (from e in context.EmployeeTables
where e.Id == employee.Id
select e).SingleOrDefault();
context.EmployeeTables.DeleteOnSubmit(deleteEmployee);
context.SubmitChanges();
}
}
return Json(ModelState.ToDataSourceResult());
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UpdateEmployee([DataSourceRequest] DataSourceRequest request, Employee employee)
{
if (employee != null && ModelState.IsValid)
{
using (EmployeeDBDataContext context = new EmployeeDBDataContext())
{
EmployeeTable updateEmployee = (from e in context.EmployeeTables
where e.Id == employee.Id
select e).SingleOrDefault();
updateEmployee.Id = employee.Id;
updateEmployee.FullName = employee.FullName;
updateEmployee.Designation = employee.Designation;
context.SubmitChanges();
}
}
return Json(ModelState.ToDataSourceResult());
}
and the model class
public class Employee
{
public int Id { get; set; }
public string FullName { get; set; }
public string Designation { get; set; }
}
Everytime on pressing Create/Update/Detele, the employee value in controller actions comes as,
Id = 0;
FullName = null;
Designation = null;
Please give solution.
When I used tbe grid with the code below
#(Html.Kendo().Grid<Employee>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.Id);
columns.Bound(p => p.FullName);
columns.Bound(p => p.Designation);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.Id))
.Create(update => update.Action("CreateEmployee", "Components"))
.Read(read => read.Action("GetEmployees", "Components"))
.Update(update => update.Action("UpdateEmployee", "Components"))
.Destroy(update => update.Action("DeleteEmployee", "Components"))
)
)
it works perfectly with the same controller actions.

Answer 1

The issue is resolved by removing batch: true from Datasource.

Answer 2

Try setting transport.create.contentType to "application/json". It might just be that it is sending the server the wrong content type so the server doesn't know how to parse it.