Kendo grid gets null object on create/update/delete

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: "&nbsp;", 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.