Kendo UI MVC - basic ajax binding

Question

I saw the example referred here

So in my application I try to implement it this way:

HomeController

public ActionResult About([DataSourceRequest]DataSourceRequest request)
    {
       List<ShortDetail> listSD = new List<ShortDetail>();
       ... fill the list with objects

       var v = listSD.ToDataSourceResult(request, sd => new ShortDetail { firstname = sd.firstname, surname = sd.surname, classname = sd.classname});

           return Json(v, JsonRequestBehavior.AllowGet)
     }

My Model ShortDetail

public class ShortDetail 
{
    public string firstname { get; set; }
    public string surname { get; set; }
    public int classid { get; set; }
    public string classname { get; set; }
    public string grade { get; set; }
    public int studentid { get; set; }
    public DateTime birthdate { get; set; }
    public int? indicatorID { get; set; }
    public string indicatorDescription { get; set; }
    public List<ResultMergedWithType> results { get; set; }

}

In my View About.cshtml

 <div class="col-md-12 table-responsive" id="mapsDiv">
   @(Html.Kendo().Grid<KendoExample.Models.ShortDetail>().Name("grid").DataSource(ds => ds.Ajax().Read(read => read.Action("About", "Home"))).Pageable())


</div>

Now i get raw json in browser

Alternatively if i try to bind the model with view

About.cshtml

@model List<KendoExample.Models.ShortDetail>
@using Kendo.Mvc.UI

 <div class="col-md-12 table-responsive" id="mapsDiv">
  @(Html.Kendo().Grid<KendoExample.Models.ShortDetail>().Name("grid").DataSource(ds => ds.Ajax().Read(read => read.Action("About", "Home"))).Pageable())


</div>

HomeController

 public ActionResult About([DataSourceRequest]DataSourceRequest request)
 {
   ...
   return View(listSD);
 }

then there is an empty grid with all columns as defined in model shortdetails except the ResultMergedWithType property

Answer 1

I think you may have missed a step in the tutorial. You haven't declared your column schema (step 9) anywhere:

@(Html.Kendo().Grid<KendoExample.Models.ShortDetail>()
    .Name("grid")
    .DataSource(ds => ds.Ajax()
        .Read(read => read.Action("About", "Home")))
    .Columns(columns =>
    {
        columns.Bound(c => c.firstname);
        columns.Bound(c => c.surname); ... 
    }
    .Pageable())

This is required to bind the data to the relevant columns.

Answer 2

change your code while you returning the result using json from return Json(v, JsonRequestBehavior.AllowGet) to return Json(v.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

for that you need to add a namespace using Kendo.Mvc.Extensions;

Answer 3

I think @TechVision is correct. I haven't tested it but you may be using that extension method incorrectly. I have a similar setup and the only difference in the code is :

List<SomeObject> items =  new GetSomeObjects();
return Json(items.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

If you still get the error after the change above then you are probably using the extension method correctly and I would open up web debugger and look at the source of the request and see if you are calling your controller method somewhere else in your code like BeginForm() or elsewhere.

Answer 4

I found what I was missing..we have to specify a data source in Grid<..>() constructor

About.cshtml

 @(Html.Kendo().Grid<KendoExample.Models.ShortDetail>(Model).Name("grid").DataSource(ds => ds.Ajax().Read(read => read.Action("About", "Home"))).Pageable())

HomeController

 public ActionResult About([DataSourceRequest]DataSourceRequest request)
 {
   ... 
   return View(listSD);
 }

It's ironic though that kendo support team was unable to help me with this problem.

Cheers!