Kendo ui grid - a beginner cannot get a basic sample for work

Question

I am familiar with Telerik products, but new to Kendo UI's MVC wrappers. I initially downloaded them a few months ago and never met to actually try so sad that my trial support expired.

I started using the new Kendo UI MVC application in VS.NET.

I created my own controller and view.

I copied the partial editing example ( http://demos.kendoui.com/web/grid/editing.html ) and changed the static list of data that this example used.

The grid correctly displays my data.

However, when you click the Save button, the updates do not send anything to the server ({}). Deletes and sends nothing to the server ({}) when click save. Creates a post to a new item, but the Name property is set to null.

Any ideas?

My code is below.

Thanks Kevin

* My model *

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace KendoUIMvcApplication1.Models { public class PersonalInterestModel { public int ID; public string Name; } } 

* My controller *

 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using Kendo.Mvc.Extensions; using Kendo.Mvc.UI; using KendoUIMvcApplication1.Models; namespace KendoUIMvcApplication1.Controllers { public class ManagerController : Controller { // // GET: /Manager/ private static List<PersonalInterestModel> items = new List<PersonalInterestModel>(); static ManagerController() { items.Add(new PersonalInterestModel() { ID = 1, Name = "Finance" }); items.Add(new PersonalInterestModel() { ID = 2, Name = "Construction" }); items.Add(new PersonalInterestModel() { ID = 3, Name = "Technology" }); items.Add(new PersonalInterestModel() { ID = 4, Name = "Entertainment" }); } public ActionResult Index() { return View(); } public ActionResult Editing_Read([DataSourceRequest] DataSourceRequest request) { return Json(items.ToDataSourceResult(request)); } [AcceptVerbs(HttpVerbs.Post)] public ActionResult Editing_Create([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<PersonalInterestModel> products) { var results = new List<PersonalInterestModel>(); if (products != null && ModelState.IsValid) { foreach (var product in products) { product.ID = items.Max(i => i.ID) + 1; items.Add(product); results.Add(product); } } return Json(results.ToDataSourceResult(request, ModelState)); } [AcceptVerbs(HttpVerbs.Post)] public ActionResult Editing_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<PersonalInterestModel> products) { if (products != null && ModelState.IsValid) { foreach (var product in products) { var target = items.Find(p => p.ID == product.ID); if (target != null) { target.Name = product.Name; } } } return Json(ModelState.ToDataSourceResult()); } [AcceptVerbs(HttpVerbs.Post)] public ActionResult Editing_Destroy([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<PersonalInterestModel> products) { if (products.Any()) { foreach (var product in products) { items.Remove(items.Find(p => p.ID == product.ID)); } } return Json(ModelState.ToDataSourceResult()); } } } 

* My view *

 @{ ViewBag.Title = "Personal Interests"; } <h2>Index</h2> @(Html.Kendo().Grid<KendoUIMvcApplication1.Models.PersonalInterestModel>() .Name("Grid") .Columns(columns => { columns.Bound(p => p.ID).Width(50); columns.Bound(p => p.Name).Width(140); columns.Command(command => command.Destroy()).Width(110); }) .ToolBar(toolbar => { toolbar.Create(); toolbar.Save(); }) .Editable(editable => editable.Mode(GridEditMode.InCell)) .Pageable() .Sortable() .Scrollable() .DataSource(dataSource => dataSource .Ajax() .Batch(true) .ServerOperation(false) .Events(events => events.Error("error_handler")) .Model(model => model.Id(p => p.ID)) .Create("Editing_Create", "Manager") .Read("Editing_Read", "Manager") .Update("Editing_Update", "Manager") .Destroy("Editing_Destroy", "Manager") ) ) <script type="text/javascript"> function error_handler(e) { if (e.errors) { var message = "Errors:\n"; $.each(e.errors, function (key, value) { if ('errors' in value) { $.each(value.errors, function() { message += this + "\n"; }); } }); alert(message); } } </script> 

Answer 1

I just try your code in my project, it works fine, just do it,

MODEL

  public class PersonalInterestModel { public int ID {get; set;} public string Name { get; set; } }