Kendo UI for Web - Create , Destroy , Update model is null

Question

I am trying to create batch insert , update , delete using kendo ui grid and MVC. Here is my code for View and Controller.

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<link href="~/Content/kendo.custom.css" rel="stylesheet" />
<link href="~/Content/kendo.common.min.css" rel="stylesheet" />

<script src="~/Scripts/kendo.all.min.js"></script>
<script src="~/Scripts/kendo.custom.js"></script>

<div>    
    <div id="grid"></div>
    <script>
        $(document).ready(function () {
            $("#grid").kendoGrid({

                editable: true,
                pageable: true,
                sortable: true,
                filterable: true,
                toolbar: ["create", "save", "cancel"],

                columns: [
                        "Name",
                        { command: "destroy", title: "Delete", width: "110px" }
                ],

                dataSource: {
                    transport: {
                        create: {
                            url: "@Url.Action("Create", "VendorType")",
                            dataType: "json",
                            type: "POST" 
                        },
                        read: {
                            url: "@Url.Action("Read", "VendorType")", 
                            contentType: "application/json",
                            type: "POST"
                        }
                    },
                    serverPaging: true,
                    serverFiltering: true,
                    serverSorting: true,
                    pageSize: 5,
                    schema: {
                        data: "Data",
                        total: "Total",
                        model: { 
                            id: "Id",
                            fields: {
                                Id: { editable: false, nullable: true },
                                Name: { validation: { required: true } }
                            }
                        }
                    }
                }
            });
        });
    </script>    
</div>

Controller :

[HttpPost]
public ActionResult Read(int take, int skip, IEnumerable<Sort> sort, Kendo.DynamicLinq.Filter filter)
{

    var result = db.VendorTypes
        .OrderBy(p => p.Id)
        .ToDataSourceResult(take, skip, sort, filter);

    return Json(result);

}

[HttpPost]
public ActionResult Create(IEnumerable<VendorType> types)
{
    var result = new List<VendorType>();
    try
    {
        foreach (var category in types)
        {
            result.Add(category);
            // Add the entity
            db.VendorTypes.Add(category);
        }
        db.SaveChanges();

    }
    catch (DbEntityValidationException e)
    {
        foreach (var eve in e.EntityValidationErrors)
        {
            Console.WriteLine("Entity of type \"{0}\" in state \"{1}\" has the following validation errors:",
                eve.Entry.Entity.GetType().Name, eve.Entry.State);
            foreach (var ve in eve.ValidationErrors)
            {
                Console.WriteLine("- Property: \"{0}\", Error: \"{1}\"",
                    ve.PropertyName, ve.ErrorMessage);
            }
        }
    }
    return Json(result);
}

Now the read operation works fine. but when i try to save the entries the list of objects in CREATE , UPDATE Or DELETE methods are always null. I can see the values being passed in the browser but in the controller they are not available. Can any one point out a mistake i am making ?

Is VendorType an EF object? If that is the case you should create a VendorTypeDTO with serializable attributes and then map this object to EF VendorType. — Bruno Pessanha, Nov 18 '15 at 14:32

score 0 · Accepted Answer · answered Dec 12 '15 at 06:38

I found the solution for this. The model name which you have as parameter in controller need to be mapped using "ParameterMap" of kendo UI.

 parameterMap: function (data, operation) {
                            if (operation != "read") {
                                var result = {};
                                for (var i = 0; i < data.models.length; i++) {
                                    var site = data.models[i];
                                    for (var member in site) {
                                        result["projects[" + i + "]." + member] = site[member];
                                    }
                                }
                                return result;
                            } else {
                                return JSON.stringify(data)
                            }
                        }

As my parameters collection is defined as "projects" my controller action method should have the same name for the argument.

i.e

public ActionResult Create(IEnumerable<Project> projects)
{

}

Hope this will help some one.

Kendo UI for Web - Create , Destroy , Update model is null

1 Answers1