This is a migrated thread and some comments may be shown as answers.

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

2 Answers 237 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jim.Mills
Top achievements
Rank 1
Jim.Mills asked on 15 Nov 2012, 09:07 PM
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]:salshor@saif.com
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.

2 Answers, 1 is accepted

Sort by
0
Richard Wilde
Top achievements
Rank 1
answered on 22 Nov 2012, 08:32 AM
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?
0
Richard Wilde
Top achievements
Rank 1
answered on 22 Nov 2012, 12:21 PM
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!
Tags
Grid
Asked by
Jim.Mills
Top achievements
Rank 1
Answers by
Richard Wilde
Top achievements
Rank 1
Share this question
or