Model Binder fails to bind data from Grid (MVC4, KendoUI for Web)

[Jim.Mills]

I have an issue where I have defined and created my KendoUI Web Grid widget in javascript and am attempting to perform batch editing.  I have followed all of the examples I can find, but when the "update" action executes on the controller, it fails to bind the data.  

I have the following:
A Contact Model:

public class ContactModel

      {

      public int Id { get; set; }

      public string FirstName { get; set; }

      public string LastName { get; set; }

      public string GenderCode { get; set; }

      public DateTime BirthDate { get; set; }

      public AddressModel Address { get; set; }

      public string Email { get; set; }

      public string Phone { get; set; }

      public decimal DesiredSalary { get; set; }

      }

A Controller Action defined to Update:

[AcceptVerbs(HttpVerbs.Post)]

     public ActionResult _UpdateGridData([DataSourceRequest] DataSourceRequest request, [Bind(Prefix="models")]IEnumerable<Models.ContactModel> models)

         {

                 if (models != null && ModelState.IsValid)

             {

             foreach (var contact in models)

                 {

                 var target = model.Values.Where(x => x.Id == contact.Id).FirstOrDefault();

                 if (target != null)

                     {

                     target.LastName = contact.LastName;

                     target.FirstName = contact.FirstName;

                     target.BirthDate = contact.BirthDate;

                     target.GenderCode = contact.GenderCode;

                     }

                 }

             }

         return Json(ModelState.ToDataSourceResult());

         }

And my Grid is configured in JavaScript:

// Create a Datasource.

var gridDataSource = new kendo.data.DataSource({

    dataType: "json",

    data: "Data",

    transport: {

        read: {

            url: '@Url.Action("_GetGridData", "KendoGrid")',

            dataType: "json"

        },

        update: {

            url: '@Url.Action("_UpdateGridData", "KendoGrid")',

            dataType: "json",

            type: "POST"

        }

    },

    pageSize: 10,

    batch: true,

    schema: {

        model: {

            id: "Id",

            fields: {

                Id: { type: "number", editable: false, nullable: true },

                FirstName: { type: "string", validation: { required: true } },

                LastName: { type: "string", validation: { required: true } },

                GenderCode: { type: "string", nullable: true },

                BirthDate: { type: "date" }

            }

        }

    }

});

 

// Create a Grid using the above data source.

$("#inlinekendogrid").kendoGrid({

    columns: [

        { field: "Id", title: "ID", width: 8, filterable: false, editable: false },

        { field: "FirstName", title: "First Name", width: 25 },

        { field: "LastName", title: "Last Name", width: 25 },

        { field: "GenderCode", title: "Gender", width: 25 },

        { field: "BirthDate", title: "Born", width: 25, format: "{0:MM/dd/yyyy}" }

    ],

    editable: {

        create: true,

        update: true,

        destroy: true,

        confirmation: "Are you sure you wish to remove this entry?"

    },

    dataSource: gridDataSource,

    sortable: {

        mode: "multiple"

    },

    pageable: {

        refresh: true,

        pageSizes: true

    },

    selectable: true,

    navigatable: true,

    filterable: true

 

});

Everything seems to work fine except for it doesn't get bound to my ContactModel.  The data coming up from the form is as follows:

Form Dataview URL encoded

models[0][Id]:2

models[0][FirstName]:Sally

models[0][LastName]:Shoreman22

models[0][GenderCode]:F

models[0][BirthDate]:Mon Sep 20 2010 00:00:00 GMT-0700 (Pacific Daylight Time)

models[0][Address][AddressLine1]:2 Way Street

models[0][Address][AddressLine2]:

models[0][Address][AddressLine3]:

models[0][Address][City]:Salem

models[0][Address][State]:OR

models[0][Address][ZipCode]:97312

models[0][Email]:[e-mail]

models[0][Phone]:

models[0][DesiredSalary]:0

I have not found any examples of people using Web Grid Widget in javascript with an MVC Controller.  Is the mixing of the two what is causing my troubles?  Do I need to configure the DataSource differently?  Any help would be appreciated.

[Richard Wilde]

I have the problem where my datasourcerequest only binds the page size and page number. Filters and sort are always null.. Are you seeing the same as well or is your datasourcerequest fully populated?

[Richard Wilde]

Scrap my last comment, I raised a ticket and got an answer. For me to bind to my datasourcerequest I was told the following. Maybe changing the type to "aspnetmvc-ajax" instead of Json will help you here. I also noticed you have "DataType" and I use "Type"

1. Make sure you have included kendo.aspnetmvc.min.js in your page. 
2. Set the type of your data source to "aspnetmvc-ajax".

e.g. 

 $("#grid").kendoGrid({

            dataSource: {

                type: "aspnetmvc-ajax",

                transport: {

                     read: {

                        url:"/AjaxClient/ListContact/@Model.EmailList.Id",

                        type: "POST",

                        cache: false

                     }

                },

Of course I might be barking up the wrong tree for you!