kendo ui grid - newbie can't get basic sample to work

Question

I'm familiar with Telerik products but new to Kendo UI MVC wrappers. I originally downloaded them a few months back and never got around to actually trying them so sadly my trial support has expired.

I've started a brand new Kendo UI MVC application in VS.NET.

I created my own Controller and View.

I copied over the batch editing example (http://demos.kendoui.com/web/grid/editing.html) and swapped out a static list for the data the example was using.

The grid displays my data correctly.

However, updates send nothing to the server ({}) when clicking save. Deletes also send nothing to the server ({}) when clicking save. Creates send a record per 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>

Jaimin Jaimin · Accepted Answer · 2013-07-16T10:02:46

I just try your code in my project it's work perfectly fine just do this,

MODEL

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

kendo ui grid - newbie can't get basic sample to work

1 Answers