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

3 posts, 0 answers
  1. Jim.Mills
    Jim.Mills avatar
    5 posts
    Member since:
    Jan 2012

    Posted 15 Nov 2012 Link to this post

    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:
         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{
        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.
        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][BirthDate]:Mon Sep 20 2010 00:00:00 GMT-0700 (Pacific Daylight Time)
    models[0][Address][AddressLine1]:2 Way Street

    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.

  2. Richard Wilde
    Richard  Wilde avatar
    14 posts
    Member since:
    Jul 2009

    Posted 22 Nov 2012 Link to this post

    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?
  3. Richard Wilde
    Richard  Wilde avatar
    14 posts
    Member since:
    Jul 2009

    Posted 22 Nov 2012 Link to this post

    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".

                dataSource: {
                    type: "aspnetmvc-ajax",
                    transport: {
                         read: {
                            type: "POST",
                            cache: false

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