How to use data from a model to bind as a kendo data source

Question

I have an empty div that I want to initialize into a kendo grid using Model data. It should be something like the following, but I cannot load the data

$("#mapsDiv").kendoGrid({ sortable: true, dataSource: { transport: { read:"/Home/About", dataType: "odata" }, pageSize: 5 }, pageable: true, resizable: true, columnMenu: true, scrollable:true, navigatable: true, editable: "incell" }); 

About.cshtml

 @model List<KendoExample.Entities.ShortStudent> <div class="row"> <div class="col-md-12 table-responsive" id="mapsDiv"> </div> 

My home controller is as follows

 List<ShortStudent> students = new List<ShortStudent>(); ShortStudent student1 = new ShortStudent(); student1.birthdate = new DateTime(1999, 4, 30); student1.classname = "1B"; student1.firstname = "Fredie"; student1.surname = "Fletcher"; student1.studentid = 1; ShortStudent student2 = new ShortStudent(); student2.birthdate = new DateTime(2010, 5, 4); student2.classname = "1B"; student2.firstname = "Lee"; student2.surname = "Hobbs"; student2.studentid = 2; students.Add(student1); students.Add(student2); return View(students); 

I saw examples using json but not odata ...

In addition, there are examples to use it as

 @(Html.Kendo().Scheduler<MeetingViewModel>() .Name("scheduler") .Editable(false) .DataSource(ds => ds .Custom() .Batch(true) .Schema(schema => schema .Model(m => { m.Id(f => f.MeetingID); m.Field("title", typeof(string)).DefaultValue("No title").From("Title"); m.Field("start", typeof(DateTime)).From("Start"); m.Field("end", typeof(DateTime)).From("End"); m.Field("description", typeof(string)).From("Description"); m.Field("recurrenceID", typeof(int)).From("RecurrenceID"); m.Field("recurrenceRule", typeof(string)).From("RecurrenceRule"); m.Field("recurrenceException", typeof(string)).From("RecurrenceException"); m.Field("isAllDay", typeof(bool)).From("IsAllDay"); m.Field("startTimezone", typeof(string)).From("StartTimezone"); m.Field("endTimezone", typeof(string)).From("EndTimezone"); })) .Transport(new { //the ClientHandlerDescriptor is a special type that allows code rendering as-is (not as a string) read = new Kendo.Mvc.ClientHandlerDescriptor() {HandlerName = "customRead" } }) ) ) 

which I cannot understand / implement, please ignore this solution.

Currently, I see a grid footer that says (1 - 2 out of 4852 elements) with no title or content (datarows) on my screen. What am I doing wrong?

UPDATE

  var dataSource = new kendo.data.DataSource( { transport: { read: { url: '@Url.Action("About", "Home")', contentType: "application/json", dataType: "json" } }, schema: { model: { fields: { firstname: { type: "string" }, surname: { type: "string" }, birthdate: { type: "date" }, classname: { type: "string" } } } }, type: "json", serverPaging: false, serverFiltering: true, serverSorting: false } ); $("#mapsDiv") .kendoGrid( { sortable: true, dataSource: { transport: { read: dataSource }, pageSize: 2 }, pageable: true, resizable: false, columnMenu: true, scrollable:true, navigatable: true, editable: "incell", columns:[{ field: "firstname", },{ field: "surname", },{ field: "classname", },{ field: "age", }] }); 

Homecontroller

  public ActionResult About() { .... return View(students); } 

Now there is a grid with a header, but no data. If I change the action to json, it returns plain json on the page

 public ActionResult About() { .... return Json(students, JsonRequestBehavior.AllowGet); } 

Answer 1

So, here is what I found that should have been straight :)

 var values = @Html.Raw(Json.Encode(@Model)); $("#MapDetails") .kendoGrid( { sortable: true, dataSource: { data:values, pageSize: 2 }, pageable: true, resizable: false, columnMenu: true, scrollable:true, navigatable: true, editable: "incell", columns:[{ field: "firstname", },{ field: "surname", },{ field: "classname", },{ field : "age", }] }); 

Answer 2

Have you tried adding fields to the grid?

 $("#mapsDiv") .kendoGrid( { sortable: true, dataSource: { transport: { read:"/Home/About", dataType: "odata" }, pageSize: 5 }, columns: [ { field: "classname", title: "Class Name" }, { field: "firstname", title: "First name" }, { field: "surname", title: "Last name" } ], pageable: true, resizable: true, columnMenu: true, scrollable:true, navigatable: true, editable: "incell" }); 

Answer 3

I just look at the TV show. Try the following. Hope to help, my friend. Or you can visit this link to find out more: http://demos.telerik.com/kendo-ui/grid/remote-data-binding .

 $("#mapsDiv") .kendoGrid( { sortable: true, dataSource: { transport: { read:"/Home/About", dataType: "odata" }, pageSize: 5 }, schema: { model: { fields: { studentid: { type: "number" }, birthdate : { type: "date" }, classname : { type: "string" }, firstname : { type: "date" }, surname : { type: "string" } } } }, pageable: true, resizable: true, columnMenu: true, scrollable:true, navigatable: true, editable: "incell" });